Bí kíp học Front-end của Grab (Phần 1)

Lập trình Front end chưa bao giờ phức tạp và đầy thú vị như thời điểm này. Các tools, libraries, frameworks, và plugins mới cứ thi nhau xuất hiện từng ngày. Có quá nhiều thứ để cho ta học.

Vì vậy mà nhóm lập trình web của Grab luôn cập nhật những công nghệ mới nhất cũng như tích hợp JavaScript ecosystem vào các ứng dụng của công ty.

Do đó mà các thành viên trong nhóm, dù mới hay cũ, cũng đều cảm thấy khá choáng ngợp với khối lượng kiến thức mới cần phải cập nhật. Thế nên chúng tôi đã lập ra một bản hướng dẫn nhằm giúp các bạn học nhanh hơn và theo đúng hướng để có thể navigate ecosystem một cách dễ dàng, cũng như việc shipping code cho user trở nên hiệu quả hơn.

Bài hướng dẫn này lấy cảm hứng từ “A Study Plan to Cure JavaScript Fatigue” cũng như kết hợp với những ý kiến riêng từ các thành viên trong nhóm với mục tiêu là chọn ra những libraries/frameworks phù hợp cho từng lĩnh vực của phát triển front-end cũng như đúng theo nhu cầu tại Grab.

Chúng tôi sẽ giải thích cặn kẽ vì sao những library đó được chọn và gợi ý những nguồn học để người xem có thể nâng cao kiến thức ngay luôn. Ngoài ra, những lựa chọn thay thế cũng sẽ được nêu ra nhằm giúp người đọc có thêm lựa chọn.

Nếu bạn đã rất quen thuộc với front end cũng như liên tục cập nhật công nghệ thì bài viết này có thể sẽ không giúp ích gì nhiều bởi nó dành cho người mới muốn học về front-end.

Và nếu công ty của bạn đang muốn tìm kiếm một JavaScript stack mới thì bài hướng dẫn này cũng sẽ rất hữu ích! Cứ thoải mái sửa đối tùy theo ý bạn. Bài viết sẽ được update thường xuyên nhằm giữ cho tính chính xác cũng như hữu ích cho người đọc.

  Lối đi nào cho newbie IT - Front End, Back End hay Full Stack?

Điều kiện tiên quyết phải có trước khi bạn xem tiếp

  • Nắm vững về khái niệm lập trình
  • Thoái mái với basic command line actions cũng như quen thuộc với các source code version control systems như Git.
  • Có kinh nghiệm với lập trình web. Đã từng tạo ra các server-side rendered web apps với những frameworks như Ruby on Rails, Django, Express, etc.
  • Hiểu rõ cách thức hoạt động của web. Có kiến thức về web protocols như HTTP và RESTful APIs

Những topic chúng tôi sẽ nói đến trong bài viết

  • Single-page Apps (SPAs)
  • New-age JavaScript
  • User Interface
  • State Management
  • Coding với Style
  • Testing
  • Linting JavaScript
  • Linting CSS
  • Types
  • Build System
  • Package Management
  • Continuous Integration
  • Hosting
  • Deployment

Cứ thoải mái bỏ qua những topic nào bạn đã biết.

Xem ngay các tin đăng tuyển dụng Front-end lương cao trên TopDev

Single-page Apps (SPAs)

Web developer ngày nay thường ám chỉ sản phẩm của họ là web app chứ không gọi là website nữa. Tuy không có nhiều sự khác biệt nhưng web app có tính tương tác cao hơn cũng như tầm ảnh hưởng lớn hơn, cho phép user thực hiện một hành động và nhận lại kết quả được gửi từ web app.

Bình thường, các trình duyệt web sẽ nhận HTML từ server và render nó. Khi user chuyển hướng đến một URL khác thì full-page refresh sẽ diễn ra và trình duyệt gửi một HTML mới dành cho trang mới mà user muốn xem. Đây còn gọi là server-side rendering.

