Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Pertimbangan Penting Saat Membangun Single Page Web Apps

by
Read Time:16 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Puuma (you can also view the original English article)

Single page web applications - atau SPA, sebagaimana biasa disebut - dengan cepat menjadi standar de facto untuk pengembangan aplikasi web. Fakta bahwa sebagian besar aplikasi berjalan di dalam satu halaman web membuatnya sangat menarik dan atraktif, dan pertumbuhan percepatan kemampuan browser mendorong kita lebih dekat ke hari, ketika semua aplikasi berjalan sepenuhnya di browser.

Secara teknis, sebagian besar halaman web sudah merupakan SPA; itu kompleksitas halaman yang membedakan halaman web dari aplikasi web. Menurut pendapat saya, halaman menjadi aplikasi ketika Anda menggabungkan alur kerja, operasi CRUD, dan manajemen state di sekitar tugas-tugas tertentu. Anda bekerja dengan SPA ketika masing-masing tugas ini berlangsung di halaman yang sama (menggunakan AJAX untuk komunikasi klien/server, tentu saja).

Mari mulai dengan pemahaman umum ini, dan selami beberapa hal yang lebih penting yang harus dipertimbangkan ketika membangun SPA.


Ada banyak hal yang perlu dipertimbangkan sebelum membuat aplikasi baru; untuk membuat keadaan menjadi lebih buruk, lansekap pengembangan web luas dapat mengintimidasi di awal. Saya telah berada di dalam sepatu yang meresahkan itu, tetapi untungnya, beberapa tahun terakhir telah membawa konsensus pada alat dan teknik yang membuat pengalaman pengembangan aplikasi menjadi menyenangkan dan produktif mungkin.

Sebagian besar aplikasi terdiri dari potongan klien dan sisi server; meskipun artikel ini lebih banyak berfokus pada bagian sisi klien dari suatu aplikasi, saya akan memberikan beberapa petunjuk sisi server menjelang akhir artikel ini.

Ada campuran teknologi yang beragam di sisi klien, serta beberapa pustaka dan praktik yang memungkinkan pengalaman pengembangan aplikasi yang produktif. Ini dapat diringkas, menggunakan kata cloud berikut.

Important Considerations - checklistImportant Considerations - checklistImportant Considerations - checklist

Saya akan memperluas setiap poin di atas di bagian berikut.


Memilih Kerangka Aplikasi

Ada banyak kerangka kerja untuk dipilih. Ini hanya segelintir yang paling populer:

Memilih kerangka kerja dengan mudah adalah salah satu pilihan paling penting yang akan Anda buat untuk aplikasi Anda. Tentu saja, Anda akan ingin memilih kerangka kerja terbaik untuk tim dan aplikasi Anda. Setiap kerangka di atas menggabungkan pola desain MVC (dalam beberapa bentuk atau lainnya). Dengan demikian, cukup umum untuk merujuk mereka sebagai kerangka kerja MVC. Jika kita harus memesan kerangka kerja ini pada skala kerumitan, kurva belajar dan set fitur, dari kiri ke kanan, mungkin terlihat seperti:

App FrameworksApp FrameworksApp Frameworks

Meskipun tidak sama dalam implementasinya dan tingkat kecanggihannya, semua kerangka yang disebutkan di atas memberikan beberapa abstraksi umum, seperti:

Hanya dengan melihat lima tahun terakhir, telah terjadi pertumbuhan eksplosif di perpustakaan, alat dan praktik.

  • Model: mencakup di sekitar struktur data JSON dengan dukungan untuk pengambil properti/setter dan pemberitahuan perubahan properti.
  • Collection: koleksi model. Memberikan pemberitahuan ketika model ditambahkan, dihapus, atau diubah dalam koleksi.
  • Events: pola standar untuk berlangganan dan mempublikasikan pemberitahuan.
  • View: Objek backing untuk fragmen DOM dengan dukungan untuk mendengarkan acara DOM relatif terhadap fragmen DOM. View memiliki akses ke instance Model terkait. Dalam beberapa kerangka kerja, ada juga Controller yang mengatur perubahan antara View dan Model.
  • Routing: Navigasi dalam aplikasi melalui URL. Mengandalkan API riwayat browser.
  • Syncing: Bertahannya perubahan model melalui panggilan Ajax.

