facebook – Fullstack Station

FlowType là gì

Nguyễn Nhân — Sat, 11 Jun 2016 15:26:50 +0000

FlowType là bộ kiểm tra kiểu dữ liệu định tĩnh cho Javascript, giúp lập trình viên phát hiện lỗi (có thể xảy ra) trong ứng dụng Javascript một cách nhanh chóng. Được Faceook giới thiệu từ năm 2014, nhằm giúp các lập trình viên có thể có được những lợi ích mà không hề đánh mất ‘cảm giác’ code bằng JavaScript.

Thật sự mà nói thì FlowType ra đời cách đây 2 năm thì cũng đã cũ, tuy nhiên dạo một vòng quanh các blog mình chưa tìm thấy bài nào giới thiệu, đây có lẽ là một thiếu sót của giới lập trình nước ta rồi.

Tại sao gọi là định tĩnh/kiểu tĩnh

Tĩnh ở đây nên được hiểu ở hai khái niệm:

Kiểu dữ liệu (string, number, object, …) được khai báo sẵn cho biến. Bởi vì Javascript là ngôn ngữ động nên nó không yêu cầu khai báo kiểu dữ liệu trước, và kiểu dữ liệu có thể thay đổi trong lúc thực thi chương trình, xem ví dụ ở đoạn mã sau:

var foo = 42;    // foo được xác định kiểu là Number
foo = "bar"; // foo bây giờ được xác định kiểu là String
foo = true;  // foo lại thay đổi và có kiểu Boolean

Kiểm tra trước khi chương trình thực thi. Đối với các ngôn ngữ như C, C#, Java thì phải khai báo kiểu dữ liệu trước, và việc thay đổi kiểu dữ liệu của biến là không được phép, vấn đề nằm ở chỗ là lỗi có thể xảy ra khi chương trình được thực thi, nên cái tĩnh mà FlowType mang lại là có thể phát hiện lỗi Datatype mismatch ngay trong lúc lập trình.

Tất nhiên, bạn hoàn toàn có thể không quan tâm đến việc Datatype mismatch nếu bạn Try…Catch tốt, hoặc ép kiểu chẳng hạn. Nhưng bản chất 2 cách này không sinh ra để giúp bạn hạn chế lỗi, như Try…Catch là cách để kiểm soát các lỗi “ngoại lệ”, không phải là lỗi “phổ biến”.

FlowType là như thế nào?

Trang chủ: https://flowtype.org/

Kiểm tra tham số

// @flow
function foo(x) {
  return x * 10;
}
foo('Hello, world!');

Hàm trên mong muốn tham số là một kiểu số và trả về cũng là kiểu số, nhưng chúng ta truyền vào một chuỗi, như vậy kết quả trả về của chương trình là NaN, như vậy chương trình đã chạy sai, và trong hàng trăm dòng mã, bạn thật sự khó kiểm soát ở dòng mã nào truyền vào cái chuỗi oái ăm kia? Đó là mục đích FlowType ra đời, nó giúp kiểm soát lỗi theo từng tập tin, đưa ra các lỗi một cách chi tiết:

$> flow
  3:   return x * 10;
              ^ string. This type is incompatible with
  3:   return x * 10;
              ^^^^^^ number

Kiểm tra kiểu trả về

Ví dụ:

// @flow
function bar(x: string, y: number): string {
  return x.length * y;
}
bar('Hello', 42);

Nếu ta dùng flow để chạy, ta sẽ biết được lỗi

