GMO-Z.com Vietnam Lab Center Technology Blog

Javascript 2017

P.V.Đ -

Năm hết tết đến kính chúc mọi người thật nhiều sức khỏe, miệng cười vui vẻ, tiền vào mạnh mẽ, cái gì cũng được suôn sẻ, để sống tiếp một cuôc đời thật đẹp đẽ. Quay lại chủ để Javascript, chắc hẳn không ai phủ nhận rằng Javascript là ngôn ngữ được phổ biến và phát triển nhất hiện nay. Quả đúng là như vậy, trong năm 2017 có nhiều công cụ thự viện Javascript tăng theo cấp số nhân. Cảm giác vô đối, bối rối với vô vàn thay đổi của trong cộng đồng Javascript. Nhưng bạn lại không có thời gian mà lo lắng về một đống công nghệ trôi nổi xung quanh ấy. Bạn hiện giờ đang ở trong một cái mê cung, và bạn cần một cái bản đồ. Được thôi tôi sẽ làm cho bạn một cái. Tuy nhiên có một chút lưu ý nho nhỏ: đây là một tài liệu tham khảo giúp bạn nhanh chóng sử dụng các công nghệ hiện thời mà không phải suy nghĩ quá nhiều. Về cơ bản dựa trên những kiến thức mình đã tích lũy được để giới thiệu gợi ý các xu hướng mới hiện nay.

Các cải tiến vượt bậc năm 2017

Parcel

Parcel là một công cụ bunder mới cung cấp giống như webpack hay glub. Tuy nhiên thì Parcel có khả năng bundle với tốc độ cực nhanh.

Bundler Time
browserify       22.98s
webpack           20.71s
parcel 9.98s
parcel - with cache 2.64s

Có thể thấy parcel chấp một nửa thời so với webpack và browserify. Ngoài ra parcel còn có một vài ưu điểm khác như hỗ trợ css không cần plugin. Có thế tham khảm trên github hoặc trang chủ có nó.

Về độ tin tưởng thì hiện tại đang có gần 20000 star và với nhiều Contributors nên chắc chắn đây sẽ trở thành lựa chọn hoàn hảo cho nhiều dự án web sắp tới.

React 16

Sau nhiều lời ca tụng về tốc độ của Vue.js tất nhiên một ông lớn như facebook cũng không chịu thua kém. Điểm nổi bật nhất trong phiên bản mới này là cải thiện về tốc độ, server rending nhanh gấp 3 lần đồng thời kích thước file cũng được giảm đi rất nhiều. Không chỉ vậy trong lần nâng cấp này React còn hộ trợ việc error handle tốt hơn nữa và còn nhiều tính năng khác nữa.

React từ trước đến nay vẫn luôn nổi trên top các cộng đồng. Không chỉ tăng trưởng về số lượng thư viện, trong năm 2017 các công cụ để phát triển react cũng được sinh ra như https://stackblitz.com (IDE online), https://reactstudio.com/ (Tool kéo thả React), các plugin giúp convert design trên sketch sang code react, ...

AR, VR

Với sự phát triển của AR và VR, không lý do gì tại sao chúng ta lại không phát triển các ứng dụng AR, VR bằng Javascript. Trong năm qua ngay sau khi ARkit của apple và ARcore của google được phát hành thì ngay lập tức các thư viện, phương pháp phát triển AR và VR được tung ra. Đơn giản vì phát triển nhanh, với đa phần các developer hiện đã biết Javascript rồi nên không cần phải học thêm ngôn ngữ khác.

