Sự khác nhau giữa Angular và React



Hôm nay rảnh,lên mạng đọc linh tinh tình cờ đọc được bài viêt so sánh angular và react khá là hay nên mình viết lại chia sẻ cho mọi người cùng đọc cho vui nhé.

1.Giới thiệu

 Là web developer,chúng ta cần phải nắm bắt theo xu hướng công nghệ để bồi dưỡng bản thân.Gắn bó với một công nghệ gì đó quá lâu hay thay đổi quá thường xuyên cũng là điều không tốt,và nó có thể gây hại nhiều hơn hơn cho bạn.

Khi bạn chọn một công nghệ mới để phát triển,bạn nên tìm hiểu về nó và thực sự hiểu là vì sao lại chọn nó,những gì nó có thể làm cho bạn,những hạn chế,ưu và nhược điểm gần như mọi thứ.

Và trong bài viết này sẽ nói về Angular và React.Hai công cụ phát triển frontend rất phổ biến hiện nay.

Front-end development: Xoay quanh mọi thứ bạn tạo ra mà người dùng có thể thấy ở ứng dụng của bạn.Nói một cách rõ ràng,nó là tất cả mọi thứ để làm với UI(giao diện người dùng) của ứng dụng.

Có ba yếu tố chính cần quan tâm:

  • HTML: Sử dụng để xây dựng cấu trúc trang web của bạn(giống như bạn thiết kế một ngôi nhà thì html là các thành phần chính như móng nhà,cột kèo,cầu thang...).
  • CSS: Được sử dụng để định dạng giao diện của các yếu tố cấu trúc khác nhau(Thằng này giống như sau khi đã thiết kế các thành phần chính của ngôi nhà thì phải trang trí cho ngôi nhà đó sơn màu gì,kích thước bao nhiêu...).
  • Javascript: Một ngôn ngữ được sử dụng để mô tả các chức năng và xử lý các yếu tố động trên trang web.
Đây là những nguyên tắc cơ bản để xây dựng ứng dụng frontend

Vậy làm sao để Angular 1 framework và React một library so sánh với nhau.

Trước tiên chúng ta sẽ chia nhỏ vấn đề và tìm hiểu thế nào là framework và thế nào là thư viện.

2.Framework là gì?

Một Software Framework(có thể là frontend hoặc backend) bao gồm các tiêu chuẩn, mã code viết sẵn,  làm cho việc phát triển các chức năng nhất định trở nên dễ dàng và nhanh hơn.Bạn sẽ có ít tự do hơn để viết code,khi mà bạn sẽ phải code theo kiến trúc của framework đặt ra.

3.Thế nào là Library?

Một library là một tập hợp của các functions và các thành phần liên quan.Mà bạn có thể sử dụng để hoàn thành một mục đích nhất định.Bạn có nhiều tự do hơn để thiết kế và xây dựng hệ thống khi sử dụng library.Nhưng điều đó làm tăng thêm tính trách nhiệm của coder để có thể sử dụng hiệu quả và tìm đúng library cho công việc,bởi vì với các dự án phát triển theo thời gian và trở nên nghiêm trọng hơn, việc sử dụng không đúng library trở nên nguy hiểm và khó quản lý hơn.

Sự khác biệt quan trọng nhất giữa framework và library là cách chúng tương tác với code của bạn.

Code của bạn gọi library trong khi framework gọi code của bạn ( thật là đau não :D).

 Điều này còn được gọi là Inversion of Control.

 Sau đây chúng ta sẽ đi đến với vấn đề chính ngày hôm nay.

 4.Angular

 Angular dựa trên Tyscript-Base, nền tảng ứng dụng web front-end mã nguồn mở,nó là một MVC framework được tạo bởi Google.MVC là một kiểu kiến trúc dành cho framework phát triển các giao diện người dùng,có ba thành phần chính trong kiến trúc MVC đó là Model, View, Controller.Các bạn có thể lên google tham khảo thêm về MVC nhóe :D.

Angular là một người khổng lồ khi tạo ứng dụng web động.Trong phiên bản Angular 5,Google đã hỗ trợ thêm progressive web apps rất tốt.

