Quan Kuyo9 dự án bạn có thể làm để trở thành một chuyên gia Front-end trong năm 2020
Bài viết được mình dịch lại của tác giả
Simon Holdorf. Link bài viết gốc tại đây https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h
Giới thiệu
Cho dù bạn là người mới tập tễnh hay là người đã có kinh nghiệm về lập trình, thì trong ngành này, học những khái niệm và ngôn ngữ/ frameworks mới là bắt buộc để bắt kịp với những thay đổi chóng mặt. Lấy ví dụ về React - mã nguồn mở được phát triển từ Facebook chỉ mới ra mắt cách đây 4 năm, nhưng nó đã dần trở thành một trong những lựa chọn cho các nhà phát triển Javascript trên toàn cầu. Nhưng tất nhiên Vue và Angular cũng có một lượng lớn người theo dõi. Theo sau đó là Svelte và những framework khác như Next.js, Nuxt.js, Gatsby, Gridsome và Quasar và …Nếu bạn muốn được tỏa sáng như một chuyên gia về Javascript, bạn nên có kinh nghiệm ít nhất với một vài frameworks và thư viện - bên cạnh việc làm bài tập về JS thuần.
Để giúp bạn trở thành chuyên gia Front-end trong năm 2020, tôi đã thu thập được 9 dự án khác nhau, với mỗi một chủ đề riêng biệt và sử dụng framework hoặc thư viện của Javascript khác nhau, sẽ giúp bạn thêm vào portfolio của mình. Nên nhớ rằng, không có gì có thể giúp bạn nhiều hơn việc bạn tự xây dựng nó.
1. Xây dựng ứng dụng tìm kiếm phim sử dụng React (với Hooks)
Điều đầu tiên là bạn có thể bắt đầu xây dựng một ứng dụng tìm kiếm phim bằng React. Giao diện của ứng dụng sẽ trông như thế này.
Bạn học gì trong đó?
Xây dựng ứng dụng này sẽ giúp bạn cải thiện kỹ năng về React của mình thông qua cách sử dụng Hooks API. Dự án sử dụng các component React, hooks, API từ bên ngoài và tất nhiên là một số style CSS.
Công nghệ và tính năng
- React với Hooks
- create-react-app
- JSX
- CSS
Không sử dụng React class mà thay vào đó sẽ sử dụng React functional trong dự án này, và chắc chắn nó sẽ giúp bạn rất nhiều trong năm 2020. Dự án mẫu ở đây. https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
Làm theo hướng dẫn hoặc tạo ra một hương vị của riêng bạn :D
2. Xây dựng một ứng dụng chat với Vue
Một dự án tuyệt vời khác dành cho bạn đó là xây dựng một ứng dụng chat sử dụng Vue. Ứng dụng sẽ trông như thế này:
Bạn học gì trong đó?
Làm theo hướng dẫn, bạn sẽ học cách để thiết lập một ứng dụng Vue từ đầu, tạo components, xử lý state, tạo route, kết nối tới dịch vụ bên thứ ba và xử lý authentication
Công nghệ và tính năng
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Đây là một dự án tuyệt vời để bắt đầu với Vue hoặc cải thiện các kỹ năng hiện có của bạn để phát triển trong năm 2020. Link dự án mẫu: https://www.sitepoint.com/pusher-vue-real-time-chat-app/
3. Xây dựng một ứng dụng thời tiết với Angular 8
Dự án này sẽ giúp bạn xây dựng một ứng dụng thời tiết sử dụng Google’s Angular 8.
Bạn học gì trong đó?
Dự án này sẽ dạy cho bạn những kỹ năng quý giá như từ cách tạo ứng dụng từ đầu, bắt đầu với từ việc thiết kế cho đến phát triển rồi đến việc triển khai ứng dụng thành một sản phẩm hoàn thiện
Công nghệ và tính năng
- Angular 8
- Firebase
- Server-Side Rendering
- CSS with Grid Layout and Flexbox
- Mobile friendly & responsive
- Dark Mode
- Beautiful UI
Điều tôi thực sự thích về dự án hoàn thiện này đó là bạn không học mọi thứ một cách riêng lẻ mà bạn sẽ học nó từ việc thiết kế cho đến phần triển khai cuối cùng. Bạn thực sự nên làm điều này!
4. Xây dựng một ứng dụng To-do-list với Svelte
Svelte kinda là một khái niệm mới để có thể so sánh được với React, Vue và Angular nhưng nó vẫn là một trong những xu hướng trong năm 2020. Okay, ứng dụng To-do không phải là ứng dụng hot nữa nhưng điều này thực sự giúp bạn rèn luyện các kỹ năng về Svelte và trông nó sẽ như thế này:
Bạn học gì trong đó?
Ví dụ này sẽ giúp bạn học cách tạo ra một ứng dụng sử dụng Svelte 3 từ A tới Z. Từ việc tạo components, styling đến xử lý sự kiện.
Công nghệ và tính năng
- Svelte 3
- Components
- Styling via CSS
- ES 6 syntax
Đây là dự án mà tôi thấy khá tốt để bắt đầu với Svelte. Và biết đâu bạn sẽ tạo ra nhiều cái thú vị và toàn diện hơn về Svelte sau hướng dẫn này :v
5. Xây dựng một giỏ hàng cho trang thương mại điện tử với Next.js
Next.js là framework phổ biến nhất để tạo ra ứng dụng React hỗ trợ serve-side rendering. Dự án này sẽ giúp bạn cách để xây dựng một giỏ hàng cho trang thương mại điện tử và nó sẽ như thế này:
Bạn học gì trong đó?
Trong dự án này, bạn sẽ học cách để thiết lập môi trường phát triển Next.js, tạo ra pages và components, lấy dữ liệu, style và triển khai ứng dụng.
Công nghệ và tính năng
- Next.js
- Components and Pages
- Data Fetching
- Styling
- Deployment
- SSR and SPA
Luôn là một điều tuyệt vời khi có một ví dụ trong thế giới thực giống như là một trang giỏ hàng để học những cái mới. Bạn có thể xem hướng dẫn đó ở đây:
https://snipcart.com/blog/next-js-ecommerce-tutorial
6. Xây dựng một trang blog đa ngôn ngữ với Nuxt.js
Next.js là framework của React thì Nuxt.js là framework của Vue. Đây là một framework tuyệt vời kết hợp sức mạnh của server-side rendering và single-palge-applications. Giao diện cuối cùng của dự án sẽ trông như thế này:
Bạn học gì trong đó?
Dự án này sẽ dạy bạn cách để xây dựng một trang web đầy đủ sử dụng Nuxt.js từ thiết lập ban đầu cho đến việc triển khai cuối cùng. Nó sử dụng nhiều tính năng thú vị mà Nuxt cung cấp như pages, components cũng như styling với SCSS
Công nghệ và tính năng
- Nuxt.js
- Components and Pages
- Storyblok module
- Mixins
- Vuex for state management
- SCSS for styling
- Nuxt middlewares
Đây là một dự án thú vị dành cho bạn và bao gồm nhiều tính năng tuyệt vời của Nuxt.js. Tôi thích làm việc với Nuxt và tôi khuyên bạn nên thử cái này, nó cũng sẽ giúp bạn lập trình Vue tốt hơn.
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial