Giới thiệu
Dù bạn mới bắt đầu lập
trình hay đã là 1 lập trình viên có kinh nghiệm, trong ngành công nghiệp này,
việc học hỏi những kiến thức và ngôn ngữ/ framework mới là điều bắt buộc để
theo kịp những thanh đổi nhanh chóng của ngành.
Ví dụ React – 1 open
source được Facebook đưa ra chỉ sau 4 năm nó đã trở thành lựa chọn số 1 cho các
lập trình viên Javascript trên toàn thế giới.
Vue và Angular tất
nhiên cũng là chiếm 1 lượng người quan tâm lớn tương đương, và rồi thì tới
Svelte và những framework phổ biến khác như Next.js, Nuxt.js và Gastby và
Quasar, vân vân và mây mây ...
Nếu bạn muốn tỏa sáng
như 1 chuyên gia js, bạn nên có kinh nghiệm it nhất là trên vài framework và
thư viện khác nhau bên cạnh việc luyện tập tốt js cơ bản ở nhà.
Để giúp bạn trở thành
1 chuyên gia front-end trong 2020, tôi đã sưu tầm ra 9 project khác nhau tương ứng
với mỗi a chủ đề và mỗi framework hoặc thư viện chuyên biệt để bạn có thể
đưa chúng vào những dự định trong thời gian tới. Nhớ là, không có gì có thể
giúp bạn tốt hơn là việc bạn phải thực sự xây dựng nên những thứ kiểu kiểu như này,
vậy nên hãy tiếp tục không ngừng mài dũa và biến mọi thứ thành hiện thực ...
1. Xây dựng 1 ứng dụng tìm kiếm phim bằng React (có
dùng hook)
Điều đầu tiên bạn có
thể bắt đầu là xây dựng nên 1 ứng dụng tìm kiếm phim sử dụng React trông như
hình mô tả dưới đây:
Những điều mà bạn sẽ học được
Trong quá trình xây dựng
ứng dụng, bạn sẽ cải thiện được các kỹ năng sử dụng React liên quan đến việc sử
dụng các Hook API mới. Project ví dụ này cần sử dụng nhiều react component, nhiều
hook, và nhiều API, và tất nhiên là cả việc thiết kế sử dụng kiến thức css nữa.
Những công nghệ và chức năng liên quan
- React Hook
- Create-React-App
- JSX
- CSS
Với việc không sử dụng
lớp nào, những project như thế này sẽ cho bạn 1 điểm mở đầu hoàn hảo trong việc
làm quen với React và chắc chắn sẽ giúp bạn rất nhiều trong năm 2020.
Bạn có thể tìm thấy project
ví dụ này tại
đây. Hãy làm y như bài hướng dẫn này hoặc bạn cũng có thể biến tấu nó theo
phong cách riêng của mình.
2. Xây dựng 1 ứng dụng chat với Vue
Một project tuyệt vời
khác cho bạn là xây dựng 1 ứng dụng chat sử dụng thư viện javascript ưa thích của
tôi, đó là VueJS.
Ứng dụng sẽ trông như
thế này đây:
Những điều mà bạn sẽ học được
Theo dõi bài hướng dẫn
này bạn sẽ học được cách để thiết lập 1 ứng dụng Vue từ đầu – tạo ra những component,
xử lý states, tạo ra những route, kết nối tới 1 third-party và thậm chí là cả
phần xác thực nữa.
Những công nghệ và chức năng liên quan
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Đây thực sự là 1
project tuyệt vời để bắt đầu làm việc với Vue – hoặc để cải thiện những kỹ năng
đã có – hướng tới sự phát triển trong 2020
3. Xây dựng 1 ứng dụng dự báo thời thiết thật đẹp
với Angular 8
Đây là ví dụ sẽ giúp bạn
xây dựng 1 ứng dụng dự báo thời tiết đẹp mắt sử dụng Google Angular 8:
Những điều mà bạn sẽ học được
Project này sẽ dạy cho
bạn những kỹ năng hữu ích khi tạo 1 ứng dựng từ đầu – bắt đầu với việc thiết kế
cho tới việc triển khai thực tế
Những công nghệ và chức năng liên quan
- Angular 8
- Firebase
- Server-side
rendering
- Css với Grid layout và Flexbox
- Mobile friendly và responsive
- Dark mode
- Beautiful UI
Cái mà tôi thực sự, thực
sự thích về project toàn diện này là bạn không học những thứ này 1 cách độc lập
mà bạn sẽ học được mọi công đoạn phát triển ứng dụng – từ thiết kế cho tới công
đoạn phát triển cuối cùng.
Bạn nên thực sự thử nó
ở đây
4. Xây dựng 1 ứng dụng To-Do với Svelte
Svelte chỉ như là 1 đứa
trẻ nếu so sánh với những người khổng lồ như React, Vue hay angular. Tuy nhiên
nó lại là 1 trong những fw hot nhất cho 2020
Ok, ứng dụng to-do
không cần thiết phải là hot nhất ở đây, những nó sẽ thực sự giúp bạn mài sắc những
kỹ năng Svelte của bạn, nó sẽ trông như này
Những điều mà bạn sẽ học được
Bài hướng dẫn này sẽ
cho bạn biết được cách để tạo ra 1 ứng dụng sử dụng Svelte 3. Từ khi bắt đầu
cho tới kết thúc. Nó giúp ta biết cách sử dụng components, thiết kế style, và xử
lý sự kiện.
Những công nghệ và chức năng liên quan
- Svelte 3
- Components
- Css
- ES6
Không có nhiều project
Svelte hay ho để bắt đầu ở đây, nên tôi đã tìm được cái
này, nó có vẻ tốt để bắt đầu với Svelte.
À nữa, biết đâu có thể
bạn sẽ tạo ra 1 ứng dụng khác toàn diện hơn để hướng dẫn Svelte, và tôi sẽ sử dụng
nó làm project đại diện cho phần này cho năm tới thì sao ;D
5. Xây dựng 1 Shopping Cart với Next.Js
Next.js là framework phổ biến nhất để tạo ra những ứng dụng React hỗ trợ server-side rendering một cách đột phá.
Project này sẽ cho bạn
thấy cách để xây dựng 1 ứng dụng giỏ hàng (shopping cart) trông như này:
Những điều mà bạn sẽ học được
Trong project này, bạn
sẽ học được cách để xây dựng môi trường phát triển ứng dụng Next.js – tạo ra những
trang và component mới, fetching data và thiết kế styling và xây dựng 1 ứng dụng
Next
Những công nghệ và chức năng liên quan
- Next.js
- Components và Pages
- Data Fetching
- Styling
- Deployment
- SSR và SPA
Sẽ thật tốt để có 1 ví
dụ thực tế, như là 1 ứng dụng e-commerce để học mọi điều mới mẻ. Bạn có thể tìm
thấy bài hướng dẫn này tại đây
6. Xây dựng 1 blog đa ngôn ngữ nổi bật với Nuxt.Js
Nuxt.js là fw của Vue
tương tự như Next.js của React: 1 fw tuyệt vời để kết hợp sức mạnh của server-side
redering và single-page applications
Ứng dụng trong bài hướng
dẫn này sẽ trông như thế này:
Những điều mà bạn sẽ học được
Project này sẽ dạy bạn
cách để xây dựng 1 website nổi bật sử dụng Nuxt.js – từ công đoạn bắt đầu cho tới
công đoạn phát triển cuối cùng.
Đảm bảo là có rất nhiều
chức năng cool ngầu như pages và components hay như là SCSS.
Những công nghệ và chức năng liên quan
- Nuxt.js
- Components
và pages
- StoryBlok
module
- Mixins
- Vuex cho
việc quản lý State
- Scss cho styling
- Nuxt middlewares
Đây
là 1 project thực sự rất cool ngầu cho bạn và nó tổng quan được rất nhiều
những chức năng tuyệt đỉnh của Nuxt.js. Cá nhân tôi rất yêu thích làm việc với
Nuxt, vậy nên bạn thực sự nên thử nó và nó cũng sẽ biến bạn trở thành 1 Vue
developer tốt hơn.
7. Xây dựng 1 blog bằng Gasby
Gatsby là 1 ứng dụng hỗ
trợ tạo các website tĩnh sử dụng React và GraphQL phía sau. Đây là kết quả của project
này:
Những điều mà bạn sẽ học được
Trong bài hướng dẫn
này bạn sẽ học được cách để tận dụng Gatsby để xây dựng 1 blog xuất sắc để bạn
có thể sử dụng để viết những bài viết của riêng mình khi sử dụng React và
GraphQL
Những công nghệ và chức năng liên quan
- Gatsby
- React
- GraphQL
- Plugins
and themes
- MDX/Markdown
- Bootstrap CSS
- Templates
Nếu bạn muốn bắt đầu 1
blog, đây sẽ là 1
lựa chọn tuyệt vời với React và GraphQL
Tôi không nói Wordpress
là 1 lựa chọn tồi nhưng với Gatsby bạn có thể tạo ra 1 site với hiệu năng cao
khi sử dụng React – 1 sự kết hợp tuyệt vời :D.
8. Xây dựng 1 Blog với GridSome
Nhưng cũng giống như Gastby,
GridSome sử dụng GraphQL như là 1 lớp data, nhưng Gridsome base trên Vuejs. Công
cụ tạo site tĩnh tuyệt vời này sẽ giúp bạn tạo ra những blog xuất sắc:
Những điều mà bạn sẽ học được
Project này sẽ dạy cho
bạn cách để xây dựng 1 blog đơn giản bắt đầu với Gridsome, graphQL và Markdown.
Nó cũng bao gồm cách để
triển khai ứng dụng thông qua Netlify.
Những công nghệ và chức năng liên quan
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Đây chắc chắn không phải
là bài hướng dẫn toàn diện, nhưng nó bao gồm những khai niệm cơ bản của Gridsome
và Markdown, tốt để bắt đầu.
9. Xây dựng 1 ứng dụng SoundClound như 1
Audio-Player với Quasar
Quasar là 1 framework
khác từ Vue nó cũng có thể sử dụng để xây dựng ứng dụng trên điện thoại
Trong project này, bạn
sẽ tạo 1 ứng dụng audio-player trông như này:
Những điều mà bạn sẽ học được
Trong khi những
project khác tập trung chính vào các ứng dụng web, Quasar sẽ cho bạn thấy cách
để tạo 1 ứng dụng mobile sử dụng Vue thông qua Quasar framework.
Bạn đã từng thiết lập
cấu hình với Cordova trên android hay sử dụng Studio/Xcode chưa ? Nếu chưa thì
đây sẽ là liên kết đưa bạn đến Quasar website nơi mà chúng sẽ cho bạn thấy cách
để thiết lập.
Những công nghệ và chức năng liên quan
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Components
1
project nhỏ cho thấy sức mạnh của Quasar trong việc xây dựng ứng dụng
mobile
Kết luận
Trong bài viết này,
tôi đã chỉ ra cho bạn 9 project mà bạn có thể xây dựng, mỗi thứ tập trung vào 1
framework hoặc thư viện js khác nhau.
Giờ thì lựa chọn là của
bạn: bạn sẽ thử mọi thứ mới mẻ bằng việc sử dụng 1 framework bạn chưa từng thử
trước đây chứ ? hay là bạn muốn tăng cường kỹ năng của bạn bằng việc tạo ra 1 dự
án cho 1 công nghệ bạn đã có kinh nghiệm rồi ? hay là bạn sẽ dựa vào framework/thư
viện yêu thích của mình để làm tất cả những project này trong năm 2020 ?
Bài viết được dịch từ https://medium.com/better-programming/9-projects-you-can-do-to-become-a-front-end-master-in-2020-97577110cca1 bởi Quansolid.blogspot.com
0 comments:
Post a Comment