Lộ trình trở thành Frontend Developer

Kiến thức về Internet

Internet là một hệ thống thông tin toàn cầu có thể được truy nhập công cộng gồm các mạng máy tính được liên kết...

• Cách trình duyệt hoạt động?
• Cách internet hoạt động?
• Các thành phần của một website?
• Cách tạo một trang web như thế nào?
• Domain, Hosting, DNS là gì?

HTML

HTML (HyperText Markup Language) cung cấp cấu trúc nội dung và ý nghĩa bằng cách xác định nội dung đó, ví dụ như tiêu đề, đoạn văn, hình ảnh,...

• Thẻ HTML cơ bản phổ biến
• Sử dụng các thẻ Sematic HTML
• Form và Validations
• Conventions và luyện tập các bài thực hành với HTML
• Tìm hiểu về Accessibility trong HTML
• SEO cơ bản

CSS

CSS (Cascading Style Sheets) là ngôn ngữ trình bày được dùng để tạo kiểu cho sự xuất hiện của nội dung sử dụng, ví dụ như phông chữ, màu sắc, kích thước, bố cục,...

• Học các thuộc tính cơ bản phổ biến
• Luyện tập tạo layout
  • Float
  • Positioning
  • Display
  • Box modal
  • Flex Box
  • CSS Grid
• Responsive design và Media queries

Javascript

JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động. Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng.

• Cú pháp và kiến thức cơ bản
• DOM và xử lý với DOM
• Browser: Document, Events, Interfaces
• Fetch API / Ajax (XHR)
• ES6+ modular trong Javscript
• Hiểu sâu về các concepts như
  • Hoisting
  • Event Bubbling
  • Scope
  • Prototype
  • Strict...

Version Control Systems

Version Control Systems được hiểu như 1 công cụ giúp bạn theo dõi sự thay đổi của toàn bộ cấu trúc chương trình, từ các file code cho đến các file hình ảnh, video. Với version control, bạn có thể tạo ra nhiều phiên bản của các file ứng với từng thay đổi mà bạn tạo ra.

• Cách lệnh git thường sử dụng
• Repo hosting services
  • Github
  • Gitlab
  • Gitbucket

Bảo mật web

Bảo mật website là một chức năng, nhiệm vụ vô cùng thiết yếu đảm bảo tính an toàn cho website trong quá trình vận hành và sử dụng.

• Các kiến thức cơ bản tối thiểu bạn nên biết
  • HTTPS
  • CORS
  • Content Security Policy
  • OWASP Security Risks

Package managers

Package managers là một tập hợp các thư viện, phần mềm dùng để quản lý và tự động hoá việc cài đặt, nâng cấp, gỡ bỏ chúng cho dự án của bạn

• npm
• yarn

CSS Architecture

Việc kiến trúc CSS giúp chúng ta dễ bảo trì, các thành viên code theo một rule nhất định, có tính linh hoạt và cFó thể tái sử dụng lại. Bao gồm, cấu trúc thư mục, định nghĩa components, quy tắc đặt tên.

• BEM
• OOCSS
• SMACSS

CSS Preprocessors

Đây là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Nó có nhiệm vụ giúp bạn logic hóa và cấu trúc các đoạn mã CSS để cho CSS tiến đến gần hơn với một ngôn ngữ lập trình.

• SASS/SCSS
• PostCSS
• Stylus
• Less

Build tools

Là các công cụ giúp bạn trong việc phát triển, đóng gói một sản phẩm web

• Task runners
  • npm scripts
  • Gulp
• Module Bundlers
  • Webpack
  • Vite
  • Rollup
  • Parcel
• Linters and Formatters
  • Prettier
  • ESLint
  • StandardJS

Framework

Framework là các đoạn code đã được viết sẵn, cấu thành nên một bộ khung và các thư viện lập trình được đóng gói. Chúng cung cấp các tính năng có sẵn như mô hình, API và các yếu tố khác để tối giản cho việc phát triển các ứng dụng web phong phú, năng động. Các framework giống như là chúng ta có khung nhà được làm sẵn nền móng cơ bản, bạn chỉ cần vào xây dựng và nội thất theo ý mình.