Thế nhưng trong SPAs đời mới, client-side rendering được sử dụng thay thế cho cách trên. Trình duyệt sẽ load page ban đầu từ server, kèm với scripts (frameworks, libraries, app code) cũng như stylesheets cần thiết cho cả app đó. Khi người dùng chuyển hướng URL, page refresh sẽ không bị kích hoạt. Thay vào đó, URL của page sẽ được update thông qua HTML5 History API. Các data cần thiết cho page mới mà user muốn vào xem, thường là thuộc định dạng JSON, sẽ được thu thập bới trình duyệt thông qua AJAX request tới server. SPA sau đó sẽ update page với data mới bằng JavaScript, vốn đã có sẵn sau khi được download ở initial page. Đây là cách thức hoạt động tương tự như của native mobile apps.

Lợi ích:

  • App trả lời nhanh hơn và user sẽ cảm thấy page load được nhanh hơn nhờ vào không phải dùng tới full-page refreshes.
  • Giảm thiểu HTTP requests tới serve cũng như không cần download nhiều data mỗi lần phải load page.
  • Phân chia rõ ràng giữa client và server; bạn sẽ dễ dàng tạo một client mới cho một platform khác mà không cần phải chỉnh sửa lại code của server. Ngoài ra, việc thay đổi technology stack của client và server đều có thể làm riêng rẽ miễn API contract vẫn được giữ nguyên.

Bất lợi:

  • Initial page load sẽ nặng hơn do phải download về framework, app code, cũng như các thành phần cần thiết cho nhiều page khác nhau.
  • Bạn sẽ phải điều chỉnh sao cho requests đều đi qua một điểm và cho phép client-side routing được quyền quản lí ở đầu bên kia.
  • SPAs dựa trên JavaScript để render nội dung, tuy vậy, không phải tất cả search engine đề chạy JavaScript trong quá trình tìm kiếm khiến cho nội dung thu được sẽ bị thiếu hụt. Kết quả gián tiếp lên việc SEO của app bạn bị giảm hiệu quả.

Mặc dù server-side rendered apps vẫn còn là một lựa chọn tốt, client-server redered apps vẫn thích hợp hơn khi nói đến sự phức tạp cũng như qui mô lớn, đòi hỏi việc client và server code được phát triển và chỉnh sửa độc lập. Điều này rất là chính xác với Grab bởi chúng tôi có tới hàng chục client apps nhưng có chung API server.

Như đã nói, web developers hiện nay tập trung vào việc phát triển các web app hơn là page, nhờ đó cộng đồng JavaScript ngày càng trở nên quan trọng hơn. Trong server-side rendered pages, ta thường dùng snippets của jQuery để thêm tính tương tác user cho từng page. Tuy vậy, với các app lớn thì chỉ có jQuery là không đủ, bởi nó chỉ là một library cho việc điều khiển DOM chứ không phải là framework. App của bạn sẽ không có được một cấu trúc rõ ràng nếu như chỉ dùng jQuery.

Do đó mà JavaScript frameworks được dùng để giải quyết vấn đề trên. Mặt khác việc sử dụng các frameworks quen thuộc cũng rất tiện lợi bởi giúp cho team dễ hiểu về code cũng như app hơn. May thay những framework nổi tiếng thì cũng có nguồn học rất phong phú và cực kì đa dạng.

Links tham khảo:

New-age JavaScript

Trước khi nhảy vào tìm hiểu về cách viết ra một JavaScript web app, bạn sẽ phải làm quen với ngôn ngữ lập trình web –  JavaScript, hoặc ECMAScript. JavaScript là một ngôn ngữ cực kì linh hoạt bởi bạn có thể dùng làm web servers, native mobile apps và desktop apps.

Vào 2015, ECMAScript 5.1 chỉ mới được tung ra kể từ 2011. Thế nhưng trong những năm gần đây, JavaScript đã phát triển bùng nổ mạnh mẽ. Trong 2015, ECMAScript 2015 được tung ra với hàng chục tính năng để viết code dễ dàng hơn. Nếu bạn muốn biết rõ thêm thì có viết một bài khá hay là lịch sử và mẹo hay về JavaScript. Cho đến thời điểm hiện tại, vẫn chưa có trình duyệt nào thực sự có thể tận dụng hết tất cả tính năng và sức mạnh của ES2015. Các tool như Babel cho phép developers viết ES2015 trong các app của mình và Babel sẽ chuyển tiếp chúng xuống ES5 để giúp tương thích cho các trình duyệt web.

