Hiện nay, cho những bạn còn đang thắc mắc SPA là gì, thì đây là những gì mà nó có thể làm. Trong hệ thống cũ, khi một yêu cầu xuất hiện trên một công vụ tìm kiếm để tải một ứng dụng web, nó sẽ được chuyển đổi về máy chủ. Dữ liệu này được tải từ máy chủ và sau đó dược gửi đến trình duyệt của người dùng. Mỗi lần người dùng yêu cầu hiển thị một trang mới thì dữ liệu cần được lấy từ máy chủ và xử lý lại. Trong SPA, việc chuyển dữ liệu chỉ được thực hiện một lần. Điều này không nghĩa là khi người dùng yêu cầu tải một trang mới thì trình duyệt sẽ hiển thị cùng một trang lần nữa. Thay vào đó, toàn bộ JavaScript (JS) sẽ được tải trong một lần duy nhất và chỉ có các thành phần mới được tải trong những yêu cầu tiếp theo của người dùng. Việc làm mới sẽ không còn được thực hiện nữa. Nói một cách khác là bạn có thể hoàn thành tất cả chỉ trên một trang duy nhất của ứng dụng. Gmail chính là một ví dụ điển hình của SPA. Bạn không cần phải liên tục làm mới để tải thư mới vào hộp thư của mình. React và Angular - Cái nhìn tổng quanBây giờ chúng ta sẽ trở lại câu hỏi về React và Angular. React.js hoặc ReactJS là một thư viện JavaScript cho các thành phần giao diện người dùng (UI) được phát triển bởi Facebook. Một mã có thể được tái sử dụng với các tùy chọn tải lại hấp dẫn giúp cho những ứng dụng nền tảng chéo được phát triển dễ dàng hơn.
Angular.js hoặc Angular JS 1.X là một khuôn dạng ứng dụng web dựa trên mã nguồn mở thuộc JavaScript của Google. Nó ảnh hưởng đến cách mã người dùng sử dụng JS. Cả 2 đều thực hiện những nhiệm vụ giống nhau. Angular sử dụng JS và HTML có một DOM thông thường và cung cấp khả năng ràng buộc dữ liệu 2 chiều. Hiệu suấtDữ liệu ràng buộc trong Angular phản ánh bất kì sự thay đổi dữ liệu nào trong mô hình cũng như trên chế độ xem. Và những dữ liệu thay đổi trong chế độ xem cũng được cập nhập trên mô hình. Khi cần xử lý một lượng dữ liệu lớn, việc này có thể sẽ làm giảm tốc độ ứng dụng. React sử dụng JSX, có một DOM ảo và cung cấp dữ liệu kết nối một chiều. Vì vậy, thay đổi dữ liệu không cần phải được thể hiện trong cả mô hình và chế độ xem. Khả năng tái sử dụng của codeTrong React, code rất dễ hiểu và sử dụng ít trừu tượng hơn, mặc dù phải mất thời gian để thiết lập các dự án sử dụng React. Angular phức tạp và khó điều khiển vì thư viện của bên thứ ba và các cú pháp. Khả năng mở rộngSo với React, thiết kế và Giao diện dòng lệnh (CLI) mạnh mẽ giúp cho việc mở rộng các ứng dụng Angular dễ dàng. React đã được kiểm chứng và có thể được mở rộng hơn nữa. Thử nghiệmTrong Angular, mọi đoạn code đều có thể dễ dàng kiểm chứng được. Ngược lại, dùng React để gỡ lỗi code được đánh giá là dễ dàng hơn. React hay Angular, phiên bản nào phù hợp với bạn nhất? Điều này phần lớn phụ thuộc vào sự phức tạp, thời gian tiếp thị, ngân sách và tùy vào mục đích sử dụng của bạn. Angularjs: Nó ra đời từ năm 2009, và sắp có phiên bản 2.0 dự kiến đầu năm 2016 sẽ release. Phiên bản Angular hiện tại dùng nhiều những thuộc tính(attributes) và những thành phần(elements), html để cung cấp tính năng trên nhiều thành phần DOM khác nhau. Những phần này gọi là directives và chúng rất tiện dụng. về cấu trúc khởi tạo của angularjs thì cũng không có gì phức tạp nó chỉ hơi dài 1 chút(bao gồm 1 application và 1 controller và directive nếu có) Eg:
<html ng-app="demoApp">
<head></head>
<body ng-controller="demoController">
<test-first />
</body>
</html>
var app = angular.module("demoApp", []);
app.controller("demoController", function() {
});
app.directive("testFirst", function() {
return {
restrict: "E",
template: "<div>Xin Chao</div>"
};
});
- React JS: Là một framework hiển thị view chú ý đến hiệu năng (performance-minded) được tạo ra bởi Facebook. React cũng dùng cái gọi là “DOM ảo” (“virtual DOM”) để tăng hiệu năng bằng cách xuất ra một hiển thị ảo, sau đó kiểm tra sự khác biệt giữa hiển thị ảo và những gì có trên DOM và tạo một bản vá (a patch). Về cấu trúc của react thì đơn giản hơn angularjs, React yêu cầu tạo một class để định nghĩa những HTML cần hiển thị. Đó là những gì chúng ta cần tạo ra trong phần JavaScript.
Eg:
<html>
<head></head>
<body></body>
</html>
var DemoFirst = React.createClass({
render: function() {
return <div>Xin chào</div>;
}
});
React.render(new DemoFirst(), document.body);
đặc biệt với reactjs thì phần HTML của React thì không có gì đáng để chú ý cả, và nó sẽ không thay đổi trong xuyên suốt bài, nên bạn có thể không cần để ý đến nó nữa. Trên đây tôi đã tổng hợp qua về khái niện angularjs và reactjs, sau đây tôi sẽ nói đến sự khác nhau giữa chúng Về chèn dữ liệu
- Angularjs: Angular chèn dữ liệu là thông qua scopes. scope trong Angular là một đối tượng chứa dữ liệu cho nhiều controls, như directives và controllers. Trên tất cả các scope, có một đối tượng scope root ($rootScope), nó hoạt động như là scope trên cùng, được truy xuất bởi tất cả những thành Angular khác.
- Một chú ý nhỏ đó là một directive có thể có một trong một vài kiểu scope:
- Không có scope, nghĩa là directive dùng scope của cha nó (thường là scope của controller).
- Scope độc lập, nghĩa là directive có scope của riêng nó, hoàn toàn tách biệt với scope của controller. Thường thì, scope của controller được dùng để chèn dữ liệu vào scope độc lập của directive.
Eg:
<html ng-app="demoApp">
<head></head>
<body ng-controller="demoController">
<demo-first name="{{name}}" />
</body>
</html>
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
$scope.name = "Nguyen Van A";
});
app.directive("demoFirst", function() {
return {
restrict: "E",
template: "<div>Hello, {{name}}!</div>",
scope: {
name: "@"
}
};
});
- React JS: React chèn dữ liệu vào views vào lúc khởi tạo class, lúc root view được tạo hoặc thông qua nested view. Bên trong class, dữ liệu được truyền vào và truy xuất thông qua thuộc tính props của ngữ cảnh hiện tại.
Eg:
var DemoFirst = React.createClass({
render: function() {
return <div>{this.props.name}</div>;
}
});
React.render(<DemoFirst name="Nguyen Van A" />, document.body);
Nested Views
- Angularjs: Nested Views trong Angular được hiện thực bằng việc dùng nhiều directives. Một directive có thể tham chiếu tới một directive khác. Chú ý là mỗi directive có thể có scope độc lập của riêng nó.
- Reactjs: Nested element trong React dễ dùng hơn nhiều so với angularjs. Chúng ta khai báo nhiều classes, rồi tham chiếu class con trong hàm render của class cha.
Eg:
var FirstMethod = React.createClass({
render: function() {
return (<div>
<div>Name: {this.props.name}</div>
<div>Address: {this.props.address}</div>
<NestedView />
</div>
);
}
});
var NestedView = React.createClass({
render: function(){
return <div>Good Bye</div>;
}
});
React.render(<FirstMethod name={"Nguyen Van Dung"} address={"Dong Anh - Ha Noi"} />,document.body);
Event Handlers
- Angularjs: có các sự kiện chính như
- Mouse events
- Keyboard events
- Change events
Trong Angular, hàm xử lý sự kiện thường được gán cho nhiều thành phần khác nhau trong view chủ yếu thông qua template trong directives
Eg: Sự kiện ng-click
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
});
app.directive("testFirst", function() {
return {
restrict: "E",
template: "<button ng-click='showName();'>Show Name</button><br /><div>{{name}}</div>",
link: function(scope) {
scope.showName = function() {
scope.name = "Nguyen Van A";
}
}
};
});
- Reactjs: Xử lý sự kiện trong React làm việc thông qua việc thiết lập những thuộc tính tùy chỉnh cho những thành phần HTML, Nổi trội là dùng state.Mỗi class React có state riêng của nó mà bên ngoài không thể sửa đổi. chỉ có thể sửa đổi state của một class/view bằng việc gọi phương thức setState của view’s context
Eg:
var DemoFirst = React.createClass({
getInitialState: function() {
return {
firstName: ""
};
},
showName: function() {
this.setState({ firstName: "Hello, " + this.props.name + "!" });
},
render: function() {
return <div>
<button onClick={this.showName}>SHOW NAME</button>
<br />
<span>{this.state.firstName}</span>
</div>;
}
});
React.render(<DemoFirst name={"Nguyen Van A"} />,document.body);
Vòng lặpCả Angular và React đều cung cấp những cách thức để hiển thị views bằng cách lặp qua tập hợp dữ liệu. Với Angular thì dùng ng-repeat. Còn React thì lặp như viết cho javascript | 
