pengenalan
Baik Anda seorang pemula dalam pemrograman atau pengembang berpengalaman, mempelajari konsep dan bahasa/kerangka kerja baru adalah suatu keharusan di industri ini untuk mengikuti tren.
Ambil React, misalnya, yang dijadikan sumber terbuka oleh Facebook empat tahun lalu dan telah menjadi pilihan nomor satu bagi pengembang JavaScript di seluruh dunia.
Vue dan Angular, tentu saja, juga memiliki basis penggemar resminya masing-masing. Lalu ada Svelte dan kerangka kerja universal lainnya seperti Next.js atau Nuxt.js. Dan Gatsby, dan Gridsome, dan Quasar... dan masih banyak lagi.
Jika Anda ingin membuktikan diri sebagai pengembang JavaScript berpengalaman, Anda harus memiliki setidaknya beberapa pengalaman dengan berbagai kerangka kerja dan pustaka - selain bekerja dengan JS lama yang bagus.
Untuk membantu Anda menjadi master front-end pada tahun 2020, saya telah menyusun sembilan proyek berbeda, masing-masing berfokus pada kerangka kerja dan pustaka JavaScript yang berbeda sebagai tumpukan teknologi yang dapat Anda bangun dan tambahkan ke portofolio Anda. Ingatlah bahwa tidak ada yang lebih membantu Anda selain menciptakan sesuatu, jadi maju terus, gunakan pikiran Anda, dan wujudkan
Artikel tersebut diterjemahkan dengan dukungan EDISON Software, yang Dan .
Aplikasi pencarian film menggunakan React (dengan kait)
Hal pertama yang bisa Anda mulai adalah membuat aplikasi pencarian film menggunakan React. Di bawah ini adalah gambar tampilan akhir aplikasi:
Apa yang akan kamu pelajari?
Dengan membangun aplikasi ini, Anda akan meningkatkan keterampilan React Anda dengan menggunakan Hooks API yang relatif baru. Proyek contoh menggunakan komponen React, banyak hook, API eksternal, dan tentu saja beberapa gaya CSS.
Tumpukan teknologi dan fitur
- Bereaksi dengan kait
- buat-reaksi-aplikasi
- BEJ
- CSS
Tanpa menggunakan kelas apa pun, proyek ini memberi Anda titik masuk yang sempurna ke dalam React yang fungsional dan pasti akan membantu Anda di tahun 2020. kamu dapat menemukan . Ikuti instruksinya atau buat sendiri.
Aplikasi Obrolan dengan Vue
Proyek hebat lainnya yang dapat Anda lakukan adalah membuat aplikasi obrolan menggunakan perpustakaan JavaScript favorit saya: VueJS. Aplikasinya akan terlihat seperti ini:
Apa yang akan kamu pelajari?
Dalam tutorial ini, Anda akan mempelajari cara membuat aplikasi Vue dari awal - membuat komponen, menangani status, membuat rute, menghubungkan ke layanan pihak ketiga, dan bahkan menangani otentikasi.
Tumpukan teknologi dan fitur
- Pandangan
- vuex
- Router Vue
- tampilan CLI
- Orang ambisius
- CSS
Ini adalah proyek yang sangat bagus untuk memulai Vue atau meningkatkan keterampilan Anda yang sudah ada agar dapat dikembangkan pada tahun 2020. kamu dapat menemukan .
Aplikasi cuaca indah dengan Angular 8
Contoh ini akan membantu Anda membuat aplikasi cuaca yang indah menggunakan Angular 8:
Apa yang akan kamu pelajari?
Proyek ini akan mengajarkan Anda keterampilan berharga dalam membangun aplikasi dari awal - mulai dari desain hingga pengembangan, hingga aplikasi siap penerapan.
Tumpukan teknologi dan fitur
- Sudut 8
- Firebase
- Render sisi server
- CSS dengan Grid dan Flexbox
- Ramah seluler dan kemampuan beradaptasi
- Mode gelap
- Antarmuka yang indah
Hal yang sangat saya sukai dari proyek komprehensif ini adalah Anda tidak mempelajari berbagai hal secara terpisah. Sebaliknya, Anda mempelajari keseluruhan proses pengembangan, mulai dari desain hingga penerapan akhir.
Aplikasi Agenda menggunakan Svelte
Svelte seperti anak baru dalam pendekatan berbasis komponen - setidaknya mirip dengan React, Vue, dan Angular. Dan ini adalah salah satu produk baru terpanas untuk tahun 2020.
Aplikasi Agenda belum tentu menjadi topik terhangat, namun aplikasi ini akan sangat membantu Anda mengasah keterampilan Svelte Anda. Ini akan terlihat seperti ini:
Apa yang akan kamu pelajari?
Tutorial ini akan menunjukkan cara membuat aplikasi menggunakan Svelte 3, dari awal hingga akhir. Anda akan menggunakan komponen, gaya, dan pengendali kejadian
Tumpukan teknologi dan fitur
- Langsing 3
- Komponen
- Menata gaya dengan CSS
- Sintaks ES 6
Tidak banyak proyek awal Svelte yang bagus, jadi saya menemukannya .
Aplikasi e-niaga menggunakan Next.js
Next.js adalah kerangka kerja paling populer untuk membangun aplikasi React yang mendukung rendering sisi server.
Proyek ini akan menunjukkan cara membuat aplikasi e-commerce yang terlihat seperti ini:
Apa yang akan kamu pelajari?
Dalam proyek ini, Anda akan mempelajari cara mengembangkan dengan Next.jsβmembuat halaman dan komponen baru, mengekstrak data, serta menata gaya dan menerapkan aplikasi Berikutnya.
Tumpukan teknologi dan fitur
- Next.js
- Komponen dan Halaman
- Pengambilan sampel data
- Styling
- Penerapan Proyek
- RSK dan SPA
Selalu menyenangkan memiliki contoh dunia nyata seperti aplikasi e-niaga untuk mempelajari sesuatu yang baru. Kamu bisa .
Blog multibahasa lengkap dengan Nuxt.js
Nuxt.js untuk Vue, sedangkan Next.js untuk React: kerangka kerja hebat untuk menggabungkan kekuatan rendering sisi server dan aplikasi satu halaman
Aplikasi akhir yang bisa Anda buat akan terlihat seperti ini:
Apa yang akan kamu pelajari?
Dalam contoh proyek ini, Anda akan mempelajari cara membuat situs web lengkap menggunakan Nuxt.js, mulai dari penyiapan awal hingga penerapan akhir.
Ini memanfaatkan banyak fitur keren yang ditawarkan Nuxt, seperti halaman dan komponen, serta penataan gaya dengan SCSS.
Tumpukan teknologi dan fitur
- Nuxt.js
- Komponen dan Halaman
- Modul blok cerita
- ikan hag
- Vuex untuk manajemen negara
- SCSS untuk penataan
- Middleware berikutnya
, yang mencakup banyak fitur hebat Nuxt.js. Saya pribadi suka bekerja dengan Nuxt jadi Anda harus mencobanya karena ini juga akan menjadikan Anda pengembang Vue yang hebat.
Blog dengan Gatsby
Gatsby adalah generator situs statis luar biasa yang menggunakan React dan GraphQL. Ini adalah hasil dari proyek ini:
Apa yang akan kamu pelajari?
Dalam tutorial ini, Anda akan mempelajari cara menggunakan Gatsby untuk membuat blog yang akan Anda gunakan untuk menulis artikel Anda sendiri menggunakan React dan GraphQL.
Tumpukan teknologi dan fitur
- gatsby
- Bereaksi
- GraphQL
- Plugin dan tema
- MDX/Penurunan harga
- CSS bootstrap
- Template
Jika Anda pernah ingin memulai sebuah blog, tentang cara membuatnya menggunakan React dan GraphQL.
Saya tidak mengatakan WordPress adalah pilihan yang buruk, tetapi dengan Gatsby Anda dapat membangun situs web berkinerja tinggi menggunakan React - yang merupakan kombinasi luar biasa.
Blog dengan Gridsome
Mengerikan untuk Vue... Oke, kita sudah memilikinya dengan Next/Nuxt.
Namun hal yang sama juga berlaku untuk Gridsome dan Gatsby. Keduanya menggunakan GraphQL sebagai lapisan datanya, tetapi Gridsome menggunakan VueJS. Ini juga merupakan generator situs statis luar biasa yang akan membantu Anda membuat blog hebat:
Apa yang akan kamu pelajari?
Proyek ini akan mengajarkan Anda cara membuat blog sederhana untuk memulai dengan Gridsome, GraphQL, dan Markdown. Ini juga mencakup cara menyebarkan aplikasi melalui Netlify.
Tumpukan teknologi dan fitur
- keren
- Pandangan
- GraphQL
- Penurunan harga
- netlify
Ini tentunya bukan tutorial yang paling komprehensif, tetapi mencakup konsep dasar Gridsome dan .
Pemutar audio mirip SoundCloud menggunakan Quasar
Quasar adalah framework Vue lain yang dapat digunakan untuk membuat aplikasi seluler. Pada project ini Anda akan membuat aplikasi pemutar audio, misalnya:
Apa yang akan kamu pelajari?
Meskipun proyek lain berfokus terutama pada aplikasi web, proyek ini akan menunjukkan kepada Anda cara membuat aplikasi seluler menggunakan Vue dan kerangka Quasar.
Anda seharusnya sudah menjalankan Cordova dengan Android Studio/Xcode yang dikonfigurasi. Jika tidak, manual ini memiliki tautan ke situs web Quasar di mana mereka menunjukkan cara mengatur semuanya.
Tumpukan teknologi dan fitur
- Quasar
- Pandangan
- Cordova
- Peselancar Gelombang
- Komponen UI
, menunjukkan kemampuan Quasar untuk membuat aplikasi seluler.
Sumber: www.habr.com