Để phát triển ưng dụng AR và VR bằng javascript hiện nay thường đi theo 2 hướng chính: Xây dựng để chạy trên WebView, hoặc dựa trên React Native

  • Trên WebView:

    • Ngay khi ARcore được phát hành google đã triển khai cả trên web
    • Không chỉ có base trên ARkit và ARcore. Trước đó cũng có một vài thư viện cho AR
      • ar.js được base trên ARToolkit(opensource AR lâu đời nhất)
      • Chính chủ ARToolkit cũng có một phần riêng dành cho Web là jsartoolkit5

  • Sử dụng React Native

    • Bản thân facebook cũng đã có một thư viện để tạo ứng dụng VR từ lâu là react-vr
      • https://facebook.github.io/react-vr/
      • Điểm đáng lưu ý của thư viện này là được thừa hưởng các kỹ thuật tốt nhất của facebook. React thỉ hẳn không nói ai cũng biết còn VR chắc cũng nhiều người biết Facebook đã mua công ty cha đẻ của VR là Oculus nên việc kết hợp này quá dễ dàng với facebook.
    • Chính trong năm 2017, Viro media đã release một thư viện có thể phát triển cả AR và VR. và chạy gọi trực tiếp các API của ARkit và ARcore. Có thể nói đây là một thư viện tốt nhất hiện này viết bằng react để phát triển AR và VR.
    • Còn nhiều thư viên khắc nữa, có thể tìm được dẽ ràng trên google và github

WebAssembly

Được phát triển từ năm 2015. Tuy nhiên WebAsemply được biết đến nhiều hơn trong nhưng năm gần đây. Và được nhắc đến như là cuộc cách mạng đột phá của các Website.

WebAssembly được hiểu là một trình biên dịch mã nhị phân được tích hợp vào trong các trình duyệt, mục đích là để biên dịch các phần mềm và giúp chúng có thể chạy trên nền tảng trình duyệt. Khác với Flash, WebAssembly được xây dựng bên trong trình duyệt, do đó không cần cài đặt thêm bất kỳ plugin nào.

WebAssembly gần giống với JavaScript, tuy nhiên nó mạnh hơn và cũng nhanh hơn gấp nhiều lần. Các công đoạn phiên dịch mã nhị phân được thực thi trên hệ thống của máy tính, mà vì thế cho phép bạn truy cập ứng dụng Photoshop trên nền web với tốc độ tương đương với phần mềm Photoshop trên máy tính.

Với nhiều ưu điểm nhanh, mượt bảo mật, WebAssembly đang trở thành tương lai của các website, có nhiều ứng dụng và phần mềm hơn, chạy đa nền tảng, chơi game cấu hình cao, tốc độ phản hồi nhanh tương đương phần mềm cài đặt trên máy tính.

Bootstrap 4

Sau bao lầu chờ đợi, cuối cùng Bootstrap 4 cũng đã được release trong năm 2017 hứa hẹn với rất nhiều thay đổi. Trong phiên bản này họ đã cải tiến từ bên trong phần core ra cả các class bên ngoài. Thay vì sử dụng less thì chuyển sang dùng sass, chính vì thếm mà bootstrap 4 được complie nhanh hơn rất nhiều. Hệ thông gird cũng đươc làm để dễ sử dụng hơn, chuyển sang sử dụng đơn vị rem. Việc sử dụng rem có ý nghĩa vô cùng quan trọng đối với các màn hình kích thước khác nhau. Sự cân đối của design không bị phá vỡ bởi các thuộc tính có giá trị động và phụ thuộc lẫn nhau. Bổ sung với nhiểu class mới đơn giản hơn như p-1 = padding: 1rem, m-1 = margin: 1, pl-2, mr-2, pt-2, mb-2, ... Thêm một điểm cộng nữa là document cũng được chỉnh sửa lại giúp dễ học hơn trước

Hướng tới 2018

Trong năm 2017 React luôn chiến thắng trong các cuộc chiến về sự phổ biến, số lượng người sử dụng. Theo các bài báo thì họ cũng nói rằng Ract sẽ còn chiến thắng trong năm 2018 và đặc biết với React Native sẽ bỏ xa các công cụ tương tự khác. Nhưng chúng ta cùng đừng bỏ qua nhưng framework khác.

Angular đang chuyển sang một vai trò mới. Angular vẫn được bảo kể bởi ông lớn Google, vẫn đem lại độ tin tưởng và sự bảo mật nhất định dành cho doanh nghiệp. Tất nhiên để có thể phát triển, Angular sẽ không trực tiếp đối đầu với React thay vào đó sẽ tập chung vào thị trường doanh nghiệp.