Biết cả ES5 và ES2015 là rất cần thiết. Bởi ES2015 vẫn còn khá nhiều open source code và Node.js apps vẫn được viết bằng ES2015. Nếu bạn debugging trong trình duyệt console thì có thể bạn sẽ không dùng được ES2015 syntax. Mặc khác, các tài liệu và libraries vẫn còn xài ES2015. Tại Grab, chúng tôi sử dụng babel-preset-env nhằm tăng hiệu năng nhờ vào sự cải thiện trong syntactic của JavaScript.  babel-preset-env rất thông minh khi biết xác định các Babel plugins cần thiết (cũng như tính năng nào không thương tích và cần bị chuyển đi) bởi trình duyệt web đang tăng khả năng native support dành cho nhiều tính năng của ES hơn. Nếu bạn muốn dùng một số tính năng ngôn ngữ chạy ổn và bảo đảm, bạn có thể tìm thấy tại babel-preset-stage-3, một list các tính năng và thông số kĩ thuật sẽ được áp dụng trong trình duyệt web.

Hãy dành 1 đến 2 ngày để khám phá và tìm hiểu ES5 cũng như ES2015. Những tính năng nổi bật trong ES2015 bao gồm “Arrows and Lexical This”, “Classes”, “Template Strings”, “Destructuring”, “Default/Rest/Spread operators”, and “Importing and Exporting modules”.

Khoảng thời gian để hoàn thành: 3–4 ngày. bạn có thể học/tìm hiểu về syntax khi học về các libraries cũng như trong quá trình viết ra một app cho mình.

Links tham khảo:

User Interface — React

Khi nói đến các JavaScript projects hấp thụ hệ thống front end ecosystem nhiều nhất thì React sẽ phải đứng đầu. React là một library với open-sourced được tạo ra bởi Facebook. Trong React, developer viết các components cho web interface và kết hợp chúng lại với nhau.