Kerangka kerja yang lebih canggih, seperti CanJS, BatmanJS, EmberJS, dan AngularJS, memperluas fitur-fitur dasar ini dengan menyediakan dukungan untuk templat pengikatan data otomatis dan sisi klien. Template ini terikat pada data dan menjaga tampilan sinkron dengan perubahan apa pun pada model. Jika Anda memutuskan untuk memilih kerangka kerja lanjutan, Anda pasti akan mendapatkan banyak fitur out-of-the-box, tetapi juga mengharapkan Anda untuk membangun aplikasi Anda dengan cara tertentu.

Dari semua kerangka yang terdaftar sebelumnya, Meteor adalah satu-satunya kerangka penuh-tumpukan. Ini menyediakan alat tidak hanya untuk pengembangan sisi klien, tetapi juga menyediakan Anda dengan bagian sisi server, melalui NodeJS, dan sinkronisasi model end-to-end, melalui MongoDB. Ini berarti bahwa, ketika Anda menyimpan model pada klien, itu secara otomatis berlanjut di MongoDB. Ini adalah opsi yang fantastis, jika Anda menjalankan backend Node dan menggunakan MongoDB untuk ketekunan.

Berdasarkan kerumitan aplikasi Anda, Anda harus memilih kerangka yang membuat Anda paling produktif. Pasti akan ada kurva belajar, tetapi itu adalah satu kali tol yang Anda bayarkan untuk pengembangan jalur ekspres. Pastikan untuk mengukir waktu untuk mengevaluasi kerangka kerja ini, berdasarkan pada use case representatif.

Catatan: Jika Anda ingin mempelajari lebih lanjut tentang kerangka kerja ini dari penciptanya, dengarkan video-video ini dari ThroneJS.


Template Sisi Klien

Sistem template berbasis JavaScript yang paling populer adalah Underscore templates and Handlebars.

Beberapa kerangka kerja lanjutan dari bagian sebelumnya menawarkan sistem templat bawaan.

Misalnya, EmberJS memiliki dukungan bawaan untuk Handlebars. Namun, Anda harus mempertimbangkan mesin templating jika Anda memutuskan untuk menggunakan kerangka lean, seperti Backbone. Underscore adalah titik awal yang sangat baik, jika Anda memiliki persyaratan pembuatan template yang terbatas. Jika tidak, Handlebar berfungsi dengan baik untuk proyek yang lebih maju. Ia juga menawarkan banyak fitur built-in untuk templat yang lebih ekspresif.

Jika Anda menemukan bahwa Anda memerlukan banyak template sisi-klien, Anda dapat menghemat waktu komputasi dengan melakukan pra-kompilasi template di server. Pra-kompilasi memberi Anda fungsi JavaScript polos yang Anda gunakan untuk meningkatkan waktu buka halaman. Handlebars mendukung pra-kompilasi, menjadikannya layak waktu dan usaha untuk sepenuhnya mengeksplorasi.

Pengguna ExpressJS bahkan dapat menggunakan mesin templat yang sama pada klien seperti pada server, memberi Anda manfaat berbagi template antara klien dan server.


Pengembangan Modular

Menggunakan preprocessor membutuhkan langkah tambahan dalam proses pembuatan Anda.

Kode JavaScript secara tradisional ditambahkan ke halaman, melalui elemen <script />. Anda biasanya mendaftar pustaka dan dependensi lainnya terlebih dahulu, lalu daftarkan kode yang merujuk dependensi tersebut. Gaya ini berfungsi dengan baik, ketika Anda hanya perlu menyertakan beberapa file; Namun, ini akan dengan cepat menjadi mimpi buruk untuk dipertahankan, karena Anda menyertakan skrip tambahan.

