Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf

 Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf

Webinar Build Mobile Friendly Web Apps With React.js

73eeac32b9932a63ed361f1ff5c5e92a?s=128

Randy Vianda Putra

November 19, 2020
Tweet

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 ?

  10. None
  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 ?

  16. None
  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 ?

  38. None
  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?