Dasar-dasar pengembangan web seluler

Di Chrome Dev Summit 2014, ada banyak sekali topik dan versi baru API yang telah dibahas, tetapi tidak semuanya tentang yang baru dan canggih.

Jika Anda adalah Developer Web baru atau bahkan developer berpengalaman yang akan mulai mempelajari API baru, kemungkinan Anda harus mengikuti tiga langkah berikut: mempelajari, mem-build, dan melakukan iterasi.

Matt Gaunt membahas upaya berkelanjutan untuk mengatasi masalah ini dari tim Platform Developer Chrome.

Mempelajari

WebFundamentals pada HTML5Rocks

Dasar-Dasar Web adalah sekumpulan dokumentasi yang dipandu kasus penggunaan yang mencakup berbagai topik. Sasaran utamanya adalah membuat developer memiliki sedikit pengetahuan atau tidak tahu sama sekali, hingga menerapkan praktik terbaik secepat mungkin.

Salah satu tujuan utama Dasar-Dasar Web adalah memastikan bahwa jika Anda baru mengenal suatu topik, panduan ini akan mengurangi "kelumpuhan pilihan" sebanyak mungkin. Addy Osmani membahasnya dengan sempurna di Pastry Box.

Jika Anda menemukan masalah pada situs atau kontennya atau ingin Dasar-Dasar Web membahas topik tertentu, beri tahu kami dengan mengirimkan masukan di GitHub.

Build

Web Starter Kit di Berbagai Perangkat

Untuk membantu Anda memulai project web baru, kami membuat Web Starter Kit. Fitur ini memiliki semua yang Anda butuhkan:

  • Proses build yang solid
  • HTML boilerplate
  • Panduan gaya

Proses Build

Bagi Anda yang baru mengenal proses build, cara termudah untuk membayangkan proses build adalah melihatnya sebagai program yang mengambil sekumpulan file dan melakukan tugas-tugas tertentu pada file tersebut dan menghasilkan output versi baru di lokasi berbeda. Tugas tersebut mengoptimalkan file untuk mempercepat waktu pemuatan, memeriksa kemungkinan error, atau menangani tugas yang dapat diotomatiskan.

Di Web Starter Kit, kita memiliki proses berikut:

Diagram Proses Build Web Starter Kit

Kami meminifikasi dan menyambungkan CSS dan JavaScript agar browser dapat mengambil file dengan cepat, JavaScript juga dijalankan melalui JSHint untuk memeriksa praktik terbaik JavaScript dan kesalahan umum coding. Gambar diminifikasi dengan imagemin dan Anda bisa mendapatkan pengurangan ukuran file yang besar menggunakan ini. Kami juga memiliki proses untuk membuat CSS styleguides.

Boilerplate untuk HTML Multi-Perangkat

Kumpulan HTML pertama yang Anda tulis untuk laman baru cukup standar dan kemungkinan Anda akan memiliki beberapa cara untuk dengan cepat menyimpan file HTML bawaan yang berfungsi dengan baik di berbagai perangkat dan ukuran layar.

Di Web Starter Kit, kami ingin menambahkan dukungan untuk fitur apa pun yang memburamkan garis antara platform dan situs Anda. Oleh karena itu, kami telah menambahkan dukungan untuk tambahkan ke layar utama dan layar pembuka untuk Android, Windows Phone, iOS, dan Opera Coast.

Contoh Web Starter Kit Add to home screen.

Panduan gaya

Panduan gaya starter kit web di Chromebook Pixel.

Bagian terakhir Web Starter Kit adalah Styleguide.

Hal ini memberi project baru serangkaian gaya dan komponen default yang mendorong pengembangan berbasis gaya. Anda dapat mengubah gaya yang ada ke elemen dan menambahkan gaya Anda sendiri.

Pada WSK versi berikutnya, yang akan dirilis awal tahun depan, kami berusaha keras untuk menyederhanakan keterkaitan gaya panduan gaya dan beralih ke tampilan dan nuansa desain material. Mattmenunjukkantiruan awal tentang seperti apa tampilannya di Chrome Dev Summit dan Anda dapat melihat contohnya di bawah.

Mockup panduan gaya desain material starter kit web.

Terus lakukan peningkatan

Setelah mulai mempraktikkan pengetahuan baru, Anda dapat menggunakan DevTools untuk men-debug, meningkatkan, dan mempertahankan pekerjaan Anda.

Ada beberapa fitur baru besar yang ada di DevTools dan Matt melihat fitur-fitur baru berikut ini.

Mode Perangkat

Mode perangkat adalah bagian baru di DevTools yang memungkinkan Anda dengan cepat melihat cara kerja situs di berbagai perangkat seluler, saat melihat kueri media di CSS Anda.

Screenshot fitur Mode Perangkat di Chrome DevTools.

Salah satu fitur hebat Mode Perangkat adalah kemampuannya untuk membatasi kecepatan jaringan, yang memungkinkan Anda menyimulasikan pengalaman pengguna pada koneksi GPRS, EDGE, 3G, DSL, atau Wifi.

Screenshot throttling jaringan di Chrome DevTools.

Profiler Paint

Jika pernah membuka tab linimasa dan menekan tombol rekam, Anda mungkin telah melihat beberapa peristiwa paint terjadi di waterfall. Biasanya ini berupa kotak hitam tanpa cara bagi Anda untuk mengetahui mengapa browser melakukannya, atau apa yang dilakukannya.

Paint profiler tidak memberikan informasi selengkapnya tentang apa yang sebenarnya dilakukan browser selama paint tersebut.

Screenshot Paint Profiler di Chrome DevTools.

Pelacakan Pembatalan

DevTools kini memberikan alasan mengapa paint atau tata letak terjadi kapan pun diperlukan. Hal ini berguna bagi siapa saja yang mempelajari linimasa, perilaku browser, dan memungkinkan Anda mengoptimalkan kode untuk mencegah masalah performa.

Screenshot Pelacakan Invalidasi di Chrome Devtools.

Tampilan Flame Chart

Ini adalah cara yang sangat berbeda dalam melihat informasi yang tersedia di linimasa. Hal ini mempermudah untuk melihat tumpang tindih tugas dan perilaku browser yang terjadi akibat tugas lainnya.

Screenshot Tampilan Flame Chart di Chrome DevTools.

Penampil Frame

Saat berada di tampilan Flame Chart, Anda dapat memilih frame tertentu dan di dalamnya, Anda dapat menjelajahi elemen mana pada halaman yang telah dipromosikan ke lapisan komposit serta alasan mengapa elemen tersebut dipromosikan.

Screenshot Frame Viewer di Chrome DevTools

Belajar. Buat. Terus lakukan peningkatan

Ini adalah beberapa upaya dari tim Chrome untuk membantu developer mempercepat pengembangan web, jadi pastikan untuk memeriksa Dasar-Dasar Web, Web Starter Kit, dan fitur baru di Chrome DevTools.