Bí kiếp học front-end của Grab – Phần 3

PHẦN 1 – PHẦN 2

Là phần cuối cùng trong series về bí kiếp học front end của Grab, chúng ta hãy cùng tìm hiểu thêm về những tools được dùng trong giai đoạn cuối của quá trình phát triển front-end cho một web app

Types — Flow

Static typing có rất nhiều lợi ích khi viết app. Nó giúp ta phát hiện ra những lỗi thường gặp từ rất sớm. Types cũng là một hình thức lưu trữ code và nó ảnh hưởng đến tính thẩm mỹ cũng như rất dễ đọc. Khi code base của bạn bắt đầu lớn dần, thì nhờ vào type mà việc sắp xếp lại cũng trở nên dễ thở hơn rất nhiều. Mặt khác, các thành viên mới cũng sẽ nhanh chóng làm quen và bắt kịp với tiến độ nhờ vào việc code được viết gọn gàn và dễ hiểu.

Gần đây, tôi phải sửa lại vài lỗi trong một code base mà cả tháng trời chưa đụng tới. Rất may là nhờ vào types mà tôi không mất quá nhiều thơi kiếm lỗi và sửa chúng.

Hiện nay có 2 ứng viên nổi bật nhất trong static types cho JavaScript là Flow (bởi Facebook) và TypeScript (của Microsoft). Tại Grab, chúng tôi chọn Flow vì nó dễ học hơn so với TypeScript cũng như ít đòi hỏi việc phải thay đổi trong code base. Mặt khác do là đứa con của Facebook, Flow có khả năng tương thích rất tốt với React ecosystem.

Tuy vậy, TypeScript cũng không hề thua kém và việc chuyển giao giữa chúng cũng không tốt mấy công sức do cú pháp cũng khá giống nhau nên việc thay đổi vẫn có thể xảy ra.

Thời gian ước tính: 1 ngày – Flow rất là đơn giản và có thể xem như là một phần mở rộng thêm của JavaScript. Hãy thử cho nó vào project của bạn và chứng kiến sức mạnh kì diệu của Flow.

Links Học

Lựa chọn thay thế

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

Build System — webpack

Phần này sẽ được giữ ngắn bởi quá trình setting up webpack đôi khi sẽ rất nhàm chán và dễ khiến developer bỏ cuộc bởi phải học quá nhiều thứ mới khi bước vào thế giới của front end developer. Nói ngắn gọn, webpack  là một module bundler với khả năng compile một front end project và các dependencies của nó thành một bundle thống nhất để user sử dụng. Thường thì project đã có sẵn webpack configuration set up và developer cũng rất ít khi chỉnh sửa nó. Tuy vậy bạn vẫn sẽ cần phải có kiến thức về webpack.

Chúng tôi thấy webpack walkthrough của SurviveJS là một nguồn học cực kì tuyệt vời cho những bạn muốn biết về webpack.

Thời gian ước tính: 2 ngày (không bắt buộc)

Links tham khảo

Tham khảo khác

Package Management — Yarn

Nếu bạn thử vào xem node_modules directory, hẳn bạn sẽ nhận ra ngay nỗi kinh hoàng khi nhìn vào số lượng đồ số của các directories. Từng babel plugin, lodash function đều là một package riêng rẽ. Và khi bạn cùng lúc phải chạy nhiều project thì số lượng tăng một cách chóng mặt. Như vậy mỗi lần bạn chạy  npm install trong một project mới, thì những packages này sẽ được download lặp đi lặp lại dù bạn đã có sẵn trong các project khác trong máy tính của mình.

Mặt khác khi sài npm install thì việc cài đặt rất dễ bị lỗi do các bản update thường chưa những thay đổi khiến cho việc không tương thích lẫn nhau xuất hiện hoặc đơn giản là bị trùng lập các file.  

Yarn giúp giải quyết triệt để những vấn đề trên với yarn.lock file, giúp bảo đảm mỗi lần cái đặt đều có file structure giống nhau trong node_modules giữa các máy tính. Yarn cũng tối ưu hóa một global cache directory nhờ đó mà không cần phải download lại những packages bạn đã có. Hơn nữa, nó còn cho phép bạn cài đặt offline luôn.

Một số các Yarn commands nổi bật nhất bạn có thể vào xem tại đây.  Thật sự thì chúng đều tựa như  npm. Một trong những Yarn command mà chúng tôi thích nhất là  yarn upgrade-interactive giúp cho việc dependencies sẽ tự động được update cho các JavaScript project.

Thời gian ước tính: 2 giờ

Links tham khảo

Continuous Integration

