Posts Tagged ‘Mobile web’

Tổng quan về thư viện sencha touch

Tháng Mười Một 12, 2013

Với sự phát triển của công nghệ hiện tại. Các ứng dụng trên các điện thoại smartphone đang trở thành tiêu điểm cho các nhà phát triển hướng đến. Và nếu như để phát triển ứng dụng trên hệ máy androi thì người dùng phải học lập trình android hay với ios người dùng phải học về ios. Thì nay, với sự trợ giúp của thư viện sencha touch. Người dùng hoàn toàn chỉ phải học duy nhất sencha touch là đã có thể triển khai ứng dụng được trên các hệ máy android, ios, ipad,…..

Sencha Touch sử dụng thư viện js viết trên môi trường web app. Nghĩa là biến 1 trang web trở thành 1 app trong điện thoại di động. Điều này sẽ giúp cho ích rất nhiều cho việc lập trình trên điện thoại di động. Vì hầu hết các hệ máy hiện nay đều đã hỗ trợ người dùng lướt web.

Nếu như 1 ứng dụng bạn phải tồn khá nhiều thời gian để xây dựng trên androi. Thì với sencha touch điều đó sẽ được rút gọn lại rất nhiều. Sencha Touch sở hữu 1 thư viên hữu dụng với: panel, tab panel, dataview list, form, Carousel,….Những thư viện này sẽ góp phần giúp người lập trình dễ dàng thao tác và xử lý các ứng dụng phức tạp một cách dễ dàng.

Sencha Touch mặc dù là thư viện js, nhưng để xây dựng web app. Sencha hỗ trợ mô hình lập trình m-v-c (model-view-controller). Từ đó làm cho mã nguồn trở nên trong sáng và dễ phát triển, nâng cấp hơn rất nhiều so với các mô hình lập trình thông thường.

Không giống như Model của các ngôn ngữ web (model của web thường sử dụng các câu truy vấn để lấy thông tin từ CSDL) sencha touch sử dụng model kết hợp với 1 khái niệm nữa là store để lấy dữ liệu. Store được sử dụng như 1 kênh thông tin lấy dữ liệu thông qua proxy dựa trên ajax hoặc giao thức REST trong web service để trả về định dạng dữ liệu là Json. Từ đó mới thao tác đổ dữ liệu ra view và controller.

Các sự kiện và cách gọi lớp sencha touch cũng giống với quy trình xử lý của zend framework. Chẳng hạn: 

Mã:
Ext.define('qho.controller.News',{
    extend:'Ext.app.Controller'
})

Nó giống với:

PHP Code:
<?php
class QHOController extends Zend_Controller_Action{

}
?>

Ngay cả quy trình làm việc với lớp, Sencha cũng cho ta thao tác giống với zend. Chẳng hạn Khi gọi lớp Zend_Controller_Action trong zend thì nghĩa là gọi file theo đường dẫn: Zend/Controller/Action.php. Thì với sencha Touch cũng thế: Khi gọi Ext.tab.Panel. Thì nghĩa là trong thư viện src/tab/panel.js. 

Với sự hỗ trợ mạnh mẽ và của sencha touch. Thì với một tương lai gần chúng ta hoàn toàn có thể kỳ vọng vào sự phát triển của môi trường web app trên di động. 

Hiện tại, phát triển song song với sencha là thư viện jquery mobile. Cả hai đều là những thư viện js phát triển riêng cho dòng điện thoại di động. Sắp tới QHOnline sẽ gởi đến các bạn những bài tutorial về sencha touch, jquery mobile. Hy vọng sẽ nhận được nhiều sự ủng hộ của các bạn nhiều hơn nữa.

Source: http://www.qhonline.info/forum/showthread.php/4531-tong-quan-ve-thu-vien-sencha-touch

Mobile web framworks

Tháng Mười Một 12, 2013

 

1. Hiện nay các nhà phát triển đang phát triển để HTML5 ngày càng hoàn thiện hơn và trong thời đại hiện nay các thiết bị cảm ứng phát triển mạnh và nhất là các smartphone cảm ứng như Iphone, Sony, HTC, Samsung, Motorola,…

2. Bên cạnh đó cũng có 1 số thư viện hỗ trợ chúng ta trong việc diễn hoạt và trình diễn trên mobile thông qua các sự kiện “event touch”, chúng ta có thể dựa vào bộ thư viện mà chúng ta yêu thích để phát triển và tùy chỉnh.

3. Trong HTML5 hiện tại có hỗ trợ một số event touch như sau:

  1. ontouchcancel
  2. ontouchend
  3. ontouchenter
  4. ontouchleave
  5. ontouchmove
  6. ontouchstart

4. Hiện nay có nhiều thư viện hỗ trợ cho các sự kiện touch trên các thiết bị cảm ứng như
Một số thư viện hỗ trợ sau:

  • 1. Sencha Touch
  • 2. jQuery Mobile
  • 3. Kinetic
  • 4. jQTouch
  • 5. Và một số thư viện khác như DHTMLX Touch, MagicTouch, Titanium,  …

Tùy trưởng hợp và yêu cầu mà chúng ta nên cân nhắc sử dụng những thư viện nói trên:

  • 1. Do yêu cầu của khách hàng
  • 2. Do thư viện này không hỗ trợ mà các thư viện khác hỗ trợ (đòi hỏi phải hiểu nhiều thư viện)
  • 3. Hoặc chúng ta có thể viết thêm để sử dụng những gì mà thư viện không hỗ trợ…

5. So sánh một số ưu điểm và nhược điểm của những thư viện nói trên

  • jQTouch : là dễ dàng để sử dụng . Thích hợp trong việc xây dựng các ứng dụng cho iPhone với HTML, CSS, và JavaScript . jQTouch có một cách tiếp cận tiến bộ cung cấp một thiết lập cơ bản của các vật dụng và hình ảnh động. Tuy nhiên, hiệu suất của thư viện hoạt động không tốt.
  • jQuery Mobile : ra đời vào khoảng tháng 8 năm 2010 , nhưng vẫn được nhiều người biết đến do tính phổ biến, dễ hiểu và được nhiều lập trình viên sử dụng và viết các plugin bổ sung miễn phí. jQuery mobile mạnh hơn jQTouch về mặt hiệu suất, các hiệu ứng chuyển động tốt hơn. Nhưng jQuery mobile chưa được hoàn thiện ở giai đoạn hiện tại vì nó ra đời sau và còn khá non trẻ. Tuy nhiên, trong tương lai gần jQuery mobile có thể là 1 thư viện hỗ trợ mạnh mẽ công nghệ HTML5 cho các thiết bị di động cảm ứng.
  • Sencha Touch : là một thư viện có hiệu suất tốt hơn, bắt buộc sử dụng dữ liệu kiểu Json và tập trung vào việc xử lý các đối tượng DOM thay vì HTML như jQuery mobile và jQTouch.  Theo cộng đồng và tìm hiểu trên mạng thì đây là 1 thư viện tốt nhất hiện nay nhưng lại có tính phí. Việc sử dụng nó với phí l 299$/1 năm là một mặt hạn chế so với xu thế Phần mềm mã nguồn mở hiện nay.
  • Kinetic : là 1 thư viện không tính phí, hoạt động ổn định và hỗ trợ người dùng viết ứng dụng HTML5 trên nền 2D và 3D với 2 phiên bản khác nhau và liên tục được cập nhật. Hỗ trợ mạnh mẽ các diễn hoạt trên nền HTML5, các phương thức quản lý và kiểm soát một đối tượng bất kỳ khi chúng được thêm vào khung vẽ. Tuy nhiên , hiệu suất hoạt động chưa tốt khi thực hiện trên 1 số điện thoại cấu hình thấp.

6. Dựa vào bảng so sánh trên, tùy vào trường hợp và ưu điểm của từng thư viện mà chúng ta có thể sử dụng chúng để hỗ trợ trong công việc.

———————————

JQuery Mobile, 2 công nghệ đáng lưu ý cho ứng dụng web di động. 
Nếu bạn đang băn khoăn không biết nên lựa chọn nghiên cứu cái nào, 1 vài ý kiến khách quan sau đây hy vọng giúp bạn có được định hướng cho mình!

JQuery Mobile:
– Là 1 thư viện giao diện người dùng được xây dựng dựa trên Jquery & Jquery UI
– Để xây dựng UI widgets, bạn cần sử dụng các mã html được cung cấp và thư viện này hỗ trợ tăng cường giao diện thân thiện
– 1 số ứng dụng đơn giản có thể được tạo ra chỉ = html mà ko cần viết bất kỳ code Javascript nào
– Phù hợp với các dự án nhỏ, dễ học và nắm bắt nhanh, đặc biệt nếu bạn đã có nền tảng Jquery
– Không tuân theo 1 cấu trúc gì cả, rất linh hoạt. Nhưng điều này sẽ khiến bạn gặp khó khăn cho bảo trì sau này
– Dễ dàng tích hợp với các framework khác
– Hỗ trợ nhiều platform di động hơn Sencha Touch

Sencha Touch:
– Không phụ thuộc vào các thư viện khác
– Nó tập trung vào việc xây dựng = Javascript và sử dụng rất ít code html
– Phù hợp với các dự án lớn, cung cấp nhiều tính năng siêu việt nhưng sẽ mất nhiều thời gian để tìm hiểu
– Áp đặt code theo 1 cấu trúc nhất định. Tổ chức code tốt
– Được hỗ trợ xây dựng trên iOS & Android
– Hỗ trợ ít platform hơn Jquery Mobile
————————–

Quay lại với 2 frameworks nổi tiếng nhất là Sencha Touch và jQuery Mobile thì mình cũng xin chia sẻ ngắn gọn như sau:
– Sencha Touch: dùng javascript để build ra app, nó cung cấp sẵn cho bạn UI mặc định chính là UI của IOS trên IPhone, điều này thì quá tuyệt, để thay đổi UI, bạn được cung cấp ngôn ngữ SASS để generate ra CSS3, thứ bạn cần làm là chỉ là 1 việc duy nhất là code javascript. Nhưng… đó cũng chính là điểm yếu của nó, để tuỳ biến layout (ý mình là customize control theo ý mình). Sencha Touch bản thân được sinh ra là để tạo App trên Mobile Web, chứ không phải tạo ra nhưng website bóng bẩy trên Mobile Web. Hiểu ý mình hông? Thêm 1 tính năng tuyệt nữa là sencha touch được hỗ trợ bởi PhoneGap, điểu này đổng nghĩa với việc bạn build website 1 lần duy nhất bằng PhoneGap và có thể deploy trên cả 3 IPhone, Android và cả BlackBerry.

– jQuery Mobile: nếu bạn muốn build 1 website chạy tốt trên Mobile Web thì bạn nên chọn nó, vì cơ chế của nó là dùng HTML5, bạn chỉ cần code HTML theo chuẩn của nó, thêm css vào thì bạn sẽ có ngay 1 website gọn nhẹ, chạy tốt trên các loại mobile web.