• React.js
  • Redux
  • MobX
• Angular
  • RxJS
  • NgRx
• Vue.js
  • VueX

Modern CSS

Đây là một số thư viện có thể kết hợp với CSS để giúp bạn cải thiện cách làm việc với CSS

• Styled Components
• CSS Modules
• Styled JSX
• Emotion
• Radium
• Glamorous

Web Components

Một số phần xử lý nâng cao đối trong FE

• HTML Templates
• Custom Elements
• Shadow DOM

CSS Frameworks

Đối với các thư viện CSS thuần thì các thư viện này sẽ viết sẵn các class, có các style cho chúng và ta chỉ cần sử dụng. Còn các thư viện CSS với Javascript thì thì ngoài việc chúng đã viết style sẵn thì còn có cả javascript như các component trong thư viện,...

• Thư viện CSS thuần
  • Bootstrap
  • Materialize CSS
  • Bulma
• Thư viện CSS với Javascript
  • Reactstrap
  • Material UI
  • Tailwind CSS
  • Chakra UI

Testing

Testing là việc kiểm tra phần mềm xem đã hoạt động đúng theo yêu cầu không và để cung cấp cho các bên liên quan thông tin về chất lượng của sản phẩm.

• Học cơ bản về testing
  • Unit Test
  • Integration Test
  • Functional test
• Thư viện Test 1
  • Jest
  • react-testing-library
  • Cypress
  • Enzyme
• Thư viện Test 2
  • Mocha
  • Chai
  • Ava
  • Jasmine

Type Checkers

Type Checkers sẽ giúp bạn quản lý chặt chẽ về mặt kiểu dữ liệu, và sát hơn với ngôn ngữ lập trình hướng đối tương.

• TypeScript
• Flow

Progressive Web Apps

Một ứng dụng PWA có thể cung cấp các tính năng bổ sung dựa trên thiết bị hỗ trợ, cung cấp khả năng ngoại tuyến (offline), đẩy thông báo (push notification), giao diện và tốc độ tương đương ứng dụng Native và lưu trữ cục bộ các nguồn tài nguyên (local caching).

• Tìm hiểu các Web APIs sử dụng trong PWAs
  • Storage
  • Web Sockets
  • Service Workers
  • Location
  • Notifications
  • Device Orientation
  • Payments
  • Credentials
• Cải thiện hiệu suất
  • PRPL Pattern
  • RAIL Model
  • Performance Metrics
  • Using Lighthouse
  • Using DevTools

Server Side Rendering (SSR)

Server-side rendering là cơ chế đã được sử dụng từ rất lâu. Gọi nó là server-side rendering là vì phần lớn logic sẽ được xử lý ở server: khi người dùng vào một trang web, trình duyệt sẽ gửi GET request tới web server, web server sẽ nhận request, đọc dữ liệu từ database và web server sẽ render HTML, trả về cho browser để hiển thị cho người dùng

• React.js
  • Next.js
  • After.js
• Angular
  • Universal
• Vue.js
  • Nuxt.js

GraphQL

GraphQL là một cú pháp mô tả cách yêu cầu lấy dữ liệu, và thường được dùng để load data từ một server cho client.

• Apollo
• Relay Modern

Static Site Generators

Static site cơ bản là một website chỉ bao gồm html/css/javascript không có database, nó sẽ được build từ file markdown, dùng một số tool phổ biến để build

• Next.js
• GatsbyJS
• Nuxt.js
• Vuepress
• Jekyll
• Hugo

Mobile Applications

Một số framework/ thư viện để xây dựng một ứng dụng mobile

• React Native
• NativeScript
• Flutter
• Ionic

Desktop Applications

Một số framework/ thư viện để xây dựng một ứng dụng desktop

• Electron
• Carlo
• Proton Native

Web Assembly

WebAssembly sinh ra để giải quyết bài toán hiệu năng của Javascript, tận dụng sức mạnh tính toán ở phía thiết bị của người dùng, đặc biệt ở các tác vụ xử lý truyền thông đa phương tiện (video, audio, image), game, mô phỏng, thuật toán,…

Tiếp tục học tập

.....................................................................