Các bạn chú ý tôi không sử dụng từ AngularJS.Đó là vì vào ngày 14/09/2016 team phát triển AngularJS đã phát hành Angular 2,viết lại hoàn toàn phiên bản AngularJS trước đó.

Vì vậy các phiên bản dưới Angular 2 được gọi là AngularJS và các phiên bản được nói bên trên được gọi là Angular 2,3,4,5... hoặc đơn giản là Angular.

5.React

 React là một thư viện javascript dùng để xây dựng giao diện người dùng.Được tạo ra bởi Facebook,Instagram và cộng đồng.React đang phát triển với tốc độ ấn tượng.Ngoài phiên bản React nguyên thủy còn có 3 phiên bản riêng biệt của React: React-devtools, ReactJS.Net, React Native. Khác với React, React Native cũng khá phổ biến để tạo Native mobile apps.Nếu bạn quan tâm có thể xem thêm về những React Navtive tại đây




Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Cài đặt SSL cho website sử dụng certbot

Hình ảnh
1. SSL là gì. Trước khi nói về ssl chúng ta nhắc lại về HTTP là gì đã nhé.HTTP là giao thức dùng để truyền nhận dữ liệu.Nhược điểm của http là dữ liệu được truyền dưới dạng plain text, không hề được mã hóa hay bảo mật nên nếu gói tin chúng ta gửi bằng http bị tin tặc bắt được thì mọi thông tin sẽ bị lộ. SSL viết tắt của cụm từ Secure Sockets Layer là tiêu chuẩn về an ninh công nghệ trên toàn cầu, nói dễ hiểu thì ssl thực hiện mã hóa thông tin truyền nhận, các dữ liệu được gửi qua phương thức này sẽ được mã hóa, website của bạn nếu sử dụng ssl thì sẽ có https trên url.Nhìn chung phương thức https có độ bảo mật cao hơn nhiều so với http, mặc dù không phải tuyệt đối. 2.Cài đặt SSL. A.Trước tiên chúng ta cần cài đặt nginx để làm web server Đối với ubuntu thì các bạn chạy các lệnh sau: $ sudo apt update $ sudo apt install nginx $ sudo ufw allow 'Nginx HTTP' Đối với Centos thì các bạn chạy lệnh : $ sudo yum install epel-release $ sudo yum install nginx $ sudo systemctl start nginx N
Read more »

Xây dựng một hệ thống comment real-time hoặc chat đơn giản sử dụng Pusher

Hình ảnh
Hế lô các bạn, các bạn khỏe không?Sau một thời gian nghỉ ngơi vì dịch nên mình đã quên hết code rồi :)).Sợ code không nổi nữa nên nay lên mò mò làm một app chat đơn giản cho đỡ lụt nghề.Lên mạng đọc tới đọc lui thấy khó thực sự =)).Bất ngờ đọc được một vài bài giới thiệu pusher nên mình cũng lọ mọ thử viết một cái ai ngờ nó chạy được nên tranh thủ viết lại cho cho các bạn cùng xem cho vui. 1.Pusher là gì? Pusher là một dịch vụ cloud, tạo ra một server trung gian giúp chúng ta có thể xử lý các tác vụ thời gian thực. Dữ liệu được gửi tới pusher, và pusher lại gửi nó đi tới các client đã subscribe (đăng ký) và các channel. Trong đó Pusher Channel cung cấp giao tiếp thời gian thực giữa các máy chủ, ứng dụng và thiết bị. Các kênh được sử dụng cho các biểu đồ thời gian thực, danh sách người dùng thời gian thực, bản đồ thời gian thực, chơi trò chơi nhiều người chơi và nhiều loại cập nhật giao diện người dùng khác. Nó có một thư viện hỗ trợ mọi thứ như trình duyệt web, ứng dụng iOS và Andr
Read more »

CÁC BÀI TẬP SQL CƠ BẢN - PART 1

