Get Started With {Next.js,Nuxt.js,Sapper} - VueJS Indonesia x ReactID x SvelteID

Transcript

2. bit.ly/vuejsid-telegram bit.ly/vuejsid-facebook bit.ly/vuejsid-twitter s.reactjs.id/telegram s.reactjs.id/facebook s.reactjs.id/twitter bit.ly/svelteid-telegram bit.ly/svelteid-facebook
3. How to Get Started with Next.js - Nuxt.js - Sapper? Vue.js ID x React ID x Svelte ID
4. Penyangkalan (Disclaimer) Acara kali ini bukan bermaksud membanding-bandingkan masing-masing kerangka kerja satu sama lain, tetapi lebih ke arah pengenalan singkat uniknya fitur masing-masing kerangka kerja.
5. bit.ly/vuejsid-slido-3 Pertanyaan
6. Mengapa <kerangka-kerja> ini Ada? Permasalahan Apa yang Ingin Diselesaikan?
7. Mengapa Next ini Ada? Permasalahan Apa yang Ingin Diselesaikan?
8. - Dibuat oleh Vercel (sebelumnya ZEIT), founded by Guillermo Rauch (Socket.io, Slackin, MooTools etc) - JAMStack? - Dimulai dari kerangka kerja React untuk SSR - Berevolusi mendapatkan kemampuan static optimization ketika tidak butuh data fetching di halaman-halaman tertentu (exported as html instead) - Berevolusi lagi mendapatkan kemampuan SSG (server side generation), merender halaman-halaman sesuai konfigurasi pada build time. - Pages, halaman (komponen React di direktori khusus), sebagai first class citizen
11. Mengapa Nuxt ini Ada? Permasalahan Apa yang Ingin Diselesaikan?
12. • Mempermudah struktur sebuah Vue App • SSR / SSG • Routing • Struktur Direktori • SEO
14. Mengapa Sapper ini Ada? Permasalahan Apa yang Ingin Diselesaikan?
16. Apa itu Generator Situs Statis (Static Site Generator)? Bagaimana Generator Situs Statis Dilakukan pada <kerangka-kerja>?
17. Apa itu Generator Situs Statis (Static Site Generator)? Bagaimana Generator Situs Statis Dilakukan pada Nuxt?
19. https://content.nuxtjs.org/
20. Apa itu Generator Situs Statis (Static Site Generator)? Bagaimana Generator Situs Statis Dilakukan pada Sapper?
22. Apa itu Generator Situs Statis (Static Site Generator)? Bagaimana Generator Situs Statis Dilakukan pada Next?
23. • No config by default • HTML statis untuk setiap halaman di `pages` directory • Juga untuk route dinamis, akan memanggil `getStaticPaths` dan generate halaman dari hasilnya. • Untuk keadaan lebih kompleks bisa memberikan pengaturan `exportPathMap` di `next.config.js` • Hasil ada di direktori `out`
24. Apa itu Perenderan Sisi Peladen (Server Side Rendering)? Bagaimana Perenderan Sisi Peladen Dilakukan pada <kerangka-kerja>?
25. Apa itu Perenderan Sisi Peladen (Server Side Rendering)? Bagaimana Perenderan Sisi Peladen Dilakukan pada Sapper?
27. Apa itu Perenderan Sisi Peladen (Server Side Rendering)? Bagaimana Perenderan Sisi Peladen Dilakukan pada Next?
28. - Awal mula Next.js “The React Framework for SSR” - Dipakai untuk website-website yang sangat dinamis (User generated content, e-commerce, dll)
29. Apa itu Perenderan Sisi Peladen (Server Side Rendering)? Bagaimana Perenderan Sisi Peladen Dilakukan pada Nuxt ?
30. 1. Browser ke Server 2. Server ke Browser 3. Browser ke Browser
31. Bagaimana Cara Memulai Proyek dengan <kerangka-kerja>?
32. Bagaimana Cara Memulai Proyek dengan Next ?
33. • `npm init next-app` • `yarn create next-app` • Berdasarkan library “create-next-app” • Bisa pilih example/kode boilerplate untuk memulai lebih cepat
34. • `npm init next-app` • `yarn create next-app` • Berdasarkan library “create-next-app” • Bisa pilih example/kode boilerplate untuk memulai lebih cepat
35. • `npm init next-app` • `yarn create next-app` • Berdasarkan library “create-next-app” • Bisa pilih example/kode boilerplate untuk memulai lebih cepat
36. • `npm init next-app` • `yarn create next-app` • Berdasarkan library “create-next-app” • Bisa pilih example/kode boilerplate untuk memulai lebih cepat
37. • `npm init next-app` • `yarn create next-app` • Berdasarkan library “create-next-app” • Bisa pilih example/kode boilerplate untuk memulai lebih cepat
38. • `npm init next-app` • `yarn create next-app` • Berdasarkan library “create-next-app” • Bisa pilih example/kode boilerplate untuk memulai lebih cepat Masih banyak lagi, capek screenshot LOL
39. - My personal favorite - Bc I started it <3
41. Bagaimana Cara Memulai Proyek dengan Nuxt ?
43. Bagaimana Cara Memulai Proyek dengan Sapper ?
45. Bagaimana Struktur Direktori pada <kerangka-kerja>?
46. Bagaimana Struktur Direktori pada Nuxt?
48. Bagaimana Struktur Direktori pada Next?
49. Direktori khusus • `pages` atau `src/pages`: untuk top level react components (Pages), setiap komponen React yang ada di sini akan punya 1 halaman masing masing (ga butuh konfigurasi routing khusus) • `public`: untuk file statik. Contoh: `public/favicon.ico` bakal bisa diakses di `${URL}/favicon.ico` • `pages/api` atau `src/pages/api`: serverless functions! Langsung jadi API endpoints.
50. Bagaimana Struktur Direktori pada Sapper?
52. Bagaimana Cara Melakukan Konfigurasi Route pada <kerangka-kerja>?
53. Bagaimana Cara Melakukan Konfigurasi Route pada Next ?
55. KIDDING
59. Bagaimana Cara Melakukan Konfigurasi Route pada Sapper ?
63. Bagaimana Cara Melakukan Konfigurasi Route pada Nuxt ?
65. Bagaimana Cara Mengambil Data dengan Perenderan Sisi Peladen pada <kerangka-kerja>?
66. Bagaimana Cara Mengambil Data dengan Perenderan Sisi Peladen pada Sapper?
68. Bagaimana Cara Mengambil Data dengan Perenderan Sisi Peladen pada Nuxt ?
70. Bagaimana Cara Mengambil Data dengan Perenderan Sisi Peladen pada Next?
72. Bagaimana Cara Menghubungkan <kerangka-kerja> dengan Middleware?
73. Bagaimana Cara Menghubungkan Nuxt dengan Middleware?
75. Bagaimana Cara Menghubungkan Next dengan Middleware?
76. n/a
77. Custom Server
78. Custom Middleware for API routes
79. Handling sessions (external libraries)
80. Bagaimana Cara Menghubungkan Sapper dengan Middleware?
83. Bagaimana Cara Mengintegrasikan Plugin Pihak Ke-3 pada <kerangka-kerja>?
84. Bagaimana Cara Mengintegrasikan Plugin Pihak Ke-3 pada Next ?
85. • It’s just React! • Import whatever library you like from npm, use it in the Page • Use it in the Components • Custom CSS? Slap dat `style` tag • Custom Font? Put it in`public` directory, slap some @font-face declaration • Custom JS? Analytics? Customize the base _document.js component GO WILD
86. • It’s just React! • Import whatever library you like from npm, use it in the Page • Use it in the Components • Custom CSS? Slap dat `style` tag • Custom Font? Put it in`public` directory, slap some @font-face declaration • Custom JS? Analytics? Customize the base _document.js component GO WILD - see examples for more
87. Bagaimana Cara Mengintegrasikan Plugin Pihak Ke-3 pada Sapper ?
88. • Sama seperti Svelte pada umumnya • import pustaka apapun yang kamu suka dari npm • Kustom CSS? Gunakan tag link pada svelte:head • Kustom Font? Masukan pada folder static dan deklarasikan dengan @font-face • Menambahkan analitik? Masukan di pada template.html
89. • Sama seperti Svelte pada umumnya • import pustaka apapun yang kamu suka dari npm • Kustom CSS? Gunakan tag link pada svelte:head • Kustom Font? Masukan pada folder static dan deklarasikan dengan @font-face • Menambahkan analitik? Masukan di pada template.html ReferenceError: window is not defined
91. Bagaimana Cara Mengintegrasikan Plugin Pihak Ke-3 pada Nuxt ?
93. Bagaimana Cara Membuat Tautan antar Halaman pada <kerangka-kerja>?
94. Bagaimana Cara Membuat Tautan antar Halaman pada Sapper?
95. Atau menggunakan goto
96. Bagaimana Cara Membuat Tautan antar Halaman pada Nuxt ?
98. Bagaimana Cara Membuat Tautan antar Halaman pada Next?
99. • Fully client side transitions • Works with dynamic routes • Pairs well with page transitions
100. Bagaimana Cara Meng-konfigurasi Bagian Head pada <kerangka-kerja>?
101. Bagaimana Cara Meng-konfigurasi Bagian Head pada Nuxt ?
104. Bagaimana Cara Meng-konfigurasi Bagian Head pada Next?
107. Bagaimana Cara Meng-konfigurasi Bagian Head pada Sapper?
109. Bagaimana Cara Mengonfigurasi Halaman Kesalahan pada <kerangka-kerja>?
110. Bagaimana Cara Mengonfigurasi Halaman Kesalahan pada Next ?
111. It’s just another `Page`
112. It’s just another `Page`
113. Bagaimana Cara Mengonfigurasi Halaman Kesalahan pada Sapper ?
115. Bagaimana Cara Mengonfigurasi Halaman Kesalahan pada Nuxt ?
117. Bagaimana Cara Menggunakan Preprocessor CSS pada <kerangka-kerja>?
118. Bagaimana Cara Menggunakan Preprocessor CSS pada Sapper?
119. Svelte Preprocess
121. Bagaimana Cara Menggunakan Preprocessor CSS pada Nuxt ?
124. Bagaimana Cara Menggunakan Preprocessor CSS pada Next?
125. • Ada beberapa built in styling methods di Next • `styled-jsx` (gak kita bahas) • *global stylesheet* • CSS modules (scoped)
126. Global Stylesheet
127. CSS Modules
128. SASS preprocessor
129. Bagaimana Cara Meluncurkan (Deploy) Aplikasi Web yang Dibangun Dengan <kerangka-kerja>?
130. Bagaimana Cara Meluncurkan (Deploy) Aplikasi Web yang Dibangun Dengan Nuxt ?
131. https://nuxtjs.org/faq
132. Bagaimana Cara Meluncurkan (Deploy) Aplikasi Web yang Dibangun Dengan Next?
133. Karena dibuat oleh Vercel, hanya bisa dideploy di Vercel
134. Karena dibuat oleh Vercel, hanya bisa dideploy di Vercel LOL NO
135. Although it’s the easiest way to do it Takes less than a minute! You will get your own (sub)domain, https, autoscaling, all provisioned for you. Go check them out!
136. Custom SSR deployment It’s just a node app
137. Custom Static deployment AND PUT IT ANYWHERE cloudflare Electron A Raspberry Pi Watch out for the caveats
138. Bagaimana Cara Meluncurkan (Deploy) Aplikasi Web yang Dibangun Dengan Sapper?
139. sapper.svelte.dev/docs#Deployment
140. bit.ly/vuejsid-slido-3 Pertanyaan
141. bit.ly/vuejsid-telegram bit.ly/vuejsid-facebook bit.ly/vuejsid-twitter s.reactjs.id/telegram s.reactjs.id/facebook s.reactjs.id/twitter bit.ly/svelteid-telegram bit.ly/svelteid-facebook
142. bit.ly/vuejsid-umpan-balik-3 Umpan Balik (Feedback)
143. Eits, jangan pergi dulu!
145. • Jumlah frontend developer di Indonesia yang semakin banyak • Komunitas yang tersegregasi dengan sekat grup-grup Telegram • Telegram kurang scalable untuk menampung puluhan ribu anggota dengan tetap mempertahankan konteks/alur diskusi • Fitur-fitur di Discord cukup lengkap untuk mengelola komunitas berskala besar, termasuk di antaranya adalah Reactiflux, the world's largest React.js chat server. Mengapa?
146. Ini bukan sebatas gagasan segelintir orang, tapi agregasi atas berbagai upaya serupa yang masih tercerai-berai: • Fatih Kalifa sempat menginisiasi meetup Frontend ID di tahun 2015 • Resi Respati sudah menyiapkan Discord Server dengan berbagai fitur moderasinya sejak tiga bulan yang lalu • Jefry Dewangga menginisiasi meetup antar-framework ini • dan beberapa penggerak komunitas lainnya yang juga merasakan pentingnya sarana pemersatu frontend developer se-Indonesia Siapa saja yang terlibat?
147. Semua teknologi yang terkait dengan frontend development Apa saja isinya?
148. • Framework lain: Ember, dll. • Bahasa lain: TypeScript, ReScript, dll. • Backend Bagaimana dengan [X?
149. Mari bergabung bersama kami di Langkah selanjutnya s.reactjs.id/discord