Satu solusi untuk masalah ini adalah memperlakukan setiap file skrip sebagai Modul, dan mengidentifikasinya dengan nama atau path file relatif. Menggunakan semantik ini, dan dengan dukungan pustaka, seperti RequireJS dan Browserify, Anda dapat membangun aplikasi Anda menggunakan sistem berbasis modul.

Modul ini menjadi cara untuk mengidentifikasi fungsionalitas dalam aplikasi. Anda dapat mengatur modul-modul ini, menggunakan struktur folder tertentu yang mengelompokkannya berdasarkan fitur atau fungsi tertentu. Modul membantu dalam mengelola skrip aplikasi Anda, dan juga menghilangkan dependensi global yang harus disertakan dengan elemen <script /> sebelum skrip aplikasi. Untuk pustaka yang tidak kompatibel dengan AMD, RequireJS menawarkan fitur shim yang mengekspos skrip non-AMD sebagai modul.

Saat ini ada dua jenis sistem berbasis modul: AMD (Asynchronous Module Definition) dan CommonJS.

Di AMD, setiap modul berisi pernyataan level-atas define() tunggal yang mencantumkan semua dependensi yang diperlukan, dan fungsi ekspor yang mengekspos fungsionalitas modul. Inilah contohnya:

Nama modul CommonJS didasarkan pada path file relatif atau proses pencarian modul internal. Tidak ada fungsi define() dalam modul apa pun, dan dependensi secara eksplisit dinyatakan dengan panggilan untuk require(). Sebuah modul memperlihatkan fungsionalitasnya, melalui objek module.exports, yang dibuat setiap modul secara otomatis. Berikut contoh CommonJS:

Gaya modul CommonJS lebih umum dalam aplikasi NodeJS, di mana masuk akal untuk melewati panggilan untuk panggilan define() - Anda bekerja dengan pencarian modul berbasis sistem file. Yang menarik, Anda dapat melakukan hal yang sama di browser, menggunakan Browserify.


Manajemen Paket

Kinerja harus ada di pikiran Anda saat Anda membuat dan menambahkan fitur ke aplikasi Anda.

Sebagian besar aplikasi memiliki setidaknya satu ketergantungan, baik itu perpustakaan atau beberapa bagian kode pihak ketiga. Anda akan menemukan bahwa Anda memerlukan beberapa cara untuk mengelola dependensi tersebut seiring dengan meningkatnya jumlah mereka, dan Anda perlu mengisolasi diri Anda dari setiap perubahan yang dilakukan oleh versi baru dari dependensi tersebut.

Manajemen paket mengidentifikasi semua dependensi di aplikasi Anda dengan nama dan versi tertentu. Ini memberi Anda kendali lebih besar atas dependensi Anda, dan memastikan bahwa semua orang di tim Anda menggunakan versi perpustakaan yang identik. Paket-paket yang dibutuhkan aplikasi Anda biasanya tercantum dalam satu file yang berisi versi dan nama perpustakaan. Beberapa manajer paket umum untuk tumpukan teknologi yang berbeda adalah:

  • Linux: Aptitude
  • .NET: Nuget
  • PERL: CPAN
  • Ruby: Gems
  • PHP: Composer
  • Node: NPM
  • Java: Maven and Gradle

Meskipun manajemen paket lebih dari kemampuan sisi server, itu mendapatkan popularitas di lingkaran pengembangan sisi klien. Twitter memperkenalkan Bower, pengelola paket browser yang mirip dengan NPM untuk Node. Bower mendaftar dependensi sisi klien di component.json, dan mereka diunduh dengan menjalankan alat CLI bower. Misalnya, untuk menginstal jQuery, dari Terminal, Anda akan menjalankan:

Kemampuan untuk mengendalikan dependensi proyek membuat pengembangan lebih dapat diprediksi, dan memberikan daftar yang jelas dari pustaka yang diperlukan oleh aplikasi. Jika Anda mempertimbangkan mengkonsolidasikan perpustakaan Anda di masa depan, melakukannya akan lebih mudah dengan file daftar paket Anda.


Pengujian Unit dan Integrasi

Tak usah dikatakan bahwa pengujian unit adalah bagian penting dari pengembangan aplikasi. Ini memastikan bahwa fitur terus berfungsi saat Anda mem-refactor code, memperkenalkan pustaka, dan membuat perubahan besar pada aplikasi Anda. Tanpa tes unit, akan sulit untuk mengetahui kapan sesuatu gagal, karena perubahan kode kecil. Ditambah dengan pengujian integrasi ujung ke ujung, itu bisa menjadi alat yang ampuh, ketika membuat perubahan arsitektur.

Di sisi klien, Jasmine, Mocha, dan Qunit adalah kerangka pengujian yang paling populer. Jasmine dan Mocha mendukung gaya Behavior-Driven Development (BDD), di mana tes dibaca seperti pernyataan bahasa Inggris. QUnit, di sisi lain, adalah kerangka pengujian unit yang lebih tradisional, menawarkan API gaya penegasan.

Jasmine, Mocha, atau Qunit menjalankan tes pada satu browser.

Jika Anda ingin mengumpulkan hasil tes dari beberapa browser, Anda dapat mencoba alat seperti Testacular yang menjalankan pengujian Anda di beberapa browser.

Untuk menguji keseluruhan sembilan meter, Anda mungkin ingin melakukan tes integrasi di aplikasi Anda, menggunakan Selenium dan Cucumber/Capybara. Cucumber memungkinkan Anda menulis tes (fitur alias) dalam sintaks yang mirip bahasa Inggris, yang disebut Gherkin, yang bahkan dapat dibagikan dengan orang-orang bisnis. Setiap pernyataan tes dalam file Cucumber Anda didukung oleh kode yang dapat dieksekusi yang dapat Anda tulis dalam Ruby, JavaScript, atau bahasa lain yang didukung.

Mengeksekusi file fitur Cucumber menjalankan kode eksekusi Anda, yang pada gilirannya menguji aplikasi dan memastikan bahwa semua fungsi bisnis telah diterapkan dengan benar. Memiliki file fitur yang dapat dieksekusi tidak ternilai untuk proyek besar, tetapi mungkin terlalu banyak untuk proyek-proyek yang lebih kecil. Ini jelas membutuhkan sedikit usaha untuk menulis dan memelihara skrip Cucumber, jadi itu benar-benar bermuara pada keputusan tim.


Pertimbangan UI

Memiliki pengetahuan CSS yang baik akan membantu Anda mencapai desain inovatif dalam HTML.

UI adalah bagian favorit saya dari sebuah aplikasi; ini adalah salah satu hal yang langsung membedakan produk Anda dari kompetisi. Meskipun aplikasi berbeda dalam hal tujuan dan tampilan dan nuansa mereka, ada beberapa tanggung jawab umum yang dimiliki sebagian besar aplikasi. Desain dan arsitektur UI adalah topik yang cukup intensif, tetapi perlu disebutkan beberapa poin desain:

  • Form Handling: gunakan kontrol input yang berbeda (input numerik, email, pemilih tanggal, color picker, autocomplete), validasi pada pengiriman formulir, sorot kesalahan dalam input form, dan menyebarkan kesalahan sisi server pada klien.
  • Formatting: terapkan format khusus ke angka dan nilai lainnya.
  • Error Handling: menyebarkan berbagai jenis kesalahan klien dan server. Buat teks untuk berbagai nuansa dalam kesalahan, pertahankan kamus kesalahan, dan isi placeholder dengan nilai waktu proses.
  • Alerts and Notifications: beri tahu pengguna tentang acara dan aktivitas penting, dan tunjukkan pesan sistem yang berasal dari server.
  • Custom Controls: ambil pola interaksi unik dalam aplikasi sebagai kontrol yang dapat digunakan kembali. Identifikasi input dan output dari kontrol tanpa menghubungkan dengan bagian tertentu dari aplikasi.
  • Grid System: membuat layout menggunakan sistem grid, seperti Compass Susy, 960gs, CSS Grid. Sistem grid juga akan membantu dalam menciptakan tata letak responsif untuk berbagai faktor bentuk.
  • UI Pattern Library: dapatkan kenyamanan dengan pola UI umum. Gunakan Quince untuk referensi.
  • Layered Graphics: pahami seluk-beluk CSS, model kotak, pelampung, pemosisian, dll. Memiliki pengetahuan CSS yang baik akan membantu Anda mencapai desain inovatif dalam HTML.
  • Internationalization: menyesuaikan situs ke berbagai lokal. Deteksi lokal menggunakan header HTTP Accept-Language atau melalui perjalanan bolak-balik untuk mengumpulkan lebih banyak info dari klien.

CSS Preprocessors

CSS adalah bahasa sederhana  yang memiliki konstruksi sederhana. Menariknya, ini juga bisa sangat sulit untuk dikelola, terutama jika ada banyak nilai yang sama yang digunakan di antara berbagai pemilih dan properti. Tidak jarang untuk menggunakan kembali serangkaian warna di seluruh file CSS, tetapi hal itu memperkenalkan pengulangan, dan mengubah nilai-nilai yang berulang itu meningkatkan potensi kesalahan manusia.

CSS preprosesor memecahkan masalah ini dan membantu mengatur, refactor dan berbagi kode umum. Fitur, seperti variabel, fungsi, mixin, dan parsial, membuatnya mudah untuk mempertahankan CSS. Misalnya, Anda dapat menyimpan nilai warna umum dalam suatu variabel, dan kemudian menggunakan variabel itu di mana pun Anda ingin menggunakan nilainya.

Menggunakan preprocessor membutuhkan langkah tambahan dalam proses pembuatan Anda: Anda harus menghasilkan CSS akhir.

Namun, ada alat-alat yang secara otomatis mengompilasi file Anda, dan Anda juga dapat menemukan pustaka yang menyederhanakan pengembangan stylesheet. SASS dan Stylus adalah dua preprocessor populer yang menawarkan librari pembantu yang sesuai. Pustaka ini juga mempermudah pembuatan sistem berbasis jaringan dan membuat tata letak halaman responsif yang menyesuaikan dengan berbagai faktor bentuk (tablet dan ponsel).

Meskipun preprosesor CSS mempermudah pembuatan CSS dengan aturan bersama, Anda tetap memiliki tanggung jawab untuk menyusunnya dengan baik, dan mengisolasi aturan terkait ke dalam file mereka sendiri. Beberapa prinsip dari SMACSS dan OOCSS dapat berfungsi sebagai panduan hebat selama proses ini.

Scalable and Modular Architecture for CSS disertakan, sebagai bagian dari keanggotaan Tuts+ Premium.


Kontrol Versi

Jika Anda tahu pengembang hip, maka Anda mungkin menyadari bahwa Git adalah juara bertahan dari semua sistem kontrol versi (VCS). Saya tidak akan membahas semua rincian mengapa Git lebih unggul, tetapi cukup untuk mengatakan bahwa percabangan dan penggabungan (dua kegiatan yang sangat umum selama pengembangan) sebagian besar bebas dari kerumitan.

Sejajar dengan Git, dalam hal filsafat, adalah Mercurial (hg) - meskipun tidak sepopuler Git. Alternatif terbaik berikutnya adalah Subversion yang sudah lama ada. Pilihan VCS sangat bergantung pada standar perusahaan Anda, dan, sampai batas tertentu, tim Anda. Namun, jika Anda bagian dari gugus tugas kecil, Git dengan mudah adalah opsi yang disukai.


Pertimbangan Browser

Tak usah dikatakan bahwa pengujian unit adalah bagian penting dari pengembangan aplikasi.