Hình ảnh
  Thời gian gần đây mình có được nhờ giải mấy bài SQL cho các em, lâu không làm lại, thấy khá thú vị nên hôm nay lên mạng tìm mấy bài làm cho zui.Mình viết lại đây coi như note lại để lưu lại,các bạn cùng làm với mình nhé Đề 1: Giải thích qua về đề bài. Query 2 thành phố có tên ngắn nhất và dài nhất  cùng với số ký tự trong tên của 2 thành phố ấy trong bảng STATION. Đáp án : SELECT CITY, LENGTH (CITY) FROM STATION ORDER BY LENGTH (CITY) ASC , CITY LIMIT 1; SELECT CITY, LENGTH (CITY) FROM STATION ORDER BY LENGTH (CITY) DESC , CITY LIMIT 1; Đề 2: Giải thích qua về đề bài : Query danh sách tên thành phố bắt đầu bằng các nguyên âm (a, e, i, o, u) Đáp án : SELECT DISTINCT CITY FROM STATION WHERE CITY LIKE "A%" OR CITY LIKE "E%" OR CITY LIKE "I%" OR CITY LIKE "O%" OR CITY LIKE "U%" ; Đề 3:  Giải thích đề bài : Query danh sách tên thành phố kết thúc bằng các nguyên âm (a, e , i, o,u), tương tự bài trên chỉ cần đổi logi
Read more »

Xây dựng một hệ thống tracking hành vi người dùng (phần 1)

Hình ảnh
 Hiện nay trên các trang thương mại điện tử việc tracking hành vi người dùng rất là phổ biến vậy nên hôm nay mình sẽ viết một bài viết về hệ thống tracking đơn giản đã từng được sử dụng trên một website thương mại điện tử nhé.Ngôn ngữ mình sử dụng trong bài viết này là ruby(ruby on rails) 1.Sơ đồ tổng quan hệ thống  Ứng với sơ đồ tổng quan sẽ có 2 data set tương ứng như sau và 2.Triển khai project Mô tả sơ qua về cách xây dựng hệ thống(bỏ qua các giai đoạn xây dựng xác thực tài khoản và phân quyền,vì chỉ là thành phần phụ trợ). Tạo tag -> lưu tag vào database -> render thành file js với đầu vào là các tag được tạo từ  trước 2.1.Các model tương ứng Tag model class Tag include Mongoid::Document include Mongoid::Timestamps belongs_to :user field :name, type: String, default: "" field :selector, type: Hash, default: {} field :trigger, type: Hash, default: {} field :handle, type: Hash, default: {} field :author, typ
Read more »

Xây dựng một hệ thống tracking hành vi người dùng (phần 2)

Hình ảnh
Các bạn có thể xem lại phần 1 tại đây. Sau khi đã có được các tag tiến hành xây dựng các Helper để hỗ trợ việc render ra file tracking.js Helper này có nhiệm vụ xử lý các logic của file tracking.js nhưng nếu xử lý trực tiếp trên file js thì nó quá dài dòng và dễ bị lộ logic của file. JS helper module JsHelper def renderBindClicks(tags) click_tags = tags.inject([]) do |click_tags, tag| if tag&.trigger[:value] == 'click' event_type = tag&.selector[:dom] selector = if event_type == "classes element" ".#{tag&.selector[:value]}" elsif event_type == "id element" "\##{tag&.selector[:value]}" end if selector.present? click_tags << "'#{selector}'" end end click_tags end if click_tags.present? return "[#{click_tags.uniq.join(', ')}].forEach(bindClick);".html_safe end
Read more »

Enterprise architecture trên 1 tờ A4

Hình ảnh
Enterprise architecture là một chủ đề rộng và có rất nhiều quan điểm chi phối và thực thi. Trên thực tế có rất nhiều quan điểm về vấn đề này, mình xin giới thiệu qua một quan điểm khá hay ho trong hình dưới đây. Nếu khó nhìn các bạn có thể tải về máy và phóng to lên nhé !
Read more »

Web caching (P2)

Hình ảnh
Sau khi đọc Web caching (P1), chúng ta đã hiểu đường tác dụng, cơ chế của việc caching và đi chi tiết về Browser caching và CDN caching. Ở phần 2 chúng ta sẽ tìm hiểu về server caching và cách vận dụng linh hoạt caching để giải quyết các bài toàn performance. Mục lục Reverse proxy caching. Application caching. Áp dụng bài toán thực tế. Lời kết 1.Reverse proxy caching Reverse Proxy là gì? - Là một loại proxy server trung gian giữa một server và các clients gửi request. - Nó kiểm soát yêu cầu của các clients, nếu hợp lệ, sẽ luân chuyển đến các servers thích ứng. - Ưu điểm lớn nhất của việc sử dụng Reverse proxy là khả năng quản lý tập trung. Nó giúp kiểm soát mọi requests do clients gửi lên servers. Cơ chế: - Tương tự như Browser caching và CDN caching. Reverse proxy cache lại tất cả các request resources(image, css, js, ...) và trả lại client ở tầng Proxy. Ưu điểm: - Giảm lượng request lên server. - Có thể quản lý được cache. Nhược điểm:
Read more »

