Thêm 9 dự án để trau dồi kỹ năng Front-End của bạn

Giới thiệu

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

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

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

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

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

Bài viết được dịch với sự hỗ trợ của EDISON Software, công ty tạo phòng thử đồ ảo cho các cửa hàng đa thương hiệuvà phần mềm kiểm tra.

Ứng dụng tìm kiếm phim sử dụng React (có hook)

Điều đầu tiên bạn có thể bắt đầu là tạo một ứng dụng tìm kiếm phim bằng React. Dưới đây là hình ảnh của ứng dụng cuối cùng sẽ trông như thế nào:

Bạn sẽ học cái gì
Bằng cách xây dựng ứng dụng này, bạn sẽ cải thiện kỹ năng React của mình bằng cách sử dụng API Hooks tương đối mới. Dự án ví dụ sử dụng các thành phần React, nhiều hook, API bên ngoài và tất nhiên là một số kiểu CSS.

Ngăn xếp công nghệ và tính năng

• Phản ứng bằng móc
• tạo-phản ứng-ứng dụng
• Mã hóa
• CSS

Không sử dụng bất kỳ lớp nào, các dự án này cung cấp cho bạn điểm khởi đầu hoàn hảo vào React chức năng và chắc chắn sẽ giúp ích cho bạn vào năm 2020. bạn có thể tìm dự án ví dụ ở đây. Làm theo hướng dẫn hoặc biến nó thành của riêng bạn.

Ứng dụng trò chuyện với Vue

Một dự án tuyệt vời khác mà bạn có thể làm là tạo một ứng dụng trò chuyện bằng thư viện JavaScript yêu thích của tôi: VueJS. Ứng dụng sẽ trông giống như thế này:

Bạn sẽ học cái gì
Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo ứng dụng Vue từ đầu - tạo thành phần, xử lý trạng thái, tạo tuyến đường, kết nối với dịch vụ của bên thứ ba và thậm chí xử lý xác thực.

Ngăn xếp công nghệ và tính năng

• quang cảnh
• Vũex
• Bộ định tuyến Vue
• Xem CLI
• Pusher
• CSS

Đây thực sự 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 để bắt đầu phát triển vào năm 2020. bạn có thể tìm hướng dẫn ở đây.

Ứng dụng thời tiết đẹp với Angular 8

Ví dụ này sẽ giúp bạn tạo một ứng dụng thời tiết đẹp bằng Angular 8:

Bạn sẽ học cái gì
Dự án này sẽ dạy cho bạn những kỹ năng có giá trị trong việc xây dựng ứng dụng từ đầu - từ thiết kế đến phát triển, cho đến ứng dụng sẵn sàng triển khai.

Ngăn xếp công nghệ và tính năng

• Góc 8
• Tường lửa
• Kết xuất phía máy chủ
• CSS với Lưới và Flexbox
• Thân thiện với thiết bị di động và khả năng thích ứng
• Chế độ tối
• Giao diện đẹp

Điều tôi thực sự yêu thích ở dự án toàn diện này là bạn không nghiên cứu mọi thứ một cách cô lập. Thay vào đó, bạn tìm hiểu toàn bộ quá trình phát triển, từ thiết kế đến triển khai cuối cùng.

Ứng dụng việc cần làm bằng Svelte

Svelte giống như đứa trẻ mới trong cách tiếp cận dựa trên thành phần - ít nhất là tương tự như React, Vue và Angular. Và đây là một trong những sản phẩm mới hot nhất năm 2020.

Ứng dụng việc cần làm không nhất thiết phải là chủ đề nóng nhất nhưng nó thực sự sẽ giúp bạn trau dồi kỹ năng Svelte của mình. Nó sẽ trông giống thế này:

Bạn sẽ học cái gì
Hướng dẫn này sẽ chỉ cho bạn cách tạo một ứng dụng bằng Svelte 3, từ đầu đến cuối. Bạn sẽ sử dụng các thành phần, kiểu dáng và trình xử lý sự kiện

Ngăn xếp công nghệ và tính năng

• Mảnh dẻ 3
• Thành phần
• Tạo kiểu bằng CSS
• Cú pháp ES 6

Không có nhiều dự án khởi đầu tốt cho Svelte, vì vậy tôi đã tìm thấy đây là một lựa chọn tốt để bắt đầu.

Ứng dụng thương mại điện tử sử dụng Next.js

Next.js là framework phổ biến nhất để xây dựng các ứng dụng React hỗ trợ kết xuất phía máy chủ ngay lập tức.

Dự án này sẽ chỉ cho bạn cách tạo một ứng dụng thương mại điện tử trông như thế này:

Bạn sẽ học cái gì
Trong dự án này, bạn sẽ tìm hiểu cách phát triển với Next.js—tạo các trang và thành phần mới, trích xuất dữ liệu, tạo kiểu và triển khai ứng dụng Next.

