TechTalk #85: Latest Frontend Technology

Akhirnya, setelah sekian lama, TechTalk muncul lagi. Dan tau-tau udah episode 85. :D. Saya agak telat sih, jadi kurang tau yang bagian depan. Ohya materi episode ini Latest Frontend Technology yang dibawakan oleh Mas Rijalul Fikri.

Build Tools

Saya masuk udah sampai bagian build tools. Di presentasinya, sekarang ini build tools bisa dibagi menjadi 3 generasi:

  1. First Gen. Kita mengenal make untuk proses build.
  2. Second Gen. Yang masuk di sini ada Grunt, Gulp, Broccoli, dll.
  3. Third Gen. Ada Browserify, Webpack, JSPM.

Jaman Grunt masih baru dulu, saya ngga tau itu gunanya buat apa. Lama kelamaan jadi tau, dengan Grunt kita bisa compile SCSS/Less ke CSS, optimize image, dan copy resources dengan sekali perintah di terminal. Tapi yang paling terasa dari Grunt adalah waktu prosesnya lama karena tiap hasil dari proses akan di-write ke hardisk, lalu di-read, baru diproses selanjutnya, dan begituseterusnya sampai porses terakkhir. Nah dari situ muncul Gulp. Di Gulp hasil dari proses akan di-pipe ke proses lain dan baru akan di-write pada proses terakhir.

Tapi belakangan muncul juga tren menggunakan NPM langsung sebagai build tool. Alasannya lebih simpel dan tidak perlu file config yang kadang kita malah lebih sibuk ngurusin confignya. :p Bisa dibaca di:

Browserify saya masih sebatas baca-baca situsnya. Webpack baru coba sore ini gegara kebelet ngetes VueJS. JSPM baru denger kemarin dan setelah dibuka webnya baru inget pernah buka ini. 😐

Live Editing

Bahasan selanjutnya ada tentang live editing. Mas Fikri juga membagi ini jadi 3:

  1. First Gen. Our good ol’ friend, ctrl-r
  2. Second Gen. Masuk kategori ini LiveReload dan BrowserSync
  3. Third Gen. Hot Reload.

Untuk LiveReload saya belum pernah pakai. BrowserSync pernah sebatas coba-coba. Hot Reload? Baru ngetren belakangan, belum sempat baca-baca. Bahkan saya ragu nulis istilahnya dengan benar. :/

Di second gen. kita dienakkan dengan refresh browser otomatis ketika kita menyimpan file. Nah kalau hot reload, browser sama sekali enggak refresh, tapi kontennya berubah, tapi statenya tetep, karena semua perubahan ada di memori (begitu kata mas Fikri).

Todo: ngulik lebih jauh tentang hot reload

React

Siapa yang nggak tau React? A JavaScript library for building user interfaces. 😐

Library yang lagi ngetren di kalangan frontenders. Pertama saya tau dan baca-baca React beberapa bulan lalu, langsung bingung dengan HTML di dalam javascript, yang belakangan ternyata itu namanya JSX. Saya belum ngulik jauh sih, dan belum nemu alasan yang pas kenapa saya harus pakai React. Kalau saya lihat soalnya ini njlimet. Belum lagi ES6 yang juga baru dengar belakangan ini.


Kalau bicara frontend kayanya banyak banget tool-tool atau library baru yang terus bermunculan, bahkan mungkin kita belum sempat ngulik ini, itu udah rilis dan terlihat lebih seksi. Tapi tantangan sih biar kita terus belajar dan nggak ketinggalan kereta. 🙂

Boleh dibuka: How to Keep Up to Date on Front-End Technologies

 

TechTalk #63: MeteorJS

Halo, balik lagi sama saya, sang pemilik blog ini. 😀

Seperti biasa (padahal baru 4x), minggu ini TechTalk di JDV mengangkat topik Rapid Prototyping with MeteorJS yang disampaikan oleh Mas Kenniko. Di sesi ini Mas Kenniko menerangkan betapa mudahnya membuat prototipe aplikasi dengan MeteorJS. Bayangkan, aplikasi chat realtime bisa dibuat kurang dari 1 jam, awesome! 😮

Jadi dengan MeteorJS kita tinggal install paket-paket yang kita butuhkan. Tambah sedikit kode, tanpa konfig apapun, aplikasi kita sudah jalan. Dia punya sistem paket sendiri dan paket-paketnya bisa dicari di atmospherejs.com. Dan asiknya, si Meteor ini punya fitur One language everywhere, kita tidak perlu ngoding untuk backend dan frontend, cukup sekali saja dan Meteor bisa tau mana yang harus dijalankan di backend atau frontend.

Keynotes

  • Realtime, perubahan bisa dilihat secara bersamaan di device yang berbeda
  • Live update, ketika kita save file, tampilan di browser otomatis ikut update, dan itu tanpa reload page
  • Free testing server, untuk testing aplikasi secara live di namaAplikasi.meteor.com
  • Integrasi dengan Cordova, deploy ke mobile jadi lebih mudah
  • Way too magic! Banyak kemudahan tapi kita tidak tahu apa yang sebenarnya terjadi