Bàn về async/await trong vòng lặp javascript

Hình ảnh
  Lâu nay mình đang phải làm một dự án sdk javascript nên khá đau đầu với cái bất đồng bộ trong vòng lặp của  javascript.Để tránh quên nên mình viết lên đây cho đỡ quên.Bài viết này mình chỉ viết về một số ví dụ sử dụng async/await cho dễ hiểu nhé. 1. Chuẩn bị cho ví dụ sắp tới Giả sử chúng ta có một giỏ trái cây và số lượng của từng trái cây trong giỏ const fruitBasket = { apple: 27, grape: 0, pear: 14 } Bây giờ mình muốn lấy số lượng hoa quả trong giỏ mình sẽ viết một hàm như sau  const getNumFruit = fruit => { return fruitBasket[fruit] } const numApples = getNumFruit('apple') console.log(numApples) Giờ giả sử fruitBasket được lấy từ server chứ không phải mình khai báo biến như trên nữa việc lấy dữ liệu sẽ mất một vài giây, mình sẽ giả lập công việc lấy dữ liệu từ server như sau const sleep = ms => { return new Promise(resolve => setTimeout(resolve, ms)) } const getNumFruit = (s, fruit) => { return sleep(s).then(v =&
Read more »

Web caching (P1)

Hình ảnh
Câu chuyện hư cấu 1: A: *** hiểu sao code tao chỉnh sửa rồi mà deploy lên *** thấy thay đổi gì? B: Mày đã xóa cache chưa vậy? A: Làm sao để biết có cache hay không. Mà cache làm *** gì để suốt ngày phải xóa. Mất công, mất việc. One few moments later ... A: Xóa hết cache trình duyệt rồi, sao vẫn ko thay đổi code đã chỉnh sửa mày ơi. B: Ờ, cũng *** biết, đọc bài ở dưới xem sao :)) Câu chuyện hư cấu 2: C: Sao dạo này con web của tao nó chạy chậm thế nhờ? Có cách nào ko mày? D: Thế mày đã caching cho nó chưa? C: Tao đang nói web chạy chậm mà, có khi do code lởm mà, cache ciếc gì ở đây. Mà cache là cái gì vậy? D: Thôi đọc bài ở dưới đi rồi nói chuyện tiếp :)) Ok, qua 2 câu chuyện hư cấu trên, chắc các bạn cũng mường tượng được ưu, nhược điểm của Caching rồi đúng không? Vậy trong bài viết này, mình sẽ trình bày về Caching để các bạn hiểu vì sao nó lại quyền năng mà cũng lại rắc rối như thế.Hôm nay chúng ta cùng tìm hiểu về vấn đề này nhé. Mục lục Đường đi của 1 reques
Read more »

Cài đặt môi trường để code website Rails

Hình ảnh
Để xây dựng một website bẳng rails đầu tiên chúng ta cần phải xây dựng môi trường đúng chứ.Bài này mình sẽ hướng dẫn các bạn cài đặt môi trường để làm việc nhé. 1.Hệ điều hành Để làm việc được đơn giản mình gợi ý là dùng ubuntu,nếu bạn nào dùng mac thì quá tuyệt rồi.Mình không có tiền mua mac để code nên mình cài ubuntu để làm việc nhé,bạn nào có sử dụng window mà không muốn đổi hệ điều hành thì mình gợi ý nên sử dụng wubi để cài song song ubuntu nghịch cho biết, đây là bài hướng dẫn cài wubi nhé các bạn . 2.Cài đặt ruby Rails là một framework xây dựng website của ngôn ngữ ruby nên chắc chắn chúng ta phải cài ruby để làm việc rồi.Để cài đặt ruby chúng ta làm như sau: +,Bước đầu cần cài node và các công cụ phụ trợ của node curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list s
Read more »