() translation by (you can also view the original English article)
Trong bài này, chúng ta sẽ tìm hiểu về Ionic 2, phiên bản mới nhất của framework ứng dụng di động đa nền tảng Ionic. Để bắt đầu, chúng ta sẽ tìm hiểu vắn tắt Ionic là gì và nó được sử dụng để làm gì. Sau đó, chúng ta sẽ đi sâu vào Ionic 2. Tôi sẽ cho bạn thấy có gì mới và nó khác với Ionic 1 như thế nào, và tôi sẽ giúp bạn quyết định bạn có nên sử dụng nó trong dự án tiếp theo của bạn hay không.
Ionic là gì?
Ionic là một framework dùng để xây dựng các ứng dụng lai bằng cách sử dụng HTML, CSS, và JavaScript. Nó đi kèm với một tập hợp các thành phần giao diện và các hàm mà bạn có thể sử dụng để tạo ra các ứng dụng di động đầy đủ chức năng và hấp dẫn.
Ionic được xây dựng trên Cordova stack. Bạn không thể tạo các ứng dụng di động với một mình Ionic bởi vì nó chỉ xử lý một phần giao diện người dùng. Nó cần phải làm việc với Angular, cái mà xử lý các logic của ứng dụng, và Cordova, framework ứng dụng đa nền tảng cho phép bạn biên dịch ứng dụng của bạn thành một tập tin có thể cài đặt và chạy nó bên trong web view của thiết bị di động.
Ứng dụng được xây dựng với Cordova và Ionic có thể chạy trên cả thiết bị Android và iOS. Bạn cũng có thể cài đặt các plugin của Cordova để cung cấp các chức năng gốc như truy cập vào camera và làm việc với các thiết bị Bluetooth Low Energy.
Để biết thêm về Cordova, hãy kiểm tra một số khóa học và các hướng dẫn của chúng tôi ở đây trên Envato Tuts+.
Ionic không chỉ là một framework giao diện người dùng. Công ty Ionic còn cung cấp các dịch vụ hỗ trợ Ionic UI Framework, bao gồm Ionic Creator, Ionic View và Ionic Cloud.
Có gì mới trong Ionic 2?
Trong phần này, chúng ta sẽ tìm hiểu một số thay đổi đáng kể đối với Ionic phiên bản 2, và đồng thời các tính năng và các công cụ mới đã được giới thiệu trong Ionic 2.
Trình duyệt Hỗ trợ
Ionic 1 được xây dựng chỉ cho các ứng dụng lai. Nhưng Ionic 2 còn được xây dựng để hỗ trợ các ứng dụng web hiện đại và các ứng dụng Electron. Điều này có nghĩa rằng, bây giờ bạn có thể xây dựng không chỉ các ứng dụng Ionic chạy bên trong môi trường Cordova mà còn các ứng dụng web hiện đại, sử dụng tính năng web hiện đại để cung cấp một trải nghiệm giống như ứng dụng cho người dùng.
Bạn cũng có thể chọn Electron, một nền tảng cho việc xây dựng các ứng dụng Desktop đa nền tảng bằng cách sử dụng HTML, CSS, và JavaScript. Electron khá giống với Cordova, nhưng cho các hệ điều hành desktop như Windows, Ubuntu hay macOS.
Angular 2 và TypeScript
Ionic 2 giờ đây sử dụng Angular 2 cho template và logic của ứng dụng. Điều này có nghĩa rằng các nhà phát triển sẽ phải tìm hiểu cú pháp mới của Angular 2 trước khi họ có thể tạo ra các ứng dụng Ionic 2 hiệu quả. Tuy nhiên, đừng lo lắng, bởi vì các khái niệm vẫn giống như Angular 1. Ngoài ra còn có các nguồn tài nguyên như ngMigrate sẽ giúp bạn chuyển đổi Angular 1 sang Angular 2.
Ngoài Angular 2, Ionic 2 cũng sử dụng TypeScript. Đối với những người không quen với nó, TypeScript là một superset của JavaScript. Điều này có nghĩa rằng bạn vẫn có thể sử dụng cú pháp thuần JavaScript để viết các ứng dụng của bạn. Nếu bạn muốn sử dụng các tính năng đi kèm với TypeScript, chẳng hạn như cú pháp ES6 và ES7, static-typing, và tính năng hoàn tác code thông minh, thì bạn có thể sử dụng cú pháp cụ thể của TypeScript. Có các plugin mà bạn có thể cài đặt trên trình soạn thảo văn bản hoặc IDE ưa thích của bạn để tận dụng những lợi ích của của các tính năng hoàn tác code cao cấp của TypeScript.
Cú pháp
Như tôi đã đề cập các cú pháp template trong Ionic 2 đã thay đổi đáng kể, phần lớn là do quá trình chuyển đổi để sử dụng Angular 2. Bạn thậm chí có thể thấy rằng các cú pháp mới là đơn giản và súc tích hơn. Dưới đây là một vài ví dụ cú pháp của Ionic 1 và Ionic 2 nằm cạnh nhau:
Lắng nghe các Sự kiện:
1 |
<!--ionic 1-->
|
2 |
<button on-tap="onTap()" class="button">Test</button> |
3 |
|
4 |
<!--ionic 2-->
|
5 |
<button (tap)="onTap($event)">Test</button> |
Sử dụng một Model:
1 |
<!--ionic 1-->
|
2 |
<input ng-model="email" /> |
3 |
|
4 |
<!--ionic 2-->
|
5 |
<input [(ng-model)]="email" /> |
Lặp qua một mảng và hiển thị mỗi phần tử:
1 |
<!--ionic 1-->
|
2 |
<li ng-repeat="item in list"> |
3 |
{{ item.name }}
|
4 |
</li>
|
5 |
|
6 |
<!--ionic 2-->
|
7 |
<li *ngFor="let item of list"> |
8 |
{{ item.name }}
|
9 |
</li>
|
Cấu trúc Thư mục
Nếu bạn so sánh cấu trúc thư mục của một dự án Ionic 1 và một dự án Ionic 2, bạn sẽ thấy rằng hầu hết các thư mục mà bạn thường thấy trong một dự án Ionic 1 vẫn còn Ionic 2. Điều này là bởi vì nền tảng cơ bản vẫn chưa thực sự thay đổi—Ionic 2 vẫn sử dụng Cordova. Những thứ duy nhất đã thay đổi là các bộ phận mà phải làm việc với các tập tin mã nguồn của bạn. Dưới đây là một ảnh chụp màn hình của cấu trúc thư mục của một ứng dụng Ionic 1:
Và đây là một ứng dụng được xây dựng với Ionic 2:
Nếu bạn nhìn kỹ hơn, bạn sẽ nhận thấy rằng bây giờ thư mục src. Đó là nơi chứa tất cả các tập tin mã nguồn của dự án, và mỗi khi bạn thay đổi một tập tin trong thư mục đó, các tập tin đã thay đổi được biên dịch và sao chép lên vào thư mục www/build. Trước đó, tất cả các tập tin mã nguồn ở trong mục www, và bạn không cần thêm một bước biên dịch.
Cấu trúc thư mục cũng được tổ chức tốt hơn. Nếu bạn kiểm tra thư mục src/pages, bạn có thể thấy rằng mỗi trang có thư mục riêng của mình, và bên trong mỗi trang là các tập tin HTML, CSS và JavaScript cho trang cụ thể đó.
Trước đó, trong Ionic 1, bạn đã chỉ định một thư mục rỗng và tự do cấu trúc dự án của bạn theo ý bạn muốn. Nhưng điều này đi kèm với nhược điểm không buộc bạn làm các thứ theo cách tốt nhất. Bạn có thể lười biếng và gắn bó với một cấu trúc gộp tất cả các tập tin với nhau, nó có thể làm cho các thứ trở nên khó khăn cho các nhóm lớn hơn làm việc trên các ứng dụng phức tạp.
Theme
Không giống như phiên bản trước đó của Ionic, chỉ có một giao diện duy nhất cho tất cả các nền tảng, Ionic 2 bây giờ hỗ trợ ba chế độ: Material Design, iOS và Windows. Bây giờ, Ionic tệp với giao diện của nền tảng mà nó được triển khai. Vì vậy nếu ứng dụng của bạn được cài đặt trên Android, ví dụ là vậy, nó sẽ sử dụng một phong cách và hành vi tương tự như ứng dụng Android gốc.
Có một sự hỗ trợ cho thiết kế theme trong Ionic, mặc dù tại thời điểm viết bài này, nó chỉ đi kèm với theme Light mặc định. Nếu bạn muốn tinh chỉnh theme, bạn có thể chỉnh sửa tập tin src/theme/variables.scss.
Công cụ
Ionic 2 cũng đi kèm với các công cụ mới mà sẽ tạo ra một hứng thú để tạo ra các ứng dụng di động. Tôi sẽ cho bạn thấy một số công cụ trong phần này.
Generator
Ionic 2 bây giờ cung cấp một generator cho phép bạn tạo các trang và dịch vụ cho ứng dụng của bạn:
1 |
ionic g page contactPage |
Điều này sẽ tạo ra các tập tin trong thư mục app/pages:
1 |
contact-page/contact-page.html |
2 |
contact-page/contact-page.ts |
3 |
contact-page/contact-page.scss |
Mỗi tập tin cũng có một số code mẫu trong đó:
1 |
<!--contact-page.html-->
|
2 |
<ion-header>
|
3 |
|
4 |
<ion-navbar>
|
5 |
<ion-title>contactPage</ion-title> |
6 |
</ion-navbar>
|
7 |
|
8 |
</ion-header>
|
9 |
|
10 |
|
11 |
<ion-content padding> |
12 |
|
13 |
</ion-content>
|
Chúng cũng phục vụ như là một hướng dẫn cho các nhà phát triển mới, do đó họ biết được cách làm tốt nhất cho cấu trúc code của họ. Đây là code TypeScript được tạo ra để xử lý logic cho trang ở trên:
1 |
//contact-page.js
|
2 |
import { Component } from '@angular/core'; |
3 |
import { NavController, NavParams } from 'ionic-angular'; |
4 |
|
5 |
/*
|
6 |
Generated class for the ContactPage page.
|
7 |
|
8 |
See http://ionicframework.com/docs/v2/components/#navigation for more info on
|
9 |
Ionic pages and navigation.
|
10 |
*/
|
11 |
@Component({ |
12 |
selector: 'page-contact-page', |
13 |
templateUrl: 'contact-page.html' |
14 |
})
|
15 |
export class ContactPagePage { |
16 |
|
17 |
constructor(public navCtrl: NavController, public navParams: NavParams) {} |
18 |
|
19 |
ionViewDidLoad() { |
20 |
console.log('ionViewDidLoad ContactPagePage'); |
21 |
}
|
22 |
|
23 |
}
|
Báo Lỗi
Ionic 2 bây giờ đi kèm với một công cụ báo lỗi cho front-end. Điều này có nghĩa rằng bất kỳ thời điểm nào có một lỗi với code của bạn, thì Ionic sẽ mở một cửa sổ ngay bên phải trong preview của chính app. Điều này thực sự giúp dễ dàng cho các nhà phát triển tìm hiểu về các lỗi khi chúng xảy ra trong ứng dụng.
Ionic App Script
Các Ionic App Script là một bộ sưu tập các build script cho các dự án Ionic. Trước đó, Ionic sử dụng Gulp để xử lý quá trình build.
Ionic 2 đi kèm với một vài script này giúp nó dễ dàng hơn để hoàn thành các tác vụ phát triển thông thường. Điều này bao gồm những thứ như chuyển đổi code TypeScript thành ES5, phục vụ cho ứng dụng để thử nghiệm trong trình duyệt, hoặc chạy nó trên một thiết bị cụ thể.
Bạn có thể tìm thấy các script mặc định trong tập tin package.json của dự án:
1 |
"scripts": { |
2 |
"clean": "ionic-app-scripts clean", |
3 |
"build": "ionic-app-scripts build", |
4 |
"ionic:build": "ionic-app-scripts build", |
5 |
"ionic:serve": "ionic-app-scripts serve" |
6 |
},
|
Các Thành phần mới
Các thành phần là các khối xây dựng giao diện người dùng trong Ionic. Ví dụ như button, card, list, và các input. Rất nhiều thành phần mới đã được thêm vào Ionic 2, và trong phần này chúng ta sẽ xem xét một số chúng.
Slides
Nếu bạn muốn ứng dụng của bạn có một hướng dẫn cho người dùng lần đầu, thì thành phần Slides giúp dễ dàng tạo ra một hướng dẫn như vậy. Thành phần này cho phép bạn tạo ra các layout dựa trên trang mà người dùng có thể vuốt qua để đọc tất cả về ứng dụng của bạn.
Action Sheet
Các Action Sheet là các menu trượt lên từ phía dưới màn hình. Một Action Sheet được thể hiện trên lớp trên cùng của màn hình, do đó bạn hoặc là phải bỏ qua nó bằng cách bấm vào khoảng trống hoặc chọn một tùy chọn từ menu. Điều này thường được sử dụng cho các xác nhận chẳng hạn như khi bạn xoá bỏ một tập tin trên thiết bị iOS của bạn.
Segments
Segments giống như các tab. Chúng được sử dụng để nhóm các nội dung liên quan lại với nhau theo một cách mà người dùng chỉ có thể nhìn thấy các nội dung của segment (phân đoạn) hiện đang được chọn. Segments thường được sử dụng với danh sách để lọc các phần tử liên quan.
Toast
Toast là biến thể nhẹ của cảnh báo. Chúng thường được sử dụng để thông báo cho người dùng một cái gì đó đã xảy ra mà không yêu cầu bất kỳ hành động nào từ người dùng. Chúng thường được hiển thị ở đầu hoặc cuối trang để không làm ảnh hưởng đến nội dung đang được hiển thị. Chúng cũng biến mất sau một số giây cụ thể.
Toolbar
Một Toolbar được sử dụng như một kho chứa cho thông tin và các hành động được đặt ở header hay footer của ứng dụng. Ví dụ, tiêu đề của màn hình hiện tại, các button, tìm kiếm và các phân đoạn thường được chứa trong một toolbar.
DateTime
Thành phần DateTime được sử dụng để hiển thị một giao diện người dùng để chọn ngày và giờ. Giao diện tương tự như cái được tạo ra khi sử dụng phần tử datetime-local, sự khác biệt duy nhất là thành phần này đi kèm với một JavaScript API dễ sử dụng. Trước đó, Ionic đã không có một thành phần nào để làm việc với ngày và giờ. Bạn hoặc có thể sử dụng bảng chọn ngày gốc của trình duyệt hoặc cài đặt một plugin.
Floating Action Button
Floating Action Button (FAB) là button được cố định trong một khu vực cụ thể của màn hình. Nếu bạn đã từng sử dụng ứng dụng Gmail, button cho soạn thư mới là một Floating Action Button. Chúng không giới hạn đối với một hành động duy nhất bởi vì chúng có thể mở rộng để hiển thị những Floating Action Button khác khi được nhấp vào.
Để biết thêm chi tiết về các thành phần mới, hãy kiểm tra tài liệu về các thành phần.
Các Tính năng và Cải tiến mới
Ionic 2 cũng được đóng gói cùng với các tính năng và cải tiến mới. Những điều này chủ yếu là do nó chuyển sang Angular 2 và TypeScript.
Web Animations API
Một lợi ích khi chuyển sang Angular 2 là hệ thống hiệu ứng động mới của Angular, được xây dựng dựa trên Web Animations API. Lưu ý rằng Web Animations API không được hỗ trợ trong tất cả các trình duyệt—đó là lý do tại sao bạn cần phải sử dụng Crosswalk để cài đặt một trình duyệt hỗ trợ cùng với ứng dụng của bạn. Nhược điểm duy nhất của cách này là nó sẽ làm cho kích thước cài đặt lớn hơn. Một tùy chọn khác là sử dụng một polyfill.
Hiệu năng
Các ứng dụng được tạo ra với Ionic 2 thì linh hoạt hơn so với những cái được tạo ra với Ionic 1. Đây là lý do tại sao:
- Angular 2: Hiệu suất thao tác DOM và JavaScript đã được cải thiện rất nhiều trong Angular 2. Bạn có thể kiểm tra bảng này nếu bạn muốn tìm hiểu về các chi tiết cụ thể. Một lợi ích khác đi kèm với Angular 2 đó là tiền biên dịch—các template được biên dịch trước bằng cách sử dụng một công cụ build thay vì được biên dịch như ứng dụng chạy trong trình duyệt. Điều này làm cho ứng dụng khởi tạo nhanh hơn vì không cần phải biên dịch các template đồng thời.
- Cuộn trang Gốc: Ionic không còn sử dụng JavaScript để cuộn trang nữa. Thay vào đó, nó bây giờ sử dụng cuộn trang gốc được hỗ trợ trong WebView. Nó bây giờ cũng được kích hoạt trên tất cả các nền tảng (trái ngược với nó chỉ được hỗ trợ trên Android trong Ionic 1). Ngoài cuộn trang gốc, còn có Cuộn trang Ảo cho phép di chuyển trên một danh sách rất lớn của các phần tử rất ít ảnh hưởng đến hiệu suất. Hai thay đổi này làm cho việc cuộn trang trở nên mượt mà hơn.
- Web Worker: Web Worker cho phép bạn chạy các script trong nền, cô lập khỏi các tiến trình chạy các trang web. Ionic 2 cài đặt các web worker thông qua thành phần
ion-imgcủa chúng. Sử dụng thành phần này thay vì thành phầnimgtiêu chuẩn cho phép bạn phân bổ các yêu cầu HTTP để lấy hình ảnh đến một Web Worker. Điều này làm cho việc tải hình ảnh trở nên mạnh mẽ hơn, đặc biệt là bên trong các danh sách lớn. Thành phầnion-imgcũng xử lý kỹ thuật lazy loading, nó sẽ chỉ yêu cầu và kết xuất hình ảnh khi nó hiện hữu trong viewport của người dùng.
Ionic Native
Ionic Native tương đương với ngCordova cho Ionic 2. Cả hai đều hoạt động như các wrapper cho các plugin Cordova để cài đặt các tính năng gốc (ví dụ như Camera, vị trí). Bạn thậm chí có thể sử dụng Inonic Native trong ứng dụng Ionic 1 của bạn nếu bạn muốn. Sự khác biệt chính đó là Ionic Native cho phép bạn viết code của bạn sử dụng các tính năng của ES6 và cú pháp của TypeScript. Điều này giúp dễ dàng hơn để làm việc với Ionic 2 vì nó đã mặc định sử dụng TypeScript. Dưới đây là một ví dụ về cách làm thế nào để cài đặt plugin Cordova Camera trong ngCordova:
1 |
$cordovaCamera.getPicture({ quality: 50 }).then(function(imageData) { |
2 |
|
3 |
var image = "data:image/jpeg;base64," + imageData; |
4 |
}, function(err) { |
5 |
|
6 |
});
|
Và nó được thực hiện bằng cách sử dụng Ionic Native:
1 |
import { Camera } from 'ionic-native'; |
2 |
|
3 |
Camera.getPicture(options).then((imageData) => { |
4 |
|
5 |
let base64Image = 'data:image/jpeg;base64,' + imageData; |
6 |
}, (err) => { |
7 |
|
8 |
});
|
Tài liệu Hướng dẫn
Tài liệu hướng dẫn đã được cải thiện rất nhiều. Tôi đặc biệt thích một thực tế rằng bây giờ có các preview khác nhau đối với mỗi thành phần trên mỗi nền tảng. Điều này cho phép các nhà phát triển có được một ý tưởng thực sự tốt về cách ứng dụng của họ sẽ trông như thế nào. Tất cả điều này không cần các nhà phát triển phải viết một dòng code nào!
Bạn có nên sử dụng Ionic 2?
Tại thời điểm của bài viết này, Ionic 2 đã được phát hành. Điều này có nghĩa rằng nó đã sẵn sàng để được sử dụng để viết các ứng dụng. Xem xét tất cả các tính năng, công cụ và lợi ích mới đi kèm với Angular 2 và TypeScript, điều duy nhất mà sẽ ngăn bạn sử dụng Ionic 2 là trạng thái của các dự án.
Nếu bạn chỉ vừa mới bắt đầu một dự án mới, bạn vẫn có thể sử dụng Ionic 1 nếu bạn và đồng nghiệp của bạn chỉ quen thuộc với Angular 1 và dự án của bạn cần được hoàn thành càng sớm càng tốt. Nhưng nếu bạn vẫn còn dư thời gian cho dự án, bạn nên xem xét sử dụng Ionic 2. Sẽ cần một chút tìm hiểu, và bạn cũng sẽ gặp phải một số vấn đề, bởi vì nó không đơn giản như Ionic 1, nhưng rất đáng để bạn tìm hiểu bởi vì các tính năng và cải tiến mới rất tuyệt vời của Ionic 2.
Nếu bạn đã bắt đầu dự án hiện tại của bạn với Ionic 1, có lẽ bạn sẽ muốn gắn bó với Ionic 1 và tránh viết lại phần lớn. Đừng lo lắng quá nhiều về hỗ trợ, cải tiến và sửa lỗi cho Ionic 1—các nhà phát triển Ionic đã cam kết hỗ trợ Ionic 1 trong một thời gian dài. Trong bao lâu thì không rõ. Ít nhất, nó sẽ được hỗ trợ trong một vài năm sau khi phiên bản ổn định của Ionic 2 được phát hành. Nhưng chúng ta cũng cần phải ghi nhớ rằng Ionic là một dự án mã nguồn mở với hơn 200 người đóng góp. Do đó, miễn là người ta tiếp tục sử dụng nó, chúng ta luôn luôn có thể mong đợi một số hình thức hỗ trợ từ cộng đồng.
Tóm tắt
Như vậy đấy! Trong bài viết này, bạn đã học được tất cả về Ionic 2. Cụ thể, bạn đã học được về sự khác biệt đáng kể giữa Ionic 2 và người tiền nhiệm của nó. Chúng ta cũng đã tìm hiểu các tính năng mới được thêm vào Ionic 2, và bạn có nên sử dụng nó cho các dự án trong tương lai hay không. Trong một hướng dẫn tiếp theo, chúng ta sẽ áp dụng kiến thức này bằng cách tạo ra một ứng dụng Ionic 2. Nhớ theo dõi nhé!
Nếu bạn muốn tìm hiểu thêm về Ionic 2, hãy chắc chắn kiểm tra các nguồn tài nguyên sau đây:
Và tất nhiên, chúng tôi có một khóa học chuyên sâu về Ionic 2 mà bạn có thể làm theo, ngay ở đây trên Envato Tuts+!
