Build Mobile-Friendly Web Apps With React.js

Randy Vianda Putra, live in Bandung -Lead Frontend Engineer @WorkLifeBeyond -Researcher @evilfactorylabs Hello modulloe@gmail.com github.com/randyviandaputra @randyvp

Let’s Start

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

Apa itu Website Mobile-Friendly ?

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

Seperti apa Website Mobile-Friendly ?

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

Statistik ?

No content

“ Bagaimana Jika website tidak Mobile-Friendly?

“ “Responsive Web Design”

Apa itu Responsive Web Design ?

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

Masalahnya ?

No content

Solusinya ?

➢ Responsive Layout

➢ Respond to environments ➢ Berbeda device, tapi konten sama ➢ Single deliverable, many destinations Karena

“ “Responsive is not Mobile.”

Tipe Layout ?

➢ 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

● Fixed width ● Width changes depending on screen resolution ● Breakpoints ● Less flexibility Adaptive Layout

● Fluid width ● More flexibility ● No breakpoints Responsive Layout

● Fluid / Fixed width ● Any resolution ● More adaptation ● Breakpoints for important devices Mixed Layout

Breakpoints ?

● Bagi developer breakpoints adalah sebuah media query ● Bagi designer breakpoints adalah titik dimana setiap perubahan konten yang di lihat oleh user Breakpoints

Cara Testnya ?

➢ Resolusi yang berbeda ➢ Device yang berbeda ➢ User Experience ➢ Google Mobile-Friendly Test Cara Testnya

React Fundamental ?

React Hooks ?

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.

Kenapa harus React Hooks ?

Kenapa harus React Hooks

Bermain State di React Hooks ?

Bermain State di React Hooks

Bermain Side Effect di React Hooks ?

No content

“ “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.”

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

Repo - https:/ /github.com/randyviandaputra/mobile-friendly

42 Thanks Any questions?