Phát triển Client Side Framework với ReactJS

ReactJS đã được Magestore lựa chọn làm thư viện để phát triển phần Client cho sản phẩm PWA POS. 1 phần mềm Web Based Point of Sales cho phép bán hàng trên mọi thiết bị được kết nối với Internet. Ý tưởng xây dựng phần Client của POS bằng ReactJS được Magestore bắt đầu vào đầu năm 2018 và đến cuối năm 2018, sản phẩm PWA POS đã có mặt trong hội thảo Magento Imagine - sự kiện lớn nhất của cộng đồng Magento tại Barcelona. 

Webinar số 7 mang đến một cái nhìn sâu hơn về cách Magestore đã phát triển ứng dụng PWA POS với ReactJS như thế nào. Speaker của sự kiện là 2 đại diện Rooney & Eren đến từ team Solution Development (triển khai giải pháp cho khách hàng) và Vincent đến từ team Product. 

Client Side Framework là gì? 

Khi phát triển các ứng dụng web, chúng ta sẽ có 2 phần là Server side & Client Side. Server side thường được build bằng các ngôn ngữ phát triển như: Node, PHP, ASP.net. Phần còn lại là Client Slide, thường được build với các thư viện JS và chạy trên browser. Trong đó ReactJS là một thư viện thường được sử dụng.

React – khởi nguồn được phát triển và duy trì bởi đội ngũ Facebook, React là một nguồn mở, rõ ràng, học một lần và viết ở mọi nơi “learn once, write anywhere" giúp các web developers xây dựng phần interface tiện lợi. React sử dụng đơn giản, dễ học dễ làm, có khả năng scalable. 

Từ KnockoutJS chuyển sang ReactJS

Mở đầu webinar, Rooney chia sẻ câu chuyện phát triển sản phẩm POS với KnockoutJS. Là một đối tác của Magento, Magestore thường bám sát vào các công nghệ mới được Magento áp dụng. KnockoutJS cũng được Magento sử dụng khi mới đầu release Magento 2. Tuy nhiên khi càng sử dụng, team phát hiện ra những nhược điểm của thư viện này 

• Lượng sử dụng ít nên lượng commits trên Git cũng rất thấp, lẻ tẻ vài commit/tháng
• Khả năng render rất chậm 
• Các công nghệ KnockoutJS sử dụng đã bị lỗi thời, thực sự bị tụt hậu so với AngularJS, ReactJS, VueJS

Đến năm 2017, Magestore quyết định không sử dụng KnockoutJS nữa, mà chuyển sang ReactJS. ReactJS có điểm mạnh vượt trội trong tất cả những luận điểm nêu trên, bên cạnh đó còn có ReactNative phát triển app native. 

Cấu trúc Client Framework của WebPOS

ReactJS đóng vai trò như một thư viện để phát triển ứng dụng web, chứ không đưa ra một cấu trúc cụ thể nào khi phát triển ứng dụng. Vì vậy mỗi người/team khi làm 1 dự án/sản phẩm React tự đưa ra một cấu trúc riêng. 

Tại Magestore, chúng mình cũng đã thiết kế 1 framework dựa trên React phù hợp với việc build sản phẩm POS. Các công nghệ chính sử dụng: 

• PWA: Ứng dụng chạy nhanh, có thể chạy offline mà không cần mạng. Cài đặt được trên điện thoại/máy tính bảng như ứng dụng Native 
• ReactJS 
• Redux: Quản lý trạng thái ứng dụng 
• Redux Observable: sử dụng làm middleware cho Redux và dùng để xử lý các tác vụ bất đồng bộ
• Dexie: Là một thư viện bao gói của IndexDB. Thư viện này cung cấp API để trao đổi với IndexDB đơn giản hiệu quả và nhanh. 

Khi phát triển framework này, có 2 yêu cầu cần đảm bảo: 

• Tính tuỳ biến: Vì Magestore làm việc trên nền tảng Magento. Customize là một đặc trưng cực lớn của Magento, vậy nên khi một sản phẩm POS gắn với Magento thì phần client side cũng cần một khả năng tuỳ biến cao. 
• Chạy offline: Sản phẩm POS chạy ổn định ngay cả khi mất mạng

Từ 2 yêu cầu chính này, Magestore đã định nghĩa ra cấu trúc - framework này. Ở cấu trúc này có 3 layer chính: 

Ý nghĩa các thành phần

• View: React Components that present GUI
• Action: Actions that user interacts with graphic interface or actions from system interact. Ex: User click to product, network offline
• Epic / Reducer: The place that processes actions
• State: presents current application state. It affects the view
• Service: This layer that provides interface for Resource Model as a service contract
• Resource Model: provides adapter to work with data. We can receive data from online or offline sources
• API: This layer provides data from online source, via API request. Ex: from Magento WebPOS REST API
• DB: This layer provides data from offline source. Ex: from IndexedDB
• EVENT BUS: There's where components can dispatch and listen events

Folder Structure của Framework này

Chi tiết của phần Framework này các bạn hãy xem trong Video Recap từ phút 15 đến phút 25 của chương trình (Video ở cuối bài viết này)

Triển khai Concept Extension cho Client Framework 

Như đã nói ở trên, Framework này có khả năng mở rộng cao. Phần tiếp theo, Rooney chia sẻ về concept Extension của bộ Framework. Nguyên lý của concept này là mở rộng các tính năng của ứng dụng mà không cần can thiệp vào Source Code Core.

Team Product sẽ phát triển Core. Các team triển khai khi work trực tiếp với khách hàng sẽ xây dựng các plugins để thực hiện thêm các tác vụ cho khách hàng. 

Những khả năng của concept extension được thể hiện qua các điểm như sau: 

• Rewrite: Ứng dụng được viết theo Class. Từ đó dẫn đến khả năng Rewrite Class. Các extension bên ngoài khai báo vào thì chỉ cần khai báo qua file configure là muốn 
• Plugin method: Idea tương tự như cách Magento 2 sử dụng. Bạn hoàn toàn thay đổi behavior của object bằng tính năng Plugin. 
• Layout: Ở phần view, chúng mình đã define sẵn các đoạn có thể để sẵn sàng cho việc mở rộng từ bên ngoài. 
• Mixin: Bạn có thể viết thêm các function cho class tồn tại
• Custom ui router

Chi tiết phần chia sẻ của Rooney về phần này từ phút 25:35 trong video recap (Video ở phần dưới bài viết này)

Khi đã tìm hiểu hết các concept ở phần Core. Bất cứ developer nào cũng có thể viết thêm các extensions để trong folder và chạy 2 dòng Command line để chạy được extensions. Tính đến nay Magestore đã phát triển hàng nghìn extension để đắp thêm cho sản phẩm gốc POS. Mỗi khi thực hiện customize, các developer sẽ cần hoàn thành extension trên cả Server & Client. 

Tiếp tục dùng Class hay chuyển sang Hook? 

Giải quyết được bài toán của khách hàng là như vậy, nhưng tuy nhiên khi nhìn lại, đội ngũ Magestore cũng tự thấy sản phẩm còn nhiều điểm cải tiến. Việc update version cho React đang gặp khó khăn. LifeCycle của React mà Magestore sử dụng cũng đã cũ. Cách viết component qua thời gian cũng đã thay đổi rất nhiều, từ Class chuyển sang Component, rồi hiện nay đang sốt lên React Hook. Magestore hiện đang sử dụng version 16.8, nhưng bộ Framework đang sử dụng mạnh Class nên việc chuyển sang Hook gặp khó khăn. 

Có nên update Typescript vào dự án đang chạy? 

Khi đưa TypeScript vào, chúng ta có cảm giác phê hơn khi code, không phải để ý đến kiểu dữ liệu là gì, chỉ cần viết đơn giản mà vẫn chặt chẽ. Bên cạnh đó TypeScript hỗ trợ mạnh Interface, sẽ là một phần rất tiềm năng để áp dụng vào phần POS Magestore đang sử dụng. Magestore cũng đang tìm kiếm thêm những case đã có trải nghiệm áp dụng TypeScript cho 1 dự án React sẵn có. 

Nếu bạn là một  ReactJS Developer, ưa thích làm sản phẩm quốc tế trong lĩnh vực bán lẻ - thương mại điện tử! Tham gia Tuyển dụng ReactJS Developer, môi trường làm việc từ xa, địa điểm tự do, quản lý linh hoạt theo Agile.

Q&A 

Một số câu hỏi tiêu biểu trong chương trình, các bạn muốn biết câu trả lời, cùng check 20 phút cuối của video nhé! 

1. Tại sao một số tràn web họ lại chỉ sử dụng ReactJS vào một số tính năng (ví dụ như thanh toán, đặt hàng để làm nó một cách nhanh chóng) mà không phải là cả website ạ
2. Tại sao React team Magestore lại gọi Reactjs là lib thay vì framework? React có phải là framework ko?
3. Cho em hỏi ứng dụng của mình có tương thích với tất cả các trình duyệt web không?, nếu có thì bên mình giải quyết vấn đề này như thế nào ạ
4. Để giảm sự phụ thuộc vào framework như reactjs thì có thể xây dựng 1 bộ framework riêng ko ạ? (Base trên reactjs)
5. Giải thích lại dùm mình tại sao mình phải viết event bus thế nhỉ? use-cases cụ thể là gì?
6. Cho em hỏi khi sử dụng React Hook không sử dụng Redux thì làm sao quản lý logic call api dễ dàng, vì hiện tại em call API trong Component thì code trở nên khá rối
7. Xin hỏi .Reactjs hiện có support tốt cho SEO không vậy các diễn giả?

Video Record của chương trình Webinar #7

‍