Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf

Webinar Build Mobile Friendly Web Apps With React.js

Transcript

1. Build Mobile-Friendly Web Apps With React.js
2. Randy Vianda Putra, live in Bandung -Lead Frontend Engineer @WorkLifeBeyond -Researcher @evilfactorylabs Hello modulloe@gmail.com github.com/randyviandaputra @randyvp
3. Let’s Start
4. Agenda - Apa itu Website Mobile-friendly - Seperti apa Website Mobile-friendly ? - Statistik - Apa itu responsive web design ? - Masalahnya & Solusinya - Tipe Layout - Breakpoint - Cara testnya - React Fundamental
5. Apa itu Website Mobile-Friendly ?
6. Apa itu Web Mobile-Friendly ? Website mobile-friendly adalah website yang dirancang untuk bisa ditampilkan dengan baik pada perangkat atau layar yang lebih kecil, seperti pada smartphone Android atau iPhone dan tablet berukuran sedang
7. Seperti apa Website Mobile-Friendly ?
8. Seperti apa Web Mobile-Friendly ? Website yang mobile-friendly juga berarti informasi yang ditampilkan mulai dari gambar, teks, video dan link, dapat diakses dengan mudah pada setiap platform yang berbeda, terutama pada layar yang lebih kecil. Ketika merancang website untuk penggunaan di layar yang lebih kecil, Anda harus mengenali tiga perbedaan dasar antara perangkat ponsel dan desktop : • Ruang yang terbatas • Perhatian atau fokus pengguna • Pengguna perangkat ponsel biasanya sudah memiliki tujuan yang pasti, mereka akan langsung mencari kata kunci dari informasi yang mereka inginkan
9. Statistik ?
11. “ Bagaimana Jika website tidak Mobile-Friendly?
12. “ “Responsive Web Design”
13. Apa itu Responsive Web Design ?
14. Apa itu Responsive Web Design ? Sebuah pendekatan desain yang dimana tata letak dan kontennya menyesuaikan dengan user environment, termasuk ukuran layar dan platform. Pada dasarnya berarti membuat kode yang baik untuk membuat suatu website yang berfungsi di berbagai device
15. Masalahnya ?
17. Solusinya ?
18. ➢ Responsive Layout
19. ➢ Respond to environments ➢ Berbeda device, tapi konten sama ➢ Single deliverable, many destinations Karena
20. “ “Responsive is not Mobile.”
21. Tipe Layout ?
22. ➢ Adaptive - Fixed width layout ➢ Responsive - Fluid width layout ➢ Mixed - Fixed/Fluid width layout (fixed untuk ukuran besar atau medium, fluid untuk ukuran kecil) Tipe Layout
23. • Fixed width • Width changes depending on screen resolution • Breakpoints • Less flexibility Adaptive Layout
24. • Fluid width • More flexibility • No breakpoints Responsive Layout
25. • Fluid / Fixed width • Any resolution • More adaptation • Breakpoints for important devices Mixed Layout
26. Breakpoints ?
27. • Bagi developer breakpoints adalah sebuah media query • Bagi designer breakpoints adalah titik dimana setiap perubahan konten yang di lihat oleh user Breakpoints
28. Cara Testnya ?
29. ➢ Resolusi yang berbeda ➢ Device yang berbeda ➢ User Experience ➢ Google Mobile-Friendly Test Cara Testnya
30. React Fundamental ?
31. React Hooks ?
32. Apa itu React Hooks React Hooks diperkenalkan oleh React Team untuk melakukan state management dan side effects di dalam function component. Dengan Hooks kita bisa menggunakan state dan lifecycle methods tanpa harus menulis class di React.
33. Kenapa harus React Hooks ?
34. Kenapa harus React Hooks
35. Bermain State di React Hooks ?
36. Bermain State di React Hooks
37. Bermain Side Effect di React Hooks ?
39. “ “Semakin banyak pengguna yang mengakses website kita melalui perangkat ponsel, maka kita harus memastikan semua pengguna mendapatkan pengalaman dan penilaian yang positif terlepas dari perangkat apa yang mereka gunakan.”
40. Links - https:/ /www.progresstech.co.id/blog/website-mobile-frien dly/ - https:/ /medium.com/coderupa/react-hook-huk-huk-eehh mmm-ed17d90eae03 - https:/ /id.reactjs.org/docs/hooks-overview.html
41. Repo - https:/ /github.com/randyviandaputra/mobile-friendly
42. 42 Thanks Any questions?