Ngăn xếp công nghệ và tính năng

• Tiếp theo.js
• Thành phần và trang
• Lấy mẫu dữ liệu
• Cách điệu
• Triển khai dự án
• SSR và SPA

Thật tuyệt vời khi có một ví dụ thực tế như ứng dụng thương mại điện tử để học điều gì đó mới. Bạn có thể tìm hướng dẫn ở đây.

Blog đa ngôn ngữ chính thức với Nuxt.js

Nuxt.js dành cho Vue, Next.js dành cho React: một framework tuyệt vời để kết hợp sức mạnh của kết xuất phía máy chủ và các ứng dụng một trang
Ứng dụng cuối cùng bạn có thể tạo sẽ trông như thế này:

Bạn sẽ học cái gì

Trong dự án mẫu này, bạn sẽ tìm hiểu cách tạo một trang web hoàn chỉnh bằng Nuxt.js, từ thiết lập ban đầu đến triển khai cuối cùng.

Nó tận dụng nhiều tính năng thú vị mà Nuxt cung cấp, chẳng hạn như các trang và thành phần cũng như kiểu dáng với SCSS.

Ngăn xếp công nghệ và tính năng

• Nuxt.js
• Thành phần và trang
• Mô-đun cốt truyện
• cá hagfish
• Vuex cho quản lý nhà nước
• SCSS để tạo kiểu
• Phần mềm trung gian Nuxt

Đây thực sự là một dự án tuyệt vời, bao gồm nhiều tính năng tuyệt vời của Nuxt.js. Cá nhân tôi thích làm việc với Nuxt vì vậy bạn nên thử vì nó cũng sẽ giúp bạn trở thành nhà phát triển Vue tuyệt vời.

Viết blog cùng Gatsby

Gatsby là một trình tạo trang tĩnh tuyệt vời sử dụng React và GraphQL. Đây là kết quả của dự án:

Bạn sẽ học cái gì

Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng Gatsby để tạo một blog mà bạn sẽ sử dụng để viết các bài viết của riêng mình bằng React và GraphQL.

Ngăn xếp công nghệ và tính năng

• Gatsby
• Phản ứng
• GraphQL
• Plugin và chủ đề
• MDX/Đánh dấu
• CSS khởi động
• Templates

Nếu bạn đã từng muốn bắt đầu một blog, Đây là một ví dụ tuyệt vời về cách tạo nó bằng React và GraphQL.

Tôi không nói WordPress là một lựa chọn tồi, nhưng với Gatsby bạn có thể xây dựng các trang web hiệu suất cao bằng React - một sự kết hợp tuyệt vời.

Blog với Gridsome

Gridsome dành cho Vue... Được rồi, chúng tôi đã có tính năng này với Next/Nuxt.
Nhưng điều này cũng đúng với Gridsome và Gatsby. Cả hai đều sử dụng GraphQL làm lớp dữ liệu, nhưng Gridsome sử dụng VueJS. Đây cũng là một trình tạo trang tĩnh tuyệt vời sẽ giúp bạn tạo những blog tuyệt vời:

Bạn sẽ học cái gì

Dự án này sẽ hướng dẫn bạn cách tạo một blog đơn giản để bắt đầu với Gridsome, GraphQL và Markdown. Nó cũng bao gồm cách triển khai một ứng dụng thông qua Netlify.

Ngăn xếp công nghệ và tính năng

• đẹp trai
• quang cảnh
• GraphQL
• Markdown
• netlify

Đây chắc chắn không phải là hướng dẫn toàn diện nhất nhưng nó bao gồm các khái niệm cơ bản về Gridsome và Markdown có thể là điểm khởi đầu tốt.

Trình phát âm thanh giống SoundCloud sử dụng Quasar

Quasar là một khung Vue khác có thể được sử dụng để tạo các ứng dụng di động. Trong dự án này, bạn sẽ tạo một ứng dụng phát âm thanh, ví dụ:

Bạn sẽ học cái gì

Trong khi các dự án khác tập trung chủ yếu vào các ứng dụng web, thì dự án này sẽ chỉ cho bạn cách tạo một ứng dụng di động bằng Vue và Quasar framework.
Bạn đã chạy Cordova với cấu hình Android Studio/Xcode. Nếu không, hướng dẫn sử dụng có liên kết đến trang web Quasar nơi họ chỉ cho bạn cách thiết lập mọi thứ.

Ngăn xếp công nghệ và tính năng

• quasar
• quang cảnh
• Cordova
• người lướt sóng
• Thành phần giao diện người dùng

Dự án nhỏ, thể hiện khả năng của Quasar trong việc tạo các ứng dụng di động.

Nguồn: www.habr.com