FrontEnd Developer 2016 thì nên học cái gì?

Hey mình có dự án mới về web, không code web lâu quá rồi, không biết bây giờ viết web thì nên làm bằng gì?

Mình chỉ là frontend developer, nhưng bạn đã tìm đúng người rồi đó, mình làm web cũng đã lâu, mình có thể chỉ bạn biết cần học gì để tạo web apps

Ngon, giờ mình cần một trang hiển thị những hoạt động gần đây của user, mình chỉ cần dữ liệu từ REST sau đó hiển thị lên table, trên đó mình có thể cho phép user lọc lại theo điều kiện họ muốn, chắc là xài jQuery để hiển thị dữ liệu hả?

Trời, thời nào rồi ông, giờ còn ai viết jQuery nữa. Học React đi, năm 2016 rồi còn làm cái đó bằng jQuery.

React, có nghe qua, mà nó là cái gì

Thư viện siêu ngon của mấy thằng làm trong Facebook phát triển, người ta xài cái này để handle mấy cái view cho dễ.

Mình dùng React để hiển thị dữ liệu từ server?

Đúng rồi, trước tiên cần thêm React và React DOM vô

Sau phải tới 2 thư viện?

Cái đầu là thư viện chính, còn cái DOM là để thao tác với cái DOM, mà bây giờ cái DOM được mô tả trong cái JSX

JSX là cái quái gì ?

JSX là syntax mở rộng của javascript, giống hệt như XML, tốt hơn HTML bình thường

HTML bình thường thì có vấn đề gì

Giờ chả ai đi viêt HTML thuần nữa ông ơi

Vậy 2 thư viện đó là đủ ?

Còn, cần thêm Babel

Thêm một thư viện nữa ?

Babel cho phép xác định phiên bản javascript muốn dúng, nếu không có Babel vẫn dùng React được, nhưng sẽ là ES5, tụi con nít bây giờ code trên ES2016+ không

ES5? ES2016+? mất phương hướng rồi, đó giờ chưa nghe tới

ES5 viết tắt cho ECMAScript 5, là phiên bản thứ 5 từ khi javascript được chuẩn hóa năm 1999, mới nhất là 7.

Không hiểu đang nói gì hết, bắt đầu rối quá. Tui chỉ cần tải một mớ dữ liệu từ server, include jquery từ CDN, gọi một cái AJAX, sau không làm vậy cho đơn giản?

2016 rồi chú, ai xài jQuery nữa, kết thúc thời đại của cái kiểu code hầm bà lằng một đống bùi nhùi.

Vậy giải pháp là load 3 thư viện rồi hiển thị dữ liệu lên HTML

Cần thêm cái Module manager

Module manager nó là cái gì

Cái này tùy thuộc vào môi trường, trên web thì thường là phải hỗ trợ AMD hoặc CommonJS modules

rồi vậy AMD và Common JS là cái chi chi ?

Định nghĩa nè. Có nhiều cách để mấy cái thư viện javascript và classe tương tác với nhau, biết kiểu export và requires hông? mình có thể viết nhiều file javascript rồi sử dụng Browserify để gom nó lại thành một cục

Browserify ?

Công cụ cho phép gom các CommonJS đã được định nghĩa, những file dependencies, thằng này được tạo ra để có thể gọi các thư viện được publish trên npm

npm?

Nó là cái kho javascript công cộng, được những anh lập trình thông minh đẹp trai tin dùng để đứa đứa con javascript của mình lên đây.

Giống kiểu CDN hả?

Không hẳn, nó như cái trung tâm dữ liệu nơi tác giả đưa source lên, nếu cần xài thì mình tải xuống chứ không gọi trực tiếp như CDN.

À, giống Bower

Đúng rồi, 2016, chắc ít ai xài Bower lắm cha.

Tự thấy lạc hậu quá, vậy là cần tải mấy cái thư viện từ npm rồi sau nữa

Trong trường hợp của chú, để sử dụng React, down cái React module về rồi import vô trong code.

Giống Angular!

Angular là chuyện của 2015. Mà cũng đúng, Angular sẽ sánh vai cùng với VueJS và RxJS trong tương lai còn dài

Phải làm nhiều quá ta

Đó là lý do cần có task manager như Grunt hoặc Gulp hoặc Broccoli để tự động chạy Browserify, biết sử dụng Mimosa hông?

Nghe lạ tai rồi, đang nói khỉ gió gì vậy

Task managers. Thật ra cũng không còn ngon như thời mới ra nữa, sau đó người ta chuyển qua dùng Makefiles, và bây giờ là Webpack

Ủa tưởng Makefiles chỉ được phổ biến với cộng đồng C hoặc C++ chứ

Đúng, nhưng người ta vẫn hay bảo, chúng ta thích làm cho mọi thứ phức tạp hết lên rồi sau đó lại quay về với những điều căn bản nhất.

Còn Webpack là gì

Một trình quản lý module khác cho trình duyệt, một phiên bản tốt hơn Browserify

Tốt hơn chổ nào

Nó cho phép sử dụng những module manager khác nhau không chỉ riêng CommonJS, đề phòng không hỗ trợ ES6

Quá confuse với mới CommoJS/ES6 luôn

Ai cũng vậy, javascript đó giờ nó vậy

Còn gì nữa không

Học Typescript, nó cũng là javascript nhưng tốt hơn, và nếu đang dùng ES6 thì viết Typescript cho nó đã, giảm lỗi run-time, xài thêm cái flow để kiểm tra nữa.

.... Flow là gì á

Của mấy cậu nhà Facebook chế, kiểm tra lỗi khi rõ. Họ code bằng OCaml, code theo kiểu function đã lắm

OCaml, code hướng Function ?

Con cưng của 2016 man, chỉ cần biết code theo kiểu functional thì tốt hơn OOP, đó là những gì mà lập trình viên 2016 họ làm.

Hồi đó học OOP ở truong trường, tưởng cái đó good lắm chứ

Như Java trước khi bị mua lại bởi Oracle. Ý là OOP đã từng tốt và vẫn được sử dụng tới giờ, nhưng bây giờ người ta nhận ra rằng chỉnh sửa một cái state cũng giống như đá đích đứa con nít, mọi người sử dụng đối tượng immutable và code theo functional. Mà bây giờ có thư viện Ramda rồi, viết javascript theo hướng function có gì khó.

Nữa hả Ramda là cái chi chi

Thư viện của David Chamber viết. Nếu muốn học kiểu viết functional thì nên biết đến tên của Erik Meijer

Dừng ở đây được rồi, cái gì cũng tốt, nhưng mà quá phức tạp và chả cần thiết, lấy dữ liệu hiển thị lên mà nhằn vậy hả, có thằng khùng nào học hết cái nùi đó chỉ để hiển thị cái table lên không, rồi quay lại với React đi, giờ làm sao

Thật ra React không có giữ việc fetch dữ liệu, nó chỉ hiển thị thôi

Đậu xanh. vậy chở sao get dữ liệu

Dùng Fetch để fetch dữ liệu từ server

Đặt tên hay quá

Fetch là native implement cho một XMLHttpRequests tới server

AJAX chứ gì

AJAX chỉ là XMLHttpRequest. Fetch cho phép thực thi AJAX trên promises để tránh thảm họa với callback

Thảm họa callback

Đúng rồi, mỗi lần thực thi một asynchronous request tới server, mình phải đợi server response, nghĩa là mình phải thêm một function trong một function, nó được gọi là callback pyramid from hell.

Vậy giải quyết là

Bằng cách đưa cái callback qua promise, có thể viết code dễ hiểu hơn, dễ test hơn, thực thi một lúc nhiều request cùng lúc

Fetch làm chuyện đó ?

Đúng trong trường hợp user sử dụng trình duyệt hỗ trợ, bằng không phải sử dụng thêm Fetch polyfill hoặc Request, Bluebird, Axios

Trời đất ơi vậy cần bao nhiêu thư viện, bao nhiêu thư viện cho cái việc đơn giản này

Cần javascript. Có tới hàng ngàn cái thư viện được viết bằng javascript làm được một việc. Mình chọn cái tốt nhất, thư viện thì nhiều nhưng xài có chọn lọc.

Vậy Bluebird, Request, Axios làm chuyện gì

Thư viện này cho phép thực thi XMLHttpRequest rồi trả về promises

jQuery AJAX cũng làm được vậy

KHÔNG AI dùng "J" trong năm 2016 đâu, chỉ sử dụng Fetch, polyfill,....

Thôi chắc dừng ở đây đi

Thật đó nếu giờ là tui phải sử dụng templating engine, tui sẽ chỉ sử dụng Typescript + SystemJS + Babel.

Hiển thị dữ liệu thôi, cần phải phức tạp hóa vậy không trời, hay cho tui biết cần xài cái templating engine nào đi rồi tui tự học tiếp

Vậy ông quen với cái nào

Quên rồi, lâu quá không còn đụng tới

jTemplate, jQote, PURE?

Hổng quen, cho cái khác đi

Transparency? JSRender? MarkupJS? KnockoutJS, PlatesJS? jQuery-tmpl? Handlebars? cũng còn vài người xài cái này.

Có cái nào dễ biết hơn chút không

Nhức đầu rồi, underscore? công nghệ từ 2014 ông có biết không?

Chưa bao giờ đụng tới

Jade? DustJS? DotJS? EJS ? Coffeescript ?

Thôi tui xin quay lại với code backend, quá nhiều thay đổi cần phải học tui không thể handle hết, cộng động javascript mấy ông đúng là điên hết rồi nếu nghĩ là có ai đó có thể biết hết chừng đó thứ

Hiểu rồi, ông nên vô học Python đi

Tại sao?

Chưa từng nghe tới Python 3 luôn sao?

Dịch từ: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.gg2qmpxxd

Tác giả: Jose Aguinaga Web Engineer. UX & Interactions Designer. Full-Stack Javascript Developer