Ada berbagai browser yang harus didukung. Perpustakaan, seperti jQuery dan Zepto, sudah abstrak API manipulasi DOM, tetapi ada perbedaan lain dalam JavaScript dan CSS, yang memerlukan upaya ekstra pada bagian. Panduan berikut dapat membantu Anda mengelola perbedaan ini:

  • Gunakan alat, seperti Sauce Labs atau BrowserStack untuk menguji situs web di beberapa browser dan sistem operasi.
  • Gunakan polyfill dan shims, seperti es5shim dan Modernizr untuk mendeteksi apakah browser mendukung fitur yang diberikan sebelum memanggil API.
  • Gunakan pengaturan ulang CSS, seperti NormalizeBlueprint, dan Eric Myer's Reset untuk memulai dengan tampilan yang bersih di semua browser.
  • Gunakan awalan vendor (-webkit-, -moz-, -ms-) pada properti CSS untuk mendukung mesin render yang berbeda.
  • Gunakan diagram kompatibilitas peramban, seperti findmebyIP dan canIuse.

Mengelola perbedaan browser mungkin melibatkan sedikit percobaan dan kesalahan; Google dan StackOverflow dapat menjadi dua sahabat Anda, saat Anda berada dalam kemacetan yang disebabkan browser.


Pustaka

Ada beberapa pustaka yang mungkin ingin Anda pertimbangkan:


Minification

Sebelum menerapkan aplikasi Anda, ada baiknya untuk menggabungkan semua skrip Anda ke dalam satu file; hal yang sama dapat dikatakan untuk CSS Anda. Langkah ini umumnya disebut sebagai minification, dan ini bertujuan untuk mengurangi jumlah permintaan HTTP dan ukuran skrip Anda.

Anda dapat mengecilkan JavaScript dan CSS dengan: RequireJS optimizer, UglifyJS, dan Jammit. Mereka juga menggabungkan gambar dan ikon Anda ke dalam lembar sprite tunggal untuk lebih banyak lagi pengoptimalan.

Catatan Editor: Saya menyarankan Anda menggunakan Grunt atau Yeoman (yang menggunakan Grunt) untuk dengan mudah membangun dan menyebarkan aplikasi Anda.

Alat-alat Perdagangan

Twitter memperkenalkan Bower, pengelola paket browser yang mirip dengan NPM untuk Node.

Saya akan lalai jika saya tidak menyebutkan alat untuk membangun SPA. Berikut ini daftar beberapa:

  • JsHint untuk menangkap masalah serat dalam file JavaScript Anda. Alat ini dapat menangkap masalah sintaksis, seperti titik koma yang hilang dan menegakkan gaya kode tertentu pada proyek.
  • Daripada memulai proyek dari awal, pertimbangkan alat, seperti Yeoman untuk segera membangun perancah awal untuk proyek tersebut. Ini menyediakan dukungan built-in untuk preprocessors CSS (seperti SASS, Less dan Stylus), mengkompilasi file-file CoffeeScript ke JavaScript dan menonton untuk perubahan file. Ini juga mempersiapkan aplikasi Anda untuk penyebaran dengan meminimalkan dan mengoptimalkan aset Anda. Seperti Yeoman, ada alat lain yang perlu dipertimbangkan, seperti MimosaJS dan Middleman.
  • Jika Anda mencari alat seperti-membuat untuk JavaScript, tidak terlihat lagi dari Grunt. Ini adalah alat build yang dapat dikembangkan yang dapat menangani berbagai tugas. Yeoman menggunakan Grunt untuk menangani semua tugasnya.
  • Nodemon untuk memulai program Node secara otomatis setiap kali sebuah file berubah. Alat serupa adalah forever.
  • Code editors, seperti Sublime Text, Vim, dan JetBrains WebStorm.
  • Alat Command line ZSH atau BASH. Kuasai shell karena bisa sangat efektif terutama ketika bekerja dengan alat seperti Yeoman, Grunt, Bower dan NPM.
  • Homebrew adalah pengelola paket sederhana untuk menginstal utilitas.

Pertimbangan Kinerja

Prapemrosesan CSS mempermudah pembuatan CSS dengan aturan bersama.

