Memperkenalkan Hoodie: Pengembangan Full Stack untuk Pengembang Front-End

Jika Anda belum pernah mendengar tentang Hoodie, Anda harus memeriksanya.

Hoodie adalah perpustakaan baru yang progresif untuk pengembang front-end yang mengadopsi beberapa filosofi baru yang luar biasa yang kemungkinan akan mengubah pengembangan aplikasi serta pengalaman pengguna. Hoodie menempatkan kendali atas tumpukan penuh, pengembangan aplikasi front-end sepenuhnya di tangan pengembang front-end dan ahli pengalaman pengguna, membebaskan mereka dari keberatan teknis yang terkadang tidak dapat dipahami dari rekan-rekan back-end mereka. Selain itu, aplikasi Hoodie membebaskan pengguna dari belenggu konektivitas tanpa gangguan, memungkinkan mereka menggunakan aplikasi Anda saat bepergian, di udara, atau di bawah laut, tanpa peduli.

Meskipun platform ini masih dalam masa pertumbuhan, ia sudah menawarkan beberapa alat baru yang kuat yang patut dicoba untuk setiap pengembang front-end yang ingin menjadi yang terdepan dalam permainan. Tim di balik Hoodie memiliki latar belakang yang telah terbukti, setelah mengerjakan proyek lain yang sangat sukses seperti CouchDB, Async, Moustache.js dan banyak lagi.

Setelah mengetahui tentang apa yang dimiliki perpustakaan pengembangan tumpukan penuh Hoodie dalam pekerjaan dan menjadi sangat bersemangat tentang proyek ini, saya memutuskan untuk mencobanya sendiri. Biarkan saya memberi tahu Anda sedikit lebih banyak tentang Hoodie, dan menunjukkan kepada Anda beberapa potensi yang dimilikinya untuk mengembangkan aplikasi hebat.

Apa itu Hoodie?

Pertama-tama, apa itu Hoodie? Apa yang hebat tentang itu? Hoodie adalah open source, platform JavaScript sepenuhnya dan API yang menggabungkan beberapa paradigma baru yang kuat dalam satu paket pengembangan tumpukan penuh, untuk kepentingan pengembang yang membuat aplikasi Hoodie, dan pengguna akhir yang berinteraksi dengan mereka. Konsep utama di antara konsep-konsep ini adalah gerakan "noBackend" dan "Offline First", bersama dengan proses berbasis komunitas yang kuat yang dikenal sebagai "Dreamcode" untuk membangun API.

tidak ada Backend

Hoodie percaya bahwa kunci pengembangan aplikasi front-end yang hebat terletak di tangan para ahli dan pengembang pengalaman pengguna yang tahu cara membuat aplikasi tampak hebat dan menyenangkan untuk digunakan, tetapi yang terlalu sering dibatasi oleh teknis back-end bahwa mereka tidak memiliki kendali atas. Interaksi server mendasar yang telah ada selamanya, seperti pendaftaran/masuk pengguna, penyimpanan data, atau pengiriman email, terus membutuhkan implementasi kustom yang memakan waktu untuk setiap aplikasi baru, memaksa pengembang front-end untuk belajar dan membuat kode untuk back- akhiri kebiasaan setiap saat.

Hoodie mengembalikan kendali ke tangan desainer dan pengembang front-end, dengan mengabstraksikan back-end sepenuhnya. Dengan pengembangan aplikasi front-end Hoodie, alih-alih mengkhawatirkan sisi server Anda, yang perlu Anda khawatirkan hanyalah API front-end yang sederhana, mudah dipelajari, dan diterapkan di dalam Hoodie. Misalnya, ingin mendaftarkan pengguna baru? Ini dapat dilakukan dalam satu baris kode:

 hoodie.account.signUp(username, password);

Ini adalah ide di balik inisiatif noBackend, di mana Hoodie berkomitmen penuh. noBackend berarti Anda tidak memerlukan pengembang back-end! Cukup gunakan back-end Hoodie ke server Anda, dan lupakan saja .

Hoodie seluruhnya ditulis dalam JavaScript. Back-end mandirinya menggunakan Node.JS dengan Apache CouchDB sebagai databasenya. Pada tulisan ini, fitur inti yang telah diterapkan Hoodie meliputi pendaftaran dan administrasi pengguna, pemuatan data, penyimpanan, dan email. Fitur inti ini dapat dengan mudah diperluas dengan menambahkan plugin Node.js tambahan.

Kode mimpi

Hoodie adalah API yang pertama dan terpenting - inilah yang membuat noBackend menjadi mungkin. Implementasi Hoodie dapat berubah dan meningkat seiring waktu, tetapi antarmuka yang disediakan untuk pengembang akan tetap sama, sehingga Anda tidak perlu khawatir tentang hal itu.

Hoodie masih berkembang pesat, dan fitur-fitur baru terus ditambahkan setiap saat. Hoodie, seperti proyek noBackend lainnya, menggunakan pendekatan berbasis komunitas untuk merancang API yang disebut Dreamcode. Pada dasarnya, Anda memimpikan kode yang ingin Anda tulis, dan jika mendapat dukungan yang cukup dari komunitas, Hoodie akan mewujudkannya.

Pendekatan pertama-api, crowdsourced untuk merancang Hoodie API ini berarti bahwa kode Hoodie sangat mudah untuk ditulis dan mudah untuk dibaca. Ini adalah kode impian Anda!

Offline Pertama

Hoodie memecahkan banyak masalah bagi pengembang aplikasi front-end dengan API noBackend, yang digerakkan oleh Dreamcode. Tetapi salah satu tujuan utama Hoodie adalah untuk memecahkan masalah utama bagi pengguna juga - ketergantungan mereka yang sering melumpuhkan pada konektivitas.

Saat peralihan ke perangkat seluler dengan aplikasi seluler terus berlanjut, asumsi lama tentang konektivitas berkelanjutan berbasis desktop tetap tidak berubah. Selama ini yang dijanjikan adalah kemanapun Anda pergi, internet akan ada di sana. Sampai hari ini, hilangnya konektivitas diperlakukan sebagai anomali, mematikan kemampuan pengguna untuk menyelesaikan apa pun sampai mereka kembali online. Tapi seperti yang kita semua tahu, jaringan telekomunikasi telah gagal memenuhi janji ini. Konektivitas keluar jendela di pesawat, di kereta bawah tanah, di jalan pedesaan, dan dalam situasi lain yang tak terhitung jumlahnya. Dan itu ada di bagian dunia yang sudah maju! Di wilayah yang luas di planet ini, akses internet yang stabil adalah pengecualian langka dari aturan tersebut.

Gerakan Offline First mencari harmonisasi yang anggun dengan fakta kehidupan yang sederhana ini. Dengan Offline First, non-konektivitas hanyalah keadaan normal aplikasi lainnya. Sebenarnya itu adalah status default! Hoodie dengan antusias mengadopsi filosofi ini. Di belakang API terdapat implementasi front-end penuh dari penyimpanan lokal sementara, dan sinkronisasi otomatis yang anggun setiap kali koneksi tersedia.

Dengan Hoodie, Anda dapat mengirim komentar, mengirim email, mengedit akun, dan melakukan hampir semua aktivitas sehari-hari lainnya, tanpa khawatir memiliki koneksi. Seluruh sistem penyimpanan dan sinkronisasi dapat terganggu kapan saja, tanpa takut kehilangan data.

Tentu saja, model ini hadir dengan serangkaian tantangan dan pendekatan desain yang unik, tetapi tim di Hoodie merintis teknik untuk memecahkan tantangan ini.

Offline First adalah pendekatan baru yang menarik dalam pengembangan aplikasi, dalam tahap awal adopsi. Masih banyak yang harus dilakukan untuk mengembangkan teknik yang dibutuhkan. Lihat di sini untuk melihat bagaimana Hoodie melakukannya.

Aplikasi Sederhana Menggunakan Hoodie

Untuk mendemonstrasikan penggunaan Hoodie sebagai alat pengembangan front-end, saya memutuskan untuk menulis aplikasi sederhana yang memungkinkan anggota komunitas kami membuat acara mereka sendiri dan menerbitkannya untuk dijelajahi oleh insinyur lain dan ditambahkan ke jadwal mereka. Ingatlah bahwa tujuannya di sini adalah untuk mendemonstrasikan Hoodie dan bukan menyediakan aplikasi yang siap produksi. Anda dapat menemukan kodenya di halaman GitHub saya.

Di bawah selimut, Hoodie pada dasarnya adalah kombinasi dari sisi server yang dibangun di NodeJS dan perpustakaan JavaScript sisi klien. Selain proses instalasi dan penerapan yang sederhana, pengembang yang mengerjakan aplikasi hanya akan bekerja pada kode sisi klien. Pustaka bawaan dapat berbicara ke sisi server tanpa pengembang mengetahui apa pun tentang cara kerjanya.

Bagaimana jika aplikasi kita mengharuskan kita untuk melakukan sesuatu yang khusus di server? Kami selalu dapat membuat plugin Hoodie. Berikut adalah beberapa informasi lebih lanjut tentang plugin.

Memulai Aplikasi Hoodie Anda

Langkah pertama dengan pengembangan tumpukan penuh dari aplikasi Hoodie apa pun adalah dengan menggunakan alat baris perintah Hoodie untuk membantu kita memulai:

 hoodie new toptalCommunity

Ini akan membuat aplikasi Hoodie yang diinisialisasi yang sudah memiliki beberapa kode, dan kita sudah bisa menjalankan aplikasi kita! Jika kita mengetik

 cd toptalCommunity hoodie start

browser akan terbuka dengan contoh aplikasi dari tim Hoodie:

Saya melakukan sedikit pekerjaan rumah tangga saat ini. Aplikasi hoodie saat ini hadir dengan Bootstrap dan Prism, tetapi saya mengeluarkan versi yang disediakan. Saya tidak membutuhkan Prism dan ingin menggunakan Bootstrap versi saya sendiri sehingga saya dapat menggunakan font dan JS yang ingin saya gunakan. Saya juga membuat beberapa perubahan pada main.css saat saya membangun aplikasi, untuk memberikan gayanya sendiri dan untuk memungkinkan template bootstrap sederhana saya. Saya hanya menggunakan jQuery untuk manipulasi dan acara DOM. Hoodie mengurus segala sesuatu yang lain.

Hoodie dan Dreamcode

Saat saya bekerja untuk membuat aplikasi sampel ini, saya segera menyadari semua manfaat bekerja dengan Hoodie. Begitu banyak pertanyaan biasa yang perlu dijawab ketika memulai sebuah proyek tidak ada di sana. Hoodie memungkinkan saya untuk hanya menulis kode dan melihat aplikasi langsung dan berfungsi.

Strategi apa yang harus kita gunakan untuk pengelolaan akun pengguna? Plugin akun Hoodie adalah jawabannya. Bagaimana seharusnya kita menyimpan data kita di backend? API penyimpanan sederhana dari Hoodie menanganinya untuk kami, memberi kami fungsionalitas Offline First secara gratis! Tidak ada upaya yang diperlukan untuk membuat aplikasi Hoodie ini bekerja secara offline, itu hanya berfungsi.

Mari selami sedikit lebih dalam pada beberapa implementasi:.

Manajemen Akun Pengguna

Hoodie memiliki plugin yang menangani manajemen akun untuk kami yang disebut hoodie-plugin-users . API tidak bisa lebih sederhana.

Bagaimana cara menambahkan pengguna baru?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Bagaimana cara kami memasukkan pengguna?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Apakah kita memiliki pengguna yang masuk?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

Ini benar-benar tidak bisa lebih sederhana. Oh tunggu dan bagaimana UI kita akan bereaksi terhadap semua itu? Hoodie memiliki acara untuk Anda

Bereaksi saat pengguna masuk:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

Penyimpanan data

Aplikasi sampel kami akan memungkinkan pengguna untuk membuat acara mereka sendiri (data pribadi) dan mempublikasikannya jika mereka mau (membuat data menjadi publik), sehingga pengguna lain dapat bergabung dengan acara tersebut.

Hoodie memungkinkan kita untuk menambahkan data ke penyimpanan lokalnya tanpa login, jadi bagaimana dia tahu milik pengguna mana data ini? Yah, itu membuatnya tetap lokal dan tidak akan disinkronkan ke server sampai pengguna itu masuk. Hoodie juga akan memastikan hanya pengguna yang bisa mendapatkan data itu.

Jadi begini cara kerjanya:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

Sesederhana itu! Oke, jadi itu akan membantu kami membuat acara, bagaimana kami akan membagikannya dengan orang lain? Di sinilah global share plugin akan membantu kami. Kita harus menginstalnya karena ini bukan plugin default:

 hoodie install global-share

Sekarang kita memiliki plugin, mari kita gunakan! Kami harus mempublikasikan data yang telah kami tambahkan ke toko pengguna kami ke toko global.

 hoodie.store.findAll('event').publish();

Ini akan menandai semua peristiwa yang disimpan untuk pengguna ini sebagai publik sehingga ketika kami menanyakan toko global, kami akan mendapatkan data itu sebagai hasilnya.

 hoodie.global.findAll('event'); //This is read-only

Di halaman Acara Saya, pengguna dapat membuat acara yang dipublikasikan ke toko global secara langsung.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

Acara yang dipublikasikan dapat dilihat oleh semua orang, jadi sekarang setiap pengguna dapat melihat acara yang dibuat di halaman Acara.

Lalu bagaimana dengan data yang tidak boleh dipublikasikan? Kami menyimpan acara yang telah diterapkan pengguna kami dan menampilkannya di halaman Acara. Saat pengguna mengklik tombol terapkan, inilah yang dijalankan:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

Dua tangkapan layar di bawah ini menunjukkan dua jendela peramban yang berjalan secara bersamaan. Di browser pertama, pengguna login sebagai pengguna a@aa yang telah mendaftar ke A Event . Yang kedua, pengguna b@bb masuk dan telah mendaftar ke B Event .

Polling Panjang

Dengan berlangganan beberapa acara yang disediakan oleh Hoodie kami dapat secara transparan menggunakan teknik seperti polling panjang yang memberikan aplikasi kami fitur yang menarik karena pengguna yang berbeda menggunakan dan berkolaborasi di dalamnya.

Ini sangat mudah dilakukan. Pada aplikasi sampel kami, satu baris menyelesaikan trik:

 hoodie.global.on('add:event', loadEvent);

Baris sederhana itu akan mengurus polling panjang server untuk memeriksa acara baru yang mungkin telah ditambahkan oleh pengguna lain dan menambahkannya ke halaman Acara Saya.

Beberapa Kekhawatiran

Setelah membuat aplikasi sampel ini untuk bermain dengan Hoodie dan fitur pengembangan aplikasi front-endnya, saya sangat senang dengan apa yang ditawarkannya. Namun, beberapa masalah yang jelas menonjol bagi saya.

Hoodie memudahkan pengembang untuk berkomunikasi dengan server sehingga pengembang mana pun dapat menambahkan sesuatu ke database kami hanya dengan menggunakan konsol, yang jelas memiliki implikasi keamanan dan integritas data yang besar.

Pustaka juga masih kehilangan banyak hal penting yang Anda perlukan dalam aplikasi produksi apa pun, seperti validasi data, URL yang dapat ditautkan, kerangka kerja pengujian, dan berbagi data secara pribadi (walaupun mereka sudah membuat kemajuan yang baik untuk yang terakhir ini). Untuk menggunakan Hoodie dalam produksi sekarang, kita harus memasangkannya dengan solusi lain seperti AngularJS, Ember, atau salah satu dari banyak solusi lain yang membantu kita memastikan bahwa kita memiliki kode JavaScript yang terstruktur dan dapat dipelihara dengan benar untuk proyek Front-End kita. Karena kerangka kerja ini sendiri mendekati kompleksitas teknologi back-end akhir-akhir ini, solusi ini sebagian besar akan mengalahkan tujuan Hoodie.

Masa Depan Hoodie

Hoodie masih menjalani pengembangan berat untuk menyelesaikan semua masalah ini. Tim bekerja keras untuk mengimplementasikan fitur baru dan meningkatkan yang sudah ada agar platform siap untuk konsumsi massal, dan tentu saja, proses ini membutuhkan waktu. Jika Anda sedang merencanakan aplikasi skala penuh baru sekarang, Anda mungkin ingin mencari platform lain untuk membangunnya kali ini.

Namun, sementara itu, tentu saja tidak terlalu dini untuk mulai mengutak-atik pengembangan aplikasi front-end menggunakan Hoodie, seperti yang saya harap baru saja saya tunjukkan. Ada banyak ide baru yang kuat yang sudah ada di dalam Hoodie, yang menurut saya akan menjadi sangat populer. Maju dari permainan dengan hal-hal ini mungkin bukan ide yang buruk.

Jika tim di Hoodie terus bekerja keras, API akan siap untuk prime time dalam waktu singkat. Jika Anda ingin melacak kemajuan tim Hoodie, lihat saja pelacak pencapaian mereka.

Hoodie berjanji untuk membuat pengembangan aplikasi hebat untuk penggerak dan pengocok menjadi mudah. Jika ide-ide yang diwujudkan Hoodie berhasil, kita mungkin melihat kebutuhan akan tim pengembang back-end untuk setiap proyek baru menjadi sesuatu dari masa lalu. Dengan proyek seperti ini, mudah untuk membayangkan masa keemasan bagi pengembang front-end dalam waktu yang tidak terlalu lama. Demikian pula, manfaat bagi pengguna yang ditawarkan oleh Offline First ideal adalah langkah besar untuk aksesibilitas, memperluas jangkauan gaya hidup terhubung seluler kami ke tempat-tempat di mana internet itu sendiri tidak terhubung.

Pergilah ke Hoodie untuk mengikuti perkembangan Hoodie, dan untuk menjadi bagian dari perubahan baru yang menarik, ia sedang bersiap untuk mengantarkannya.

Terima kasih khusus kepada tim Hoodie. Logo hoodie digunakan dengan izin dari Proyek Open Source Hoodie