Home > Uncategorized > TypeScript : Large Scale Javascript Development made easy

TypeScript : Large Scale Javascript Development made easy

Beberapa tahun belakangan ini javascript sudah menjadi first class language yang tidak hanya digunakan untuk aplikasi web saja tetapi juga di sisi server. Anda dapat melihat framework sepertiNode.js, framework for single page apps, bahkan video streaming and conference jg memanfaatkan kekuatan dari javascript dan HTML 5. Jangan lupa juga bahwa microsoft menggunakan javascript sebagai salah satu language yg dapat membuat aplikasi windows store apps (windows 8). Perkembangan library javascript dengan kehadiran HTML 5 juga sangat mengesankan. Sepertinya hampir tidak ada hal yang tidak bisa dilakukan dengan javascript .

Tetapi sudah bukan rahasia lagi bahwa pembangunan aplikasi dengan memanfaatkan javascript apalagi hal tersebut memiliki skala besar sangat painful. Hal ini disebabkan lemahnya dukungan dari tools dan javascript merupakan scripting language yang memiliki nature dynamic typing. Anda dapat melihat banyak buku yang akan membahas lengkap bagaimana kita bisa membuat code base kita lebih maintanable dan hal tersebut dapat dilakukan tetapi tidak mudah. Anda dapat melihat sebagian kecil dari buku yang membahas hal tersebut.

 

image image image

imageimageimage

 

Jika anda membaca buku diatas terutama buku yang terakhir (membahas tdd, refactoring dan pattern), anda akan merasakan bahwa sulit untuk melakukan hal tersebut dengan benar. 

Anda mungkin pernah mendengar mengenai CoffeScript yang menawarkan kemudahan dan ada beberapa project serupa. Dan akhirnya microsoft pun membuat bahasanya sendiri yaitu TypeScript. Seperti beberapa project yang lain typescript akan menghasilkan javascript code. Dan creatornya adalah Anders Hejlsberg yang merupakan Architect dari c#. Wow. Sintaks yang digunakan pada TypeScript juga mirip c# dan java. You will love this one. Anda juga dapat memanfaatkan VIsual Studio sebagai IDE , melakukan debugging dsb. Static typing jadi anda akan mendapat bantuan dari compiler mengenai sintaks error dsb. Awesome right ?? Ok enough marketing speech. let’s write some code.

First Cup with TypeScript

  1. Anda dapat menginstall typescript plugin untuk visual studio dari sini.

    image

  2. Setelah anda melakukan instalasi anda dapat menemukan template baru pada visual studio. Berikan nama dan create project.

    image

  3. Anda akan mendapati file .ts (typescript) dan .js (javascript). Secara otomatis file typescript akan dicompile menjadi javascript.

    image

  4. Jika anda membuka file .ts dan jika background programming anda adalah java atau c# maka hal ini sangat familar sekali bagi anda. clean and beautiful.

    image
    apakah anda bisa bayangkan bagaimana membuat code tersebut dengan javascript. Silahkan anda buka sendiri file javascriptnya. very messy and hurt your eyes. guaranteed!!

    image

  5. Sekarang mari kita jalankan. Pastikan dulu bahwa browser yg terpilih untuk menjalankan aplikasi ini adlah Internet Explorer, karena sebelumnya saya tidak dapat melakukan debugging dengan Chrome.

    image 

  6. Jika anda ingin mengetes fitur debugging pada bagian ini anda dapat menset breakpoint. Saya membuatnya pada constructor.

    image

  7. Tekan F5  untuk menjalankannya. Anda akan mendapat pesan seperti berikut ini karena dia akan dijalakan di IIS. Tekan saja OK.

    image

    Internet explorer akan terbuka untuk menampilkan hasilnya. Voila aplikasi kita dijalankan dan aplikasi berhenti pada breakpoint. Anda juga akan mendapatkan fitur debugging yang diberikan oleh visual studio.

     image

  8. Tekan F5 untuk melanjutkan aplikasi lagi. Akan ditampilkan page seperti berikut ini.

    image 

Websocket dengan TypeScript

  1. Sekarang mari kita membuat code sederhana. Saya penasaran bagaimana dengan dukungan HTML 5 pada typescript. Dan fitur yang saya cari adalah ??? the most powerful one from HTML 5. WEBSOCKET !!. Let’s do it. Saya akan menggunakan server websocket yang dapat diakes disni http://www.websocket.org/echo.html.

    image

    Anda dapat melihat alamat websocketnya adalah ws://echo.websocket.org. Hanya merupakan simple reply dari server. Anda dapat mencoba terlebih dahulu demo nya untuk memastikan dukungan websocket pada browser anda dan juga tidak ada masalah dengan firewall dan NAT.

  2. Tambahkan code yang telah di highlight berikut ini.

    image

    Perhatikan pendeklarasian variable dengan static type, intellisense pada websocket dan penggunaan lambda expression untuk callback. Sangat indah sekali.

  3. Langsung saja kita jalankan dengan menekan F5. Anda akan mendapat pesan bahwa koneksi websocket telah dibuat ke server.

    image

    Tekan OK dan message anda akan dibalas oleh server.

    image 

  4. Anda dapat melihat presentasi mengenai javascript langsung dari pembuatnya dari dua video berikut ini.

image image

    Have fun with TypeScript !!!

    Cheers

    Categories: Uncategorized
    1. May 9, 2013 at 5:49 am

      Typescript look like C pre-processor that was used to implement the first version of C++ by Stroustrup in AT&T. In this case MS does not create new language, only extend the JS with module syntax..the advantage is as mentioned by Haldsberg in the video, for most part you still coding in JS not in other language (eg. Dart) that generate JS codes.

    1. No trackbacks yet.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: