9 lagi projek untuk mengasah kemahiran Front-End anda

Pengenalan

Независимо от того, являетесь ли вы новичком в программировании или уже опытным разработчиком, в этой отрасли изучение новых концепций и языков/фреймворков является обязательно чтобы успевать за трендами.

Возьмем, к примеру, React — код которого, Facebook открыл всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.

Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.

Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками — помимо выполнения работы с хорошим старым JS.

Чтобы помочь вам стать мастером фронт-енда в 2020 году, я собрал девять различных проектов, каждый из которых был посвящен разным фреймворкам и библиотекам JavaScript в качестве технического стека, который вы можете создать и добавить в свое портфолио. Помните, что ничто не помогает вам больше, чем на практике создавать вещи, поэтому двигайтесь вперед, включите свой ум и сделайте это возможным

Artikel tersebut telah diterjemahkan dengan sokongan Perisian EDISON, yang membuat bilik pemasangan maya untuk kedai berbilang jenamaDan menguji perisian.

Apl carian filem menggunakan React (dengan cangkuk)

Perkara pertama yang anda boleh mulakan ialah membuat aplikasi carian filem menggunakan React. Di bawah ialah imej tentang rupa permohonan akhir:

Apa yang akan anda pelajari
Dengan membina apl ini, anda akan meningkatkan kemahiran React anda dengan menggunakan API Hooks yang agak baharu. Projek contoh menggunakan komponen React, banyak cangkuk, API luaran, dan sudah tentu beberapa penggayaan CSS.

Timbunan dan ciri teknologi

• Bertindak balas dengan cangkuk
• buat-reaksi-aplikasi
• JSX
• CSS

Tanpa menggunakan sebarang kelas, projek ini memberi anda titik masuk yang sempurna ke dalam React berfungsi dan pasti akan membantu anda pada tahun 2020. awak boleh cari contoh projek di sini. Ikut arahan atau buat sendiri.

Apl Sembang dengan Vue

Satu lagi projek hebat untuk anda lakukan ialah mencipta aplikasi sembang menggunakan perpustakaan JavaScript kegemaran saya: VueJS. Aplikasi akan kelihatan seperti ini:

Apa yang akan anda pelajari
Dalam tutorial ini, anda akan belajar cara membuat aplikasi Vue dari awal - mencipta komponen, keadaan pengendalian, mencipta laluan, menyambung kepada perkhidmatan pihak ketiga dan juga mengendalikan pengesahan.

Timbunan dan ciri teknologi

• Vue
• vuex
• Penghala Vue
• Paparan CLI
• Pusher
• CSS

Ini adalah projek yang sangat bagus untuk bermula dengan Vue atau meningkatkan kemahiran sedia ada anda untuk memasuki pembangunan pada tahun 2020. awak boleh cari tutorial di sini.

Apl cuaca yang cantik dengan Angular 8

Contoh ini akan membantu anda membuat aplikasi cuaca yang cantik menggunakan Angular 8:

Apa yang akan anda pelajari
Projek ini akan mengajar anda kemahiran berharga dalam membina aplikasi dari awal - dari reka bentuk hingga pembangunan, sehingga ke aplikasi sedia untuk digunakan.

Timbunan dan ciri teknologi

• Sudut 8
• Firebase
• Penyampaian sisi pelayan
• CSS dengan Grid dan Flexbox
• Mesra mudah alih dan kebolehsuaian
• Mod gelap
• Antara muka yang cantik

Apa yang saya sangat suka tentang projek yang merangkumi semua ini ialah anda tidak mengkaji sesuatu secara berasingan. Sebaliknya, anda mempelajari keseluruhan proses pembangunan, daripada reka bentuk hingga penggunaan terakhir.

Aplikasi To-Do menggunakan Svelte

Svelte adalah seperti kanak-kanak baharu dalam pendekatan berasaskan komponen - sekurang-kurangnya serupa dengan React, Vue dan Angular. Dan ini adalah salah satu produk baharu yang paling hangat untuk tahun 2020.

Apl Tugasan tidak semestinya topik paling hangat, tetapi ia benar-benar akan membantu anda mengasah kemahiran Svelte anda. Ia akan kelihatan seperti ini:

Apa yang akan anda pelajari
Tutorial ini akan menunjukkan kepada anda cara membuat aplikasi menggunakan Svelte 3, dari awal hingga akhir. Anda akan menggunakan komponen, penggayaan dan pengendali acara

Timbunan dan ciri teknologi

• Lembut 3
• Komponen
• Menggayakan dengan CSS
• sintaks ES 6

Tidak banyak projek permulaan Svelte yang bagus, jadi saya dapati ini adalah pilihan yang baik untuk bermula.

Apl e-dagang menggunakan Next.js

Next.js ialah rangka kerja paling popular untuk membina aplikasi React yang menyokong pemaparan sebelah pelayan di luar kotak.

Projek ini akan menunjukkan kepada anda cara membuat aplikasi e-dagang yang kelihatan seperti ini:

Apa yang akan anda pelajari
Dalam projek ini, anda akan belajar cara membangun dengan Next.js—membuat halaman dan komponen baharu, mengekstrak data dan gaya serta menggunakan aplikasi Seterusnya.

Timbunan dan ciri teknologi

• Seterusnya.js
• Komponen dan Halaman
• Persampelan data
• Stylization
• Penyerahan Projek
• SSR dan SPA

Ia sentiasa bagus untuk mempunyai contoh dunia sebenar seperti apl e-dagang untuk mempelajari sesuatu yang baharu. Awak boleh cari tutorial di sini.

Blog berbilang bahasa penuh dengan Nuxt.js

Nuxt.js adalah untuk Vue, Next.js adalah untuk React: rangka kerja yang hebat untuk menggabungkan kuasa pemaparan sebelah pelayan dan aplikasi satu halaman
Aplikasi akhir yang anda boleh buat akan kelihatan seperti ini:

Apa yang akan anda pelajari

Dalam projek contoh ini, anda akan belajar cara membuat tapak web yang lengkap menggunakan Nuxt.js, daripada persediaan awal hingga penggunaan terakhir.

Ia mengambil kesempatan daripada banyak ciri hebat yang Nuxt tawarkan, seperti halaman dan komponen, dan penggayaan dengan SCSS.

Timbunan dan ciri teknologi

• Nuxt.js
• Komponen dan Halaman
• Modul sekatan cerita
• Hagfish
• Vuex untuk pengurusan negeri
• SCSS untuk penggayaan
• Nuxt middlewares

Ini adalah projek yang sangat keren, yang merangkumi banyak ciri Nuxt.js yang hebat. Saya secara peribadi suka bekerja dengan Nuxt jadi anda harus mencubanya kerana ia juga akan menjadikan anda pembangun Vue yang hebat.

Blog dengan Gatsby

Gatsby ialah penjana tapak statik yang sangat baik menggunakan React dan GraphQL. Ini adalah hasil projek:

Apa yang akan anda pelajari

Dalam tutorial ini, anda akan belajar cara menggunakan Gatsby untuk mencipta blog yang akan anda gunakan untuk menulis artikel anda sendiri menggunakan React dan GraphQL.

Timbunan dan ciri teknologi

• Gatsby
• Bertindak
• GraphQL
• Pemalam dan tema
• MDX/Markdown
• CSS Bootstrap
• Templat

Jika anda pernah ingin memulakan blog, ini adalah contoh yang bagus tentang cara membuatnya menggunakan React dan GraphQL.

Saya tidak mengatakan WordPress adalah pilihan yang tidak baik, tetapi dengan Gatsby anda boleh membina tapak web berprestasi tinggi menggunakan React - yang merupakan gabungan yang menakjubkan.

Blog dengan Gridsome

Gridsome untuk Vue... Okey, kami sudah mempunyai ini dengan Next/Nuxt.
Tetapi perkara yang sama berlaku untuk Gridsome dan Gatsby. Kedua-duanya menggunakan GraphQL sebagai lapisan data mereka, tetapi Gridsome menggunakan VueJS. Ini juga merupakan penjana tapak statik yang menakjubkan yang akan membantu anda mencipta blog yang hebat:

Apa yang akan anda pelajari

Projek ini akan mengajar anda cara membuat blog ringkas untuk bermula dengan Gridsome, GraphQL dan Markdown. Ia juga merangkumi cara untuk menggunakan aplikasi melalui Netlify.

Timbunan dan ciri teknologi

• menyeramkan
• Vue
• GraphQL
• Penurunan harga
• Bersih

Ini sememangnya bukan tutorial yang paling komprehensif, tetapi ia merangkumi konsep asas Gridsome dan Penurunan harga mungkin merupakan titik permulaan yang baik.

Pemain audio seperti SoundCloud menggunakan Quasar

Quasar ialah satu lagi rangka kerja Vue yang boleh digunakan untuk mencipta aplikasi mudah alih. Dalam projek ini anda akan mencipta aplikasi pemain audio, sebagai contoh:

Apa yang akan anda pelajari

Walaupun projek lain tertumpu terutamanya pada aplikasi web, projek ini akan menunjukkan kepada anda cara membuat aplikasi mudah alih menggunakan rangka kerja Vue dan Quasar.
Anda sepatutnya sudah menjalankan Cordova dengan Android Studio/Xcode dikonfigurasikan. Jika tidak, manual mempunyai pautan ke tapak web Quasar di mana mereka menunjukkan kepada anda cara untuk menyediakan segala-galanya.

Timbunan dan ciri teknologi

• Quasar
• Vue
• Cordova
• WaveSurfer
• Komponen UI

Projek kecil, menunjukkan keupayaan Quasar untuk mencipta aplikasi mudah alih.

Sumber: www.habr.com