Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi SaputraDicodingEvent
Server Side Rendering menjadi teknik yang popular dalam menampilkan konten pada website. Teknik ini cukup sulit untuk diterapkan namun dapat meningkatkan SEO dan performa website menjadi lebih baik. Penasaran dengan teknik ini dan bagaimana cara menerapkannya?
Poin-poin yang akan dibahas:
- Apa itu Server Side Rendering (SSR)?
- Apa perbedaannya dengan Client Side Rendering (CSR)?
- Keunggulan dan kelemahan dari SSR
- Bagaimana cara menerapkan SSR?
- Framework apa saja yang menerapkan SSR?
Daftar Isi
I. Pengenalan ReactJs
II. Instalasi
III. Dasar-dasar ReactJs
1. JSX
2. Component
3. State
4. Props
IV. Component Lifecycle
V. Latihan
1. Todo List
2. React Router
** BatamJS Community**
Tingkatkan Performa Website dengan Bantuan DevTools - Nasrul GunawanDicodingEvent
Baparekraf Developer Day adalah kegiatan yang diadakan oleh Kementerian Pariwisata dan Ekonomi Kreatif/Badan Pariwisata dan Ekonomi Kreatif (Kemenparekraf/Baparekraf) dengan tujuan mengasah kemampuan teknis pengembang aplikasi di Indonesia. Kegiatan ini memungkinkan transfer pengetahuan dan standar industri secara langsung dari para praktisi yang telah sukses, khususnya pada bidang pengembangan aplikasi.
Web Session
Tema: Tingkatkan Performa Website dengan Bantuan DevTools
Nasrul Gunawan (Software Engineer - Nutrifood Indonesia)
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi SaputraDicodingEvent
Server Side Rendering menjadi teknik yang popular dalam menampilkan konten pada website. Teknik ini cukup sulit untuk diterapkan namun dapat meningkatkan SEO dan performa website menjadi lebih baik. Penasaran dengan teknik ini dan bagaimana cara menerapkannya?
Poin-poin yang akan dibahas:
- Apa itu Server Side Rendering (SSR)?
- Apa perbedaannya dengan Client Side Rendering (CSR)?
- Keunggulan dan kelemahan dari SSR
- Bagaimana cara menerapkan SSR?
- Framework apa saja yang menerapkan SSR?
Daftar Isi
I. Pengenalan ReactJs
II. Instalasi
III. Dasar-dasar ReactJs
1. JSX
2. Component
3. State
4. Props
IV. Component Lifecycle
V. Latihan
1. Todo List
2. React Router
** BatamJS Community**
Tingkatkan Performa Website dengan Bantuan DevTools - Nasrul GunawanDicodingEvent
Baparekraf Developer Day adalah kegiatan yang diadakan oleh Kementerian Pariwisata dan Ekonomi Kreatif/Badan Pariwisata dan Ekonomi Kreatif (Kemenparekraf/Baparekraf) dengan tujuan mengasah kemampuan teknis pengembang aplikasi di Indonesia. Kegiatan ini memungkinkan transfer pengetahuan dan standar industri secara langsung dari para praktisi yang telah sukses, khususnya pada bidang pengembangan aplikasi.
Web Session
Tema: Tingkatkan Performa Website dengan Bantuan DevTools
Nasrul Gunawan (Software Engineer - Nutrifood Indonesia)
Yii2 Framework merupakan salah satu PHP Framework populer. Salah satu keunggulannya adalah mampu mempercepat waktu development, fitur-fitur yang bisa di-extend dan mendukung PHP modern. Pada slide ini kita akan belajar fundamentalnya terlebih dahulu, sebelum terjun membangun project.
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...DicodingEvent
Dicoding Developer Coaching merupakan webinar, yang membahas tuntas kendala maupun pertanyaan yang sering ditanyakan di Academy Dicoding.
Tema kali ini adalah "Membangun Modern App dengan Jetpack & Android Architecture Component."
Di sini Anda akan belajar mengenai Jetpack dan Android Architecture Components. Jetpack adalah serangkaian library yang tersedia untuk membantu developer agar dapat mengikuti praktik terbaik, mengurangi kode boilerplate, serta menulis kode yang berfungsi secara konsisten di berbagai versi dan perangkat Android sehingga developer dapat berfokus pada penulisan kode yang lebih penting. Sedangkan Android Architecture Components adalah salah satu pattern yang dikeluarkan oleh Google. Dengan menerapkan Android Architecture Components, maka kamu akan mempelajar mengenai kumpulan library yang dapat membantu Anda untuk merancang aplikasi yang kuat, dapat diuji, dan dapat dikelola dengan mudah.
Yii2 Framework merupakan salah satu PHP Framework populer. Salah satu keunggulannya adalah mampu mempercepat waktu development, fitur-fitur yang bisa di-extend dan mendukung PHP modern. Pada slide ini kita akan belajar fundamentalnya terlebih dahulu, sebelum terjun membangun project.
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...DicodingEvent
Dicoding Developer Coaching merupakan webinar, yang membahas tuntas kendala maupun pertanyaan yang sering ditanyakan di Academy Dicoding.
Tema kali ini adalah "Membangun Modern App dengan Jetpack & Android Architecture Component."
Di sini Anda akan belajar mengenai Jetpack dan Android Architecture Components. Jetpack adalah serangkaian library yang tersedia untuk membantu developer agar dapat mengikuti praktik terbaik, mengurangi kode boilerplate, serta menulis kode yang berfungsi secara konsisten di berbagai versi dan perangkat Android sehingga developer dapat berfokus pada penulisan kode yang lebih penting. Sedangkan Android Architecture Components adalah salah satu pattern yang dikeluarkan oleh Google. Dengan menerapkan Android Architecture Components, maka kamu akan mempelajar mengenai kumpulan library yang dapat membantu Anda untuk merancang aplikasi yang kuat, dapat diuji, dan dapat dikelola dengan mudah.
11. Hello World
Code : https://github.com/sandi-racy/aitindo-sharing-session
12. Directive
● Directive adalah atribut khusus dengan prefix “v-”
● Value dari directive adalah expression yang bisa disertai filter
● Directive berfungsi untuk meng-apply special behavior kepada DOM ketika
nilai dari expression-nya berubah
Code : https://github.com/sandi-racy/aitindo-sharing-session
13. Computed Property
In-template expression sangat nyaman, tapi benar-benar ditujukan untuk
operasi sederhana saja.
Template ditujukan untuk mendeskripsikan struktur view, menaruh terlalu
banyak logic di template dapat membuat template menjadi berat dan susah
untuk di-maintain.
Itulah alasan Vue.js membatasi binding expression hanya satu expression
saja. Untuk logic yang memerlukan lebih dari satu expression sebaiknya
menggunakan computed property.
Code : https://github.com/sandi-racy/aitindo-sharing-session
14. Computed Property vs $watch
Vue.js memberikan method API yang disebut $watch untuk mengamati
perubahan data pada Vue instance. Ketika memiliki beberapa data yang
harus berubah berdasarkan pada data-data yang lain maka bisa
menggunakan $watch (terutama jika familiar dengan AngularJS). Namun,
lebih baik menggunakan computed property daripada $watch.
Code : https://github.com/sandi-racy/aitindo-sharing-session
16. Methods and Event Handling
Code : https://github.com/sandi-racy/aitindo-sharing-session
17. Kenapa Listener di HTML ?
● Mempermudah mencari handler function di kode JS hanya dengan
membaca sekilas template HTML
● Tidak harus menaruh event listener di JS, kode ViewModel dapat hanya
berisi logic dan DOM-free
● Ketika ViewModel dihancurkan, semua event listener otomatis dihapus
19. Transition
● Transition system di Vue.js memungkinkan untuk menerapkan efek transisi
otomatis ketika elemen dimasukan atau dikeluarkan dari DOM
● Vue.js secara otomatis akan menambah atau menghapus class CSS untuk
memicu transisi/animasi
● Vue.js juga memberikan Javascript hook function untuk memanipulasi DOM
selama transisi
Code : https://github.com/sandi-racy/aitindo-sharing-session
20. Component
Component adalah salah satu fitur paling powerful di Vue.js. Component
membantu meng-extend elemen dasar HTML untuk dapat digunakan
kembali.
Secara sulitnya, component adalah elemen khusus yang compiler Vue.js
akan melampirkan behavior tertentu. Dalam beberapa case, component
juga dapat muncul sebagai elemen HTML asli yang di-extend dengan atribut
khusus.
Code : https://github.com/sandi-racy/aitindo-sharing-session