Alih-alih memperlakukan ini sebagai setelah-pikiran, kinerja harus ada di pikiran Anda saat Anda membangun dan menambahkan fitur ke aplikasi Anda. Jika Anda mengalami masalah kinerja, Anda harus terlebih dahulu profil aplikasi. Inspektur Webkit menawarkan profiler internal yang dapat memberikan laporan komprehensif untuk CPU, memori dan rendering bottleneck. Profiler membantu Anda mengisolasi masalah, yang kemudian dapat Anda perbaiki dan optimalkan. Lihat Chrome Developer Tools untuk liputan mendalam dari inspektur web Chrome.

Beberapa peningkatan kinerja umum meliputi:

  • Sederhanakan pemilih CSS untuk meminimalkan penghitungan ulang dan biaya tata letak.
  • Minimalkan manipulasi DOM dan hapus elemen yang tidak perlu.
  • Hindari pengikatan data ketika jumlah elemen DOM mencapai ratusan.
  • Bersihkan penangan acara dalam melihat kejadian yang tidak lagi diperlukan.
  • Cobalah untuk menghasilkan sebagian besar HTML di sisi server. Setelah di klien, buat tampilan backing dengan elemen DOM yang ada.
  • Memiliki server khusus wilayah untuk lebih cepat berputar.
  • Gunakan CDN untuk melayani pustaka dan aset statis.
  • Analisis halaman web Anda dengan alat seperti YSlow dan ambil tindakan yang diuraikan dalam laporan.

Di atas hanya daftar sepintas. Kunjungi Html5Rocks untuk cakupan kinerja yang lebih komprehensif.


Audit dan Google Analytics

Jika Anda berencana untuk melacak penggunaan aplikasi Anda atau mengumpulkan jejak audit di sekitar alur kerja tertentu, Google Analytics (GA) mungkin adalah solusi terbaik Anda. Dengan menyertakan skrip GA sederhana di setiap halaman dengan kode pelacakan Anda, Anda dapat mengumpulkan berbagai metrik aplikasi Anda. Anda juga dapat mengatur sasaran di situs web Google Analytics. Topik yang cukup luas ini patut diselidiki, jika pelacakan dan audit merupakan masalah penting.


Mengikuti Jones

Dunia pengembangan web berubah dengan cepat. Hanya dengan melihat lima tahun terakhir, telah terjadi pertumbuhan eksplosif di perpustakaan, alat dan praktik. Cara terbaik untuk mengawasi evolusi web adalah berlangganan blog (seperti ini), buletin, dan hanya ingin tahu:


Manajemen operasi

Manajemen Operasi Sisi-klien, meskipun tampak seperti potongan besar tumpukan, sebenarnya hanya setengah dari persamaan. Setengah lainnya adalah server, yang juga dapat disebut sebagai manajemen operasi. Meskipun di luar ruang lingkup artikel ini, operasi ini dapat meliputi:

  • integrasi berkelanjutan, menggunakan server build seperti TeamCity, Jenkins, dan Hudson.
  • kegigihan, redundansi data, failover, dan pemulihan bencana.
  • caching data di memori dan membatalkan cache secara berkala.
  • menangani peran dan izin dan memvalidasi permintaan pengguna.
  • scaling di bawah beban berat.
  • keamanan, sertifikat SSL, dan mengeksploitasi-pengujian.
  • manajemen kata sandi.
  • alat pendukung, pemantauan dan pelaporan.
  • penyebaran dan pementasan.

Summary

Seperti yang Anda lihat, mengembangkan aplikasi dan membawanya ke produksi melibatkan berbagai teknologi modern. Kita fokus terutama pada pengembangan sisi klien, tetapi jangan lupa bagian sisi server dari aplikasi. Secara terpisah, mereka tidak berguna, tetapi bersama-sama, Anda memiliki layer yang diperlukan untuk aplikasi yang berfungsi.

Dengan begitu banyak belajar, Anda tidak akan sendirian jika merasa kewalahan. Tetap ikuti saja, dan jangan berhenti! Anda akan segera sampai di sana.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.