~~~

Di kesempatan ini juga saya ketemu langsung dengan mas Rizqinova, yang sebelumnya cuma tau di facebook haha. Sempat kenalan juga dengan mas Evan dan mas Baba (kalau ngga salah 😀 yang kebetulan baru tau kemarin itu. Sip, ilmu baru, relasi baru. :))

TechTalk #62: Animations in AngularJS

Hola!

TechTalk minggu ini masih membahas javascript dan kali ini topiknya adalah Animations in AngularJS. Masih bersama mas Rijalul Fikri, yeah. Jadwal sebelumnya minggu ini topiknya MeteorJS, berhubung pembicaranya berhalangan jadinya mas Fikri yang turun tangan (ceritanya begitu).

Kali ini dijelasin dari basic animasi di web. Bukan animasi yang kompleks, bukan bahas <canvas> juga. Pertama dikenalkan dengan transition di CSS. Lalu dibandingkan dengan jQuery animate(). Dan terakhir penerapan animasi di AngularJS.

What I learned:

  • Gunakan properti yang ramah animasi: PROS (Position, Rotation, Opacity, Scale). Referensi
  • Gunakan Animate.css untuk efek-efek animasi yang umum digunakan
  • Animasi dengan CSS lebih menghemat waktu dibanding JS, terutama untuk kasus sederhana seperti efek hover
  • Angular #1: menggunakan modul ngAnimate dan manual di CSS-nya
  • Angular #2: modul Hendrixer/ngFX yang sudah bundled dengan ngAnimate dan Animate.css
  • Angular #3: modul cgwyllie/ngular-velocity, yang satu ini belum dibahas karena katanya terlalu panjang untuk dijelasin 😐

Sip, minggu depan kita ke MeteorJS. 🙂

TechTalk #61: Material Design using AngularJS

TechTalk #61 ini topiknya Material Design using AngularJS yang dibawain mas Rijalul FIkri. Awalnya saya kira materinya akan fokus ke Angular-nya, ternyata kebalik. Angular.js di sini ternyata sebagai wadahnya.

Jadi topik kali ini membahas Angular Material (https://material.angularjs.org/), library untuk implementasi Material Design di Angular.js. Dengan library ini, kita bisa mendevelop aplikasi Angular.js dengan rasa Material tanpa harus pusing memikirkan stylingnya, jadi kita bisa fokus ke pengembangan aplikasinya. Banyak fitur dan directives yang siap pakai, jadi kita tidak perlu repot-repot buat dari awal dan kita bisa develop lebih cepat, yosh!

Warna palet juga bisa kita sesuaikan sendiri agar tidak terkesan mainstream. Warna-warna palet default bisa dilihat di http://www.materialpalette.com/

Oke, see ya on the next techtalk!

TechTalk: Domain Driven Design

Update 20 Feb:

Ini merupakan kali pertama saya menjejakkan kaki di JDV. Juga pertama kalinya mengikuti acara techtalk seperti ini. Sebenernya sebelum-sebelumnya tau kalau ada techtalk, tapi baru ini rasanya langsung tergugah keinginan untuk datang. 😀

Pembicaraan kali ini adalah DDD alias Domain-Driven Design. Kalau menurut Wikipedia:

Domain-driven design (DDD) is an approach to software development for complex needs by connecting the implementation to an evolving model.

Pada awal saya dengar tentang DDD, saya langsung mengartikan kata domain di sini sama seperti domain internet; dot com, dot net, dot couk, dan dot-dot lainnya. Dan setelah ikut techtalk ini saya baru tau kalau pemikiran saya terlalu sempit.

Domain di sini maksudnya satu topik tertentu yang terkait dengan perancangan software. Kemarin dicontohkan dengan studi kasus software shipping routes (kalau ngga salah). Diberikan dialog pertama antara user dan developer. Si user berusaha menjelaskan kebutuhan-kebutuhan dari software itu dan segala probabilitasnya. Nah si developer menanggapi si user dengan bahasa teknikal yang entah si user ini mudeng apa mubeng.

Pada dialog kedua masih diberikan dialog yang sama. Bedanya kali ini si developer menganggapi dengan bahasa yang juga dimengerti oleh si user. Jadi dia tidak langsung ngomong implementasinya dengan bahasa teknikal, tapi dia tau penyelesaian dari masalah tersebut jika diimplementasikan secara teknikal.

Jadi kesimpulannya (senangkep saya) DDD memfokuskan suatu masalah (domain) dimana semua orang yang terlibat dalam proses membicarakan hal/domain yang sama, baik itu user, manajer, developer, etc. Seperti menyamakan persepsi atau standardisasi untuk apa yang akan dikerjakan.

~~~

Nah mumpung ke JDV, saya sekalian konfirmasi membership, dan kartunya akan jadi sekitar 2 minggu lagi, horee. Nah sekian dulu event kali ini, kalau ada yang salah tolong dikoreksi yah. 😉