Tại Grab, chúng tôi dùng Travis CI cho continuous integration (CI) pipeline. Travis là một CI rất nổi tiếng trên Github cũng như build matrix của nó có khá nhiều tính năng vô cùng hữu ích khi bạn phải quản lí nhiều dự án khác nhau như Grab. Chúng tôi cài đặt để Travis thực hiện những nhiệm vụ sau:

  • Chạy lintingcho project.
  • Chạy unit tests cho project.
  • Nếu qua được bài tests:
  • Test coverage được tạo bởi Jest sẽ được uploaded lên Codecov.
  • Tạo một production bundle với webpack vào trong một build directory.
  • tar  build directory với  <hash>.tarvà upload nó lên một S3 bucket lưu trữ toàn bộ các build của chúng tôi.
  • Post một notification đến Slack để thông báo về kết quả của Trais build.

Links tham khảo

Tham khảo khác

Hosting — Amazon S3

Thông thường thì web sau khi nhận được request cho một webpage sẽ render nội dung trên server và return một HTML page với nội dung theo yêu cầu của user. Đây còn gọi là server-side rendering. Như đã nói ở phần Single-page Apps, web applications thời nay không đụng tới server-side rendering nữa mà giờ đây ta có thể dùng web server để cung cấp static asset files. Nginx và Apache là 2 lựa chọn khá tốt bởi nó không đòi ta phải bỏ công sức tìm hiểu cũng như setup quá nhiều. Tuy nhiên chúng ta cần phải biết là web server sẽ được điều chỉnh sao cho mọi request route sẽ được tập trung vào một điểm để client-side route có thể tiếp nhận. Dòng chảy cho front end routing sẽ như sau:

  1. Web server nhận một HTTP request cho một route nào đó, như /users/john.
  2. Khi đó server sẽ cung cấp index.html từ static assets directory.
  3.  index.html sẽ bao gồm scripts với khả năng load up một JavaScript framework/library với client-side routing.
  4. The client-side routing library sẽ đọc route, và thông báo với MVC framework về nó.
  5. MVC JavaScript framework renders ra view dựa theo thông tin của route đưa đến , thường là sau khi nó thu data từ một API.

Chúng tôi chọn Amazon Simple Storage Service (S3)  là bởi vì nó có thể host cũng như hoạt động như một CDN  cho nội dung của static website. Thật sự mà nói, S3 là một phương pháp vừa chắc ăn mà phù hợp với túi tiền của chúng tôi.

Một project mà chúng tôi có sử dụng S3 là Hub. Ngoài ra chúng tôi cũng dùng nó để tạo các  .tar files từ các Travis build.

Links tham khảo

Lựa chọn thay thế

Deployment

Bước cuối cùng chính là gửi sản phẩm của chúng ta đến tới user hay nói cách khác là deploy. Chúng tôi sử dụng Ansible Tower, một phần mềm tự động hóa cực kì mạnh mẽ giúp việc deploy build trở nên vô cùng dễ dàng.

Những đã nếu ra trong các phần trước, toàn bộ những build thành công đều được upload lên S3 bucket. Khi các bản update, patch được tung ra thì bản note lại những thay đổi cũng sẽ tự động được cập nhận và gửi tới cho user. Khi một thay đổi được đưa ra, Grab sẽ gửi command tag cho commit tới code hosting. Lúc đó Travis sẽ chạy các bước CI trên commit đó và upload một tar file (ví dụ như  1.0.1.tar) với phiên bản phù hợp với S3 bucket.

Trong Tower, chúng ta chỉ cần đơn giản là đưa ra tên của .tar  mà ta muốn deploy nó tới hosting bucket và Tower sẽ làm hết những công đoạn sau:

  • Download  .tar file đó từ S3 bucket
  • Trích xuất nội dung và điều chỉnh file tùy theo yêu cầu
  • upload nội dung tới hosting bucket
  • Gửi tin nhắn báo deploy thành công tới Slack

Tất cả quá trình trên đều diễn ra trong vòng 30 giây, có thể nói là tower đã giúp mọi thứ trở nên dễ thở hơn rất nhiều.

Links tham khảo

Mọi thứ chỉ mới bắt đầu thôi

Chúc mừng bạn đã theo dõi đến giờ này! Thật sự mà nói, phát triển Front end thời nay rất khó nhưng nó cũng trở nên thú vị hơn. Những gì mà chúng tôi vừa viết ra sẽ giúp các developer non trẻ nhanh chóng nắm bắt và theo kịp tiến độ công việc tại Grab. Vẫn còn rất nhiều thứ để học nhưng quan trọng nhất vẫn phải là việc bạn đã có một lượng kiến thức cơ bản vững chắc cái đã. Front end web developer roadmap sẽ giúp bạn hiểu rõ hơn cũng như có thêm nhiều lựa chọn thay thế trong việc chọn học các ngôn ngữ lập trình.

Chúng tôi hi vọng là sau 3 phần của bài viết này sẽ giúp các bạn hiểu rõ hơn về những công nghệ trong front end mà Grab đang sử dụng cũng như có được hướng đi riêng cho mình.

Nguồn: topdev.vn via Medium

Tìm việc IT lương cao, đãi ngộ tốt trên TopDev ngay!