CHƯƠNG 1: TỔNG QUAN 1. Tính cấp thiết của đề tài 1. Vấn đề đặt ra Ngày nay, cuộc sống càng hiện đại thì con người ngày càng áp dụng công nghệ thông tin một nhiều hơn. Các thủ tục rờm rà trên hồ sơ giấy trong công việc cần được duyệt qua từng cấp để được duyệt cho một yêu cầu nào đó thì càng làm thêm cho công nhân thêm phần khó chịu sau nhưng giờ làm mệt mỏi, hay có lúc lại quên mang đi những giấy cần thiết để cung cấp cho việc thực hiện yêu cầu cần duyệt.
Phải chờ đợi xếp thành từng hàng dài để báo cáo kết quả mỗi ngày làm việc. Thực ra với thời đại công nghệ số, công việc quản lý nhân sự đã đơn giản hơn rất nhiều khi xung quanh là công nghệ thông tin không ngừng phát triển. Vì vậy, vấn đề đặt ra là chúng ta phải xây dựng được các phương pháp để áp dụng công nghệ thông tin vào quản lý một cách sát với nhu cầu thực tế nhất. Khảo sát hiện trạng Với thời đại công nghệ tiên tiến, việc quản lý trở nên khá dễ dàng.
Chỉ cần có Internet và thiết bị, chúng ta có thể truy cập vào bất kì lúc nào để xem thông tin của cần quản lý. Hướng giải quyết Để đáp ứng nhu cầu về việc quản lí nhân sự một cách chính xác và nhanh chóng thực hiện các thủ tục thõa mãn nhu cầu cho nhân viên và người quản lý mà websitet “Quản lí nhân sự ”ra đời. Với trang “Quản lí nhân sự” không những là nơi để thực hiện các thủ tục công việc hằng ngày mà là nới để cho nhân viên có thể quản lí độc lập thông tin cá nhân hay lương bổng của mình. Mục tiêu đề tài - Áp dụng ngôn ngữ NodeJS và công nghệ ReacJS trong lập trình Web application.
- Nắm bắt những nghiệp vụ cần có khi triển khai xây dựng website, đặc biệt là mô hình quản lí nhân sự. - Phân tích, thiết kế và xây dựng ứng dụng web quản lí nhân sự đáp ứng nhu cầu quản lý cho thực tiễn. - Tìm hiểu và thêm các các công nghệ Jenkins và Docker vào để hỗ trợ website. Đối tượng nghiên cứu - Ngôn ngữ NodeJS và công nghệ ReactJS.
CHƯƠNG 2: CÔNG NGHỆ NỀN TẢNG 2. Nền tảng phát triển 2. Nền tảng công nghệ Bảng 2-1. Nền tảng công nghệ sử dụng STT Tên Phiên bản 1.
Công nghệ sử dụng 2. Thư viện ReactJS [1] Hình 2. Minh họa logo công nghệ React. React Js là một thư viện viết bằng javascript, dùng để xây dựng giao diện người dùng (UI).
React được sử dụng rộng rãi và có hệ sinh thái đa dạng phong phú. Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác. Nếu như AngularJS là một Framework cho phép nhúng code javascript trong code html thông qua các attribute như ng-model, ng-repeat.thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn Hiện nay, thư viện này nhận được rất nhiều sự quan tâm đến từ cộng đồng, Github repo của React đang có được hơn 67k stars. Nó đang được maintain bởi Facebook và Instagram, cùng với sự đóng góp của cộng đồng 1011 (28/5/2017) lập trình viên giỏi trên Thế giới.
2 Về cơ bản, việc xây dựng một ứng dụng MVC phía client với ràng buộc dữ liệu 2 chiều (2way data-binding) là khá đơn giản. Tuy nhiên nếu dự án ngày càng mở rộng, nhiều tính năng hơn, làm cho việc bảo trì dự án gặp khó khăn, đồng thời hiệu năng cũng bị giảm. Bạn cũng có thể giải quyết vấn đề đó bằng các thư viện khác như Backbone.js hay Angular.js, tuy nhiên bạn sẽ thấy các hạn chế của chúng khi dự án của bạn ngày càng lớn. React thì trái lại, nó sinh ra để dành cho những ứng dụng lớn dễ dàng quản lý khi mở rộng.
React được tạo ra cho phần V của mô hình MVC, cho phép lập trình viên tạo ra các web app lớn, có thể hiển thị các dữ liệu thay đổi theo thời gian mà không cần reload lại trang, cũng như xây dựng các UI components có thể tương tác và tái sử dụng. Mục tiêu chính của React là nhanh, đơn giản, hiệu năng cao và dễ dàng mở rộng. Ưu và nhược điểm khi sử dụng ReactJS 2. Ưu điểm - Giúp viết Javascript dễ dàng hơn với JSX: React sử dụng một cú pháp mới gọi là JSX, là một sự hòa trộn giữa Javascript và cú pháp XML: cho phép quoting như HTML và sử dụng HTML tag để render sub-components.
Vì vậy nó cũng trở nên thân thiện hơn với các lập trình viên front-end. - Component hóa giao diện: React Component API cho phép lập trình viên tạo ra các Component tương ứng với các phần của giao diện. Các component này có thể được tái sử dụng như một layout template, hoặc kết hợp với các component khác để xây dựng content của giao diện. - Tăng hiệu năng với Virtual DOM: React sử dụng khái niệm virtual DOM để tạo lại các component của bạn ngay cả khi component đó đang “live”.
Cách tiếp cận này mang lại cho bạn tính linh hoạt rất lớn và cải thiện hiệu năng bởi React có thể tính toán được trước những thay đổi nào cần thực hiện trong DOM và chỉ update DOM theo những thay đổi đó. Bằng cách đó React tránh và giảm thiểu những hành động gây tốn tài nguyên của DOM và làm cho việc cập nhật giao diện hiệu quả hơn. - Thân thiệt với SEO: Một trong những vấn đề lớn của các Js frameworks là nó không thân thiện với các cỗ máy tìm kiếm (search engine). Mặc dù đã có nhiều cải thiện nhưng thực sự search engine vẫn gặp rất nhiều khó khăn khi “đọc” các web app chứa nhiều Js.
Tuy nhiên React tự hào nằm ngoài số đó bởi vì bạn có thể chạy React trên server và các virtual DOM của component sẽ được render và trả về trình duyệt dưới dạng web page mà không cần các thư viện 3 bên thứ 3 hay bất kì thủ thuật nào. Vì vậy React đáp ứng đầy đủ tính SEO friendly. - React cung cấp nhiều công cụ out-of-the-box - Dễ dàng viết UI Testcase - Những bộ não lớn đang “hậu thuẫn” đằng sau React: React được Facebook opensource và hiện được phát triển bởi rất nhiều lập trình viên giỏi trên thế giới, vì vậy tương lai của React cũng cực kì được đảm bảo. Nhược điểm - React chỉ phục vụ cho tầng View.
React chỉ là View Library nó không phải là một MVC framework như những framework khác. Đây chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2- way binding hay là Ajax.
- Tích hợp React vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại. - React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một framework hoàn chỉnh. Giới thiệu Redux-saga Hình 2.2 Mô hình liên kết React – Reducx – Saga 4 Redux-Saga là một thư viện redux middleware (Trong Redux, middleware là một lớp nằm giữa Reducers và Dispatch Action) giúp bạn quản lý những side effect trong redux.
Redux-Saga sử dụng Generators (function*) của ES6 để xử lý “bất đồng bộ” một cách “đồng bộ”. Các khái niệm cơ bản về Redux-saga Redux saga cung cấp cho chúng ta một số method gọi là effect như sau: - Fork(): sử dụng cơ chế non - blocking call trên function - Call(): Gọi function. Nếu nó return về một promise, tạm dừng saga cho đến khi promise được giải quyết - Take(): tạm dừng cho đến khi nhận được action - Put(): Dùng để dispatch một action - takeEvery(): Theo dõi một action nào đó thay đổi thì gọi một saga nào đó - akeLastest() : Có nghĩa là nếu chúng ta thực hiện một loạt các actions, nó sẽ chỉ thực thi và trả lại kết quả của của actions cuối cùng - yield(): Có nghĩa là chạy tuần tự khi nào trả ra kết quả mới thực thi tiếp - Select(): Chạy một selector function để lấy data từ state 2. Ưu điểm của Redux – Saga - Do tách riêng side-effect ra khỏi action nên việc testing là dễ dàng hơn Redux-Thunk - Giữ cho action pure synchronos theo chuẩn redux và loại bỏ hoàn toàn callback theo javascript truyền thống 2.
Nhược điểm của Redux – Saga - Function ko viết được dạng arrow-function. - Phải hiểu về Generator function và các khái niệm trong saga pattern 2. Giới thiệu NodeJS 5 Hình 2.3 Minh họa logo NodeJS - NodeJS là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng. - NodeJS được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ.
- Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao. - NodeJS tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực. - NodeJS áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể. Lưu ý: NodeJS là một nền tảng (platform), không phải Web Framework, cũng không phải ngôn ngữ lập trình.
Ưu và nhược điểm khi sử dụng ReactJS 2. Ưu điểm - Các ứng dụng NodeJS được viết bằng javascript, ngôn ngữ này là một ngôn ngữ khá thông dụng. Theo tác giả của ngôn ngữ Javascript, Ryan Dahl: “Javascript có những đặc tính mà làm cho nó rất khác biệt so với các ngôn 6 ngữ lập trình động còn lại, cụ thể là nó không có khái niệm về đa luồng, tất cả là đơn luồng và hướng sự kiện.” - NodeJS chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event-driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả. - Có thể chạy ứng dụng Nodejs ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng Nodejs rất lớn và hoàn toàn miễn phí.
- NodeJS đáp ứng tốt cho ứng dụng thời gian thực và chạy đa nền tảng, đa thiết bị 2. Nhược điểm - Nodejs không hỗ trợ đa luồng, nó là một máy chủ đơn luồng. - Ứng dụng nặng tốn tài nguyên: Nếu bạn cần xử lý các ứng dụng tốn tài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tương tự như vậy thì không nên dùng NodeJS.