React khuyến khích các developer luôn tìm tòi, suy nghĩ cách thức sử dụng tốt nhất. Các web developer luôn được dạy rằng nên viết HTML, JavaScript và CSS riêng rẽ. React thì hoàn toàn ngược lại, nó khuyến khích ta viết HTML và CSS trong Javascript của mình. Nghe có vẻ thật điên cuồng nhưng sau khi bạn thử thì nó sẽ trở nên có lí hơn. Đó là nguyên nhân việc có sự thay đổi trong việc phát triển front-end với mô hình component làm chủ đạo. Các tính năng của React:

  • Declarative (tuyên bố): bạn mô tả điều mà bạn muốn thấy chứ không phải cách để có được nó. Vào thời của jQuery, developers phải nghĩ ra rất nhiều bước để điều khiển DOM nhằm từ app state này sang cái khác. Trong React, bạn chỉ cần thay đổi state trong component luôn và mọi thứ sẽ tự động update theo state. Ngoài ra cũng rất dễ để xác định cách component sẽ như thế nào nhờ vào render() method
  • Functional: View thật sự chỉ là function của  props và  state. Trong phần lớn các trường hợp, một React component sẽ được define bằng props (external parameters) và state (internal data). Với  props và  stateđó thì view sẽ được tạo ra. Pure functions rất dễ để test và điều đó cũng đúng với functional components. Nguyên nhân cho việc test trong React rất dễ dàng là bởi vì component’s interfaces đã được define rất kĩ và bạn chỉ cần thay đổi props và state  để so sánh kết quả output thu được của render.
  • Maintainable  (Bảo trì): Khi viết view theo component-based fashion cũng sẽ giúp tăng khả năng tái sử dụng. Chugn tôi nhận ra rằng khi define một component của  propTypes khiến cho người đọc React code hiểu rõ hơn về những thứ cần có cho component đó. Mặt khác, view và logic của bạn sẽ tự động chứa trong component, và nó sẽ không bi ảnh hưởng hay tác động đến các component khác. Nhờ đó mà việc thay đổi các component dễ dàng hơn, miễn là  props vẫn được giữ nguyên.
  • Hiệu năng cao – Bạn hẳn cũng từng nghe qua rằng React sử dụng một DOM ảo (khác với shadow DOM) và nó re-renders lại mọi thứ khi state có thai đổi. Vì sao lại cần một DOM ảo? Đó là vì dù JavaScript engine khá nhanh, việc viết và đọc từ DOM vẫn còn chậm. Do vậy, React sẽ có sẵn một phiên bản ảo của DOM trong bộ nhớ. “Re-rendering mọi thứ” là một cụm từ bị dùng sai. Trong React thì re-rendering lại thực chất chỉ diễn ra trong phiên bản ảo của DOM. Như vậy khi có bất kì thay đổi trong data của component, một hiện thị (ảo) được tạo ra và so sánh với phiên bản cũ. Những khác biệt (nằm trong phạm vi cho phép) sau đó sẽ được patch nhờ vào DOM (thật) của trình duyệt.
  • Dễ học – Học React rất dễ. React API trông rất là nhỏ gọn khi bạn thử so sánh với một library khác. Bạn chỉ cần học một vài API và chúng có rất ít thay đổi. Hơn nữa, cộng đồng React rất lớn, có hẳn một ecosystem riêng cho tool, open-sourced UI components, và vô số nguồn học online vô cùng hữu ích cho bạn.
  • Kinh nghiệm của Developer –  Có rất nhiều tools giúp cho developer lên trình rất nhanh với React. React Developer Tools là một  browser extensioncho phép bạn xem và kiểm tra component, view cũng như tinh chỉnh  props và state của chúng. Hot reloading với webpack cho phép bạn theo dõi các thay đổi của code trong trình duyệt của mình mà không cần phải refresh nó. Lập trình Front end đòi hỏi việc phải tinh chỉnh code rất nhiều, save rồi refesh trình duyệt. Hot reloading giúp bạn bỏ qua bước cuối cùng. Mỗi khi library được update, Facebook  sẽ cung cấp một codemod scripts để giúp bạn chuyển code của mình lên APIs mới. Điều này khiến cho quá trình update trở nên thật nhẹ nhàng.

Qua nhiều năm, các view libraries  với hiệu năng cao hơn cả React đã bắt đầu xuất hiện. React có thể không còn nhanh nhất nữa nhưng nếu xét về hệ ecosystem, trải nghiệm người dùng cũng như lợi ích thì nó vẫn là một trong những top libraries. Ngoài ra, Facebook cũng đang tập trung để phát triển React khi hãng bỏ công ra viết lại các thuật toán gốc cho nó. React giúp chúng ta viết code một cách gọn gàn hơn, tốt hơn cũng như để việc bảo trì và phát triển web app dễ dàng hơn.

Chúng tôi khuyến khích bạn nên thử qua lập trình một game Tic Tac Toe trẹn React homepage để hiểu rõ hơn về nó. Để hiểu sâu hơn về React, bạn có thể vào học khóa React Fundamentals  cực kì hữu ích của tác giả của React Router, một chuyên gia trong cộng đồng React. Create React App là một tool khác giúp giản đơn các tính năng của React nên rất phù hợp cho người mới học React.

Khoảng thời gian để hoàn thành: 3–4 ngày. Hãy thử làm những project đơn giản như to-do list, Hacker News clone với React. Bạn sẽ tăng level rất nhanh và có thể gặp phải một số vấn đề mà React cũng không giải quyết được, và như vậy chúng ta sẽ đến topic tiếp theo trong phần 2…..

Links học

Một số lựa chọn khác

Đừng bỏ lỡ những bài viết hay về Front-end:

TopDev via Medium

Truy cập ngay việc làm IT đãi ngộ tốt trên TopDev