$> flow
  3:   return x.length * y;
              ^^^^^^^^^^^^ number. This type is incompatible with
  2: function bar(x: string, y: number): string {
                                         ^^^^^^ string

Tức là hàm ta khai báo mong muốn trả về là kiểu chuỗi, nhưng sau khi thực thi hàm, kiểu trả về là kiểu số, FlowType sẽ kiểm tra và cho biết lỗi ở đâu.

Kiểm tra trong thân hàm

Tất nhiên rồi, ngoài việc áp dụng Flow cho đầu vào và đầu ra, thì Flow cũng sẽ kiểm tra các kiểu dữ liệu của biến có trong thân hàm nữa, điều này giúp cho chương trình phát hiện nhanh chóng các lỗi.

FlowType sử dụng ra sao

Cách sử dụng khá là đơn giản, bước đầu tiên, bạn chỉ cần tạo dòng sau trên đầu mỗi tập tin muốn kiểm tra:

// @flow
// hoặc
/* @flow */

Từ giờ trở đi, bạn có 2 cách để kiểm tra:

Sử dụng dòng lệnh

Bạn cài đặt Flow vào máy tính, ở cửa sổ dòng lệnh (Command line), ngay tại thư mục gốc của dự án, chạy lệnh “flow” giống mấy ví dụ trên, sẽ cho ra kết quả.

Sử dụng chương trình Soạn thảo mã

Mình thường sử dụng các loại Atom, SublimeText, và VSCode để kiểm tra lỗi bằng ESLint, hiện tại ESLint cũng có plugin cho FlowType, nên việc tích hợp FlowType là khá dễ dàng.

Khi nào nên sử dụng FlowType

Tuỳ thuộc vào bạn theo trường phái nào: AngularJS hay ReactJS, rõ ràng đây là 2 Javascript framework nền tảng định hình cho các hướng đi khác nhau cho những ai theo Facebook hay Google. Với AngularJS 2 đã sử dụng TypeScript (do Microsoft tạo ra), thì rõ ràng việc sử dụng FlowType là vô nghĩa, vì bản thân TypeScript cũng có những ưu điểm tương tự (cách viết tương ứng ES6). Còn ReactJS lại thuần Javascript nên buộc phải cần có thêm FlowType để hỗ trợ.

Phải nói là khi mới biết TypeScript do nghiên cứu Angular 2, mình thật sự rất thích TypeScript, sử dụng TypeScript giúp cho mã gọn gàng rõ ràng dễ hiểu và dễ phát hiện lỗi. Tuy nhiên, do thiên về ReactJs/React Native nên mình không sử dụng TypeScript, mà tập trung cho ES6/ES2015 và FlowType.

The post FlowType là gì appeared first on Fullstack Station.

GraphQL là gì – Áp dụng như thế nào?

Nguyễn Nhân — Tue, 01 Mar 2016 09:21:21 +0000

GraphQL là gì?

GraphQL là Graph Query Language do Facebook tạo ra từ năm 2012 cung cấp giao thức chung cho phép giao tiếp giữa client và server để cập nhật và lấy dữ liệu.

Client truy vấn đến máy chủ GraphQL bằng các truy vấn với đặc điểm: format của dữ liệu trả về được mô tả trong câu truy vấn và được định nghĩa ở phía client thay vì ở server. Nói đơn giản hơn, đây là truy vấn hướng client, cấu trúc dữ liệu không khô cứng 1 khuôn mẫu từ server (REST API) mà thay đổi theo từng ngữ cảnh sao cho hiệu quả nhất đối với client mà chỉ cần dùng duy nhất 1 endpoint.

Tổng quan GraphQL

Điều quan trọng là GraphQL không phải là một ngôn ngữ truy vấn thực sự, nó chỉ là giao thức giao tiếp giữa client và server, rất cả client (web, mobile) đều có thể giao tiếp với bất kỳ server nào mà sử dụng ngôn ngữ GraphQL.

Khái niệm chính về GraphQL bao gồm:

Cấu trúc phân tầng (Hierarchical)
Hướng sản phẩm (Product0-centric)
Định kiểu mạnh (Strong-typing)
Truy vấn hướng client (Client-specified queries)
Nội quan (Introspective)

Các bạn có thể đọc thêm ở đây. Tuy nhiên theo mình thì ở mức sử dụng là không cần nghiên cứu tài liệu dài dòng đó.

Chú ý: mấy thuật ngữ trên khá khó để diễn tả, nên các bạn đọc từ từ sẽ hiểu, nếu bạn nào có từ hay vui lòng comment bên dưới bài nhé.

GraphQL giải quyết vấn đề gì

GraphQL khắc phục điểm yếu của của REST API bởi REST có tính chất dựa trên tài nguyên cố định, ví dụ:

GET /articles/1?include=author.name,author.email,likes.user.name

Như truy vấn trên thuộc loại liên kết nhiều bảng, REST API cho articles sẽ xử lý khá nhiều và không được linh động. Đối với GraphQL thì sẽ như sau:

{
  articles(id:1) {
    title,
    content,
    author {
      name,
      email
    },
    likes {
      user {
        name
      }
    } 
  }
}

Với GraphQL, chúng ta quy định chỉ trả về title và content cho article, rất linh động và không bị thừa dữ liệu, hơn nữa cấu trúc trên nhìn khá rõ ràng mạch lạc.

Cũng giống như REST, GraphQL hoàn toàn có thể create, update, delete, nhưng với cấu trúc sáng sủa và cấu trúc phân tầng nên dễ dàng cho lập trình viên phía client.

Có nên áp dụng GraphQL không

Bạn nên áp dụng GraphQL nếu bạn có định hướng phát triển nhiều dòng sản phẩm, vì đặc tính của GraphQL là phục vụ client, nên càng nhiều client thì GraphQL càng tỏ rõ ưu điểm.

The post GraphQL là gì – Áp dụng như thế nào? appeared first on Fullstack Station.

Hướng dẫn học React Js

Nguyễn Nhân — Tue, 23 Feb 2016 08:55:05 +0000

Hướng dẫn học React Js sao cho hiệu quả!

Nếu bạn mới làm quen với React (hoặc phần front-end nói chung) thì bạn sẽ thấy hệ sinh thái tương đối khó hiểu, đó là lý do vì sao có bài viết hướng dẫn học reactjs sao cho hiệu quả này, bài viết này được lấy các ý chính từ một bài viết mà tác giả là một trong những thành viên đầu tiên của nhóm Facebook tham gia xây dựng và triển khai mã nguồn mở thư viện React này. Hơn nữa, vì tác giả đó không còn làm ở Facebook nữa, nên có được cái nhìn khách quan không phụ thuộc Facebook nữa.

Bài viết giả sử là bạn đã từng có kinh nghiệm xây dựng web với HTML, CSS và Javascript.

Làm thế nào để tương tác với hệ sinh thái của React

Tất cả các phần mềm đều được xây dựng dựa trên một tập hợp các nền tảng công nghệ, và bạn cần phải hiểu rõ về chúng đủ để xây dựng ứng dụng. Nguyên nhân khiến cho công cụ trong hệ sinh thái của React trở nên phức tạp là vì luôn bị giải thích sai thứ tự.

Bạn nên học, theo thứ tự này, không cần học trước hoặc học đồng thời:

Thư viện React
ES2015/ES6
npm/yarn
JavaScript “bundlers”
Routing
Flux/Redux

Bạn không cần phải học tất cả những thứ này để có thể làm việc hiệu quả với React. Chỉ nên chuyển sang bước tiếp theo nếu như bạn thấy có vấn đề cần được giải quyết. Riêng với ES2015, thì bạn cần học gần như song song vì nó đã trở nên phổ biến tại thời điểm bạn đọc bài này (2017+).

Thêm nữa, có vài chủ đề thường được nhắc đến trong cộng đồng React mà khá “nóng hổi”. Những chủ đề dưới đây khá là thú vị nhưng khó để có thể hiểu được và ít phổ biến hơn so với các chủ đề trên và không cần thiết khi xây dựng ứng dụng.

Inline styles
Server side rendering
Immutable.js
Relay, Falcor, Graphql, …

Tìm hiểu về React

Có một điều hay bị hiểu nhầm đó là bạn sẽ phí phạm nhiều thời gian trong việc thiết lập công cụ để bắt đầu học React. Trong tài liệu chính thống bạn sẽ thấy copy-paste HTML template là bạn chỉ cần lưu lại một file định dang .html và có thể bắt đầu ngay được. Không cần bất cứ công cụ nào ở bước này, và đừng bắt đầu học các công cụ bổ sung cho tới khi nào bạn cảm thấy thoải mái với React một cách cơ bản.

Ở bước này, bạn sẽ hiểu cơ chế về DOM ảo của React là như thế nào, cách hoạt động của luồng dữ liệu trong mỗi component của React. Mặc dù bước học React thông qua html cũng không được sử dụng thực tế sau này, nhưng nó quan trọng để bạn hiểu cơ bản.

Mình cho rằng cách học React đơn giản nhất đó là tài liệu chính thống, đọc các tài liệu một cách đầy đủ thì sẽ nắm React tốt. Mặc dù tài liệu tiếng Anh, nhưng bạn cố gắng đọc hiểu từ từ, các bài viết tiếng Việt mà ngay cả là bài viết của mình cũng sẽ không bao giờ đầy đủ và hệ thống được.

Tìm hiểu về ES2015

Ngoài JSX (mà bạn học trong các hướng dẫn về React), bạn sẽ thấy nhiều cú pháp thú vị trong các ví dụ, có thể bạn chưa gặp nó khi làm với javascript thì có thể đó là ES2015 (tên không chính thức là ES6). Vì còn quá mới nên chưa được hỗ trợ hoàn toàn trên các trình duyệt, bạn có thể đọc bài viết về ES2015 tại đây, nhưng các công cụ đóng gói sẽ kết hợp thực hiện phiên dịch với cấu hình đúng cho bạn để có thể sử dụng được trên trình duyệt, còn gọi là transform (biến hình – như phim Transformer) từ mã viết bằng ES2015 sang ES5 mà tất cả các trình duyệt đều hỗ trợ.

Ở phiên bản đầu của tài liệu trước 2016, đều sử dụng React.createClass() để tạo component, điều này giờ đã không còn đúng nữa, khi toàn bộ các component (stateful) đều sử dụng bằng class của ES2015, vì vậy giờ đây ES2015 gần như là điều bắt buộc để đi tiếp không chỉ với React mà còn thế hệ javascript hiện tại nữa.

Tìm hiểu về `npm`, `yarn`

npm là công cụ quản lý package của Node.js và là phương pháp phổ biến nhất để các lập trình viên front-end và các nhà thiết kế chia sẻ mã nguồn Javascript. Nó bao gồm một hệ thống quản lý module gọi là CommonJS và cho phép bạn cài đặt bất cứ công cụ command-line nào được viết bằng Javascript. Hãy đọc bài này để biết vì sao CommonJS là cần thiết với các trình duyệt, hoặc CommonJS Spec Wiki để biết thêm về CommonJS API.

Hầu hết các components, thư viện và công cụ tái sử dụng trong hệ sinh thái của React đều được triển khai như là thành các module CommonJS và có thể cài đặt thông qua npm.

yarnlà bộ quản lý các gói thư viện theo mình đánh giá là tốt hơn npm, và cũng đã có bài viết giới thiệu về yarn, mình nghĩ yarn sẽ gần thay thế npm. Mặc dù quản lý công cụ này cũng tương đối đơn giản, nhưng không thể thiếu, bạn hãy dành thời gian tìm hiểu nhé.

Tìm hiểu về các công cụ đóng gói (bundlers) Javascript

Vì một vài lí do kĩ thuật mà module CommonJS (ví dụ, các thư viện trên npm) không thể sử dụng native trên trình duyệt. Bạn cần có một “công cụ đóng gói” Javascript để “đóng gói” các modules này thành các files .js mà có thể include được trên trang web qua thẻ