Cũng không thể bỏ qua Vue.js. Vue.js ra đời trong thời gian ngắn, nó đã chứng mình là mối đe dọa lớn nhất đối với React. Vue được đánh giá tốt hơn khi nói đến việc cung cấp trải nghiệm đầy đủ về một Framework, nhờ vào các official router và state management library được duy trì bởi cùng core team.

Năm 2018 chắc chắn làm một năm của GraphQL. Đa số mọi người đều nghe nói về GraphQL và có thể đang bị hấp dẫn, nhưng bạn vẫn chưa thực sự thử nó. Trong tất cả các công nghệ được đề cập trong cuộc khảo sát, GraphQL là một trong những công nghệ tạo ra nhiều sự quan tâm nhất - mặc dù số lượng người dùng hiện tại nhỏ. Và nói về những người dùng hiện tại, cũng cần phải nói rằng họ rất hài lòng với GraphQL. Đừng ngạc nhiên nếu năm 2018 là năm mà GraphQL trở thành một công nghệ chủ đạo.

Progressive Web Apps (PWAs) có lẽ còn nhiều người chưa biết đến nó. Progressive Web App (PWA) là một dạng ứng dụng nền web đang rất nổi trong thời gian gần đây. Bạn cứ tưởng tượng nó giống một website bình thường nhưng hỗ trợ full cho các thao tác cảm ứng, có tất cả tính năng giống như bạn xài một app bình thường: thông báo, camera, GPS, sync dữ liệu nền, NFC, Bluetooth... Nói cách khác, nó không khác nhiều so với app, nhưng lại không cần cài đặt, không cần chờ download, và chiếm ít dung lượng bộ nhớ hơn. Vậy có phải ngon không? Chắc chắn năm 2018 sẽ là sự chuyển mình từ SPA sang PWA

Có kiến thức về một vài thư viện sẽ giúp bạn kiếm được nhiều tiền hơn

  • React
  • Redux
  • Redux-Saga để quản lý I / O ngắt kết nối và cô lập các hiệu ứng trên màn hình
  • Next.js - SSR với Node & Express, tách bó tự động, kiểu-jsx
  • Material UI
  • Cheerio để thực hiện unit test React components (Tôi thích cài này hơn Enzyme)
  • Lodash Import các tiện ích bạn cần để tránh tăng kích thước bundle của bạn.
  • Babel: Được sử dụng để biên dịch ES6 để làm việc trên các trình duyệt cũ hơn.
  • Webpack: Gói bundler phổ biến nhất dành cho trình duyệt JavaScript tiêu chuẩn cho các ví dụ về bộ khởi tạo / cấu hình boilerplate đơn giản để mọi thứ chạy nhanh)
  • ESLint: Catch lỗi cú pháp và các vấn đề phong cách sớm. Sau khi xem xét mã và TDD, công cụ tốt nhất bạn có thể làm để giảm lỗi trong mã của bạn.
  • Node & Express
  • RxJS: Observables cho JavaScript
  • TypeScript

Sử dụng cho các công nghệ trong tương lai

Tất các lĩnh vực R&D này để có thể xin việc trong tương lai

  • Progressive Web Apps (PWAs)
  • Blockchain & fintech
  • Medical technology
  • AR/VR — Hololens, Meta, và ODG được vận chuyển ngày hôm nay. ODG R-9 dự kiến sẽ được xuất xưởng trong năm 2017 nhưng có thể sẽ được xuất xưởng vào năm 2018. MagicLeap đã hứa sẽ xuất xưởng vào năm 2018. AR sẽ biến đổi kinh nghiệm của con người nhiều hơn điện thoại di động đã làm.
  • 3D printing
  • AI
  • Drones

Kết luận

Năm 2017 là một năm khá huy hoàng cho JavaScript. Điều này chắc hẳn các blogger và các trang web về programming cũng đồng ý JavaScript là một ngôn ngữ mạnh mẽ và đáng học nhất hiện nay.

Cộng đồng JavaScript hiện nay đang rất sôi động. Các library/framework cho JavaScript cả front-end lẫn back-end đều lần lượt ra đời như nấm sau mưa.

Nói tóm lại những gì liên quan đến website nói chung và front end nói riêng đều sử dụng JavaScript.