- PhoneGap By Example
- Andrey Kovalenko
- 624字
- 2021-07-16 20:36:40
PhoneGap development highlights
We should mention some highlights before starting real development. They will help you understand why some mobile frameworks behave the way they do. The first thing we should understand is that a mobile device is more limited in resources than a computer. We should think of it from different aspects of the development.
Use a single-page application approach
Single-page application (SPA) is a web application or website that fits on a single web page with the goal of providing a more fluid user experience.
Loosely defined, a SPA is a client-side application that is run from one request of a web page. The user loads an initial set of resources (HTML, CSS, and JavaScript) and further updates (showing a new view, loading data) are done via AJAX.
Some SPA libraries you can use in your Cordova applications are:
- AngularJS
- EmberJS
- Backbone
- Kendo UI
- Monaca
- ReactJS
- Sencha Touch
- jQuery Mobile
Don't generate the UI on the server
Often, we need an interaction between our application and other servers. We need it to share data between multiple endpoints: other mobile devices, websites, and so on. Very often, the architecture is built in such a way that it sends not just data, but layout information as well.
It will be better to just create a needed set of data on the server side and send it with JSON, XML, or other formats. It can be customized as well. Do not send HTML through the Internet because it could be stored on the client. We will reduce the payload without sending HTML through Internet.
Limit network access
Cache static and dynamic data on the device. It can be filesystem, local storage, or database. Use the offline-first approach. We will discuss this approach in the upcoming chapters.
Increase perceived speed
We can create the illusion of faster hybrid application with the following approaches:
- Don't wait for the data to display the UI
- Avoid the click event's 300 ms delay
Tip
Do not use click events on the mobile devices. It works fine on the devices, but most devices impose a 300 ms delay on them in order to distinguish between a touch and a touch hold event. Using touchstart or touchend will result in a dramatic improvement—300 ms doesn't sound like much, but it can result in jerky UI updates and behavior.
Use hardware acceleration
Using hardware-accelerated CSS transitions will be dramatically better than using JavaScript to create animations. See the list of resources at the end of this section for examples.
Optimize images
Combine images in sprites. It will decrease the number of requests and will improve the speed of image display. Just use CSS sprite sheets, which support high-resolution screens.
You can read about sprites on the following sites:
There are a lot of other resources that you can find online as well.
Optimize payload
Compress CSS and JavaScript. Compress JPEG pictures. Don't use a full-stack framework just because you like a small piece of it. Use system fonts. Use fonts for icons.
Tip
For example, we can use FontAwesome from http://fortawesome.github.io/Font-Awesome/. It includes a lot of free icons we can use.
- Android應用程序開發與典型案例
- Python從菜鳥到高手（第2版）
- WSO2 Developer’s Guide
- Architecting the Industrial Internet
- 面向對象程序設計(Java版)
- Windows Server 2016 Automation with PowerShell Cookbook（Second Edition）
- Oracle JDeveloper 11gR2 Cookbook
- 大話Java：程序設計從入門到精通
- 分布式架構原理與實踐
- Docker：容器與容器云（第2版）
- Java RESTful Web Service實戰
- Jakarta EE Cookbook
- Enterprise Application Architecture with .NET Core
- R語言數據分析從入門到實戰
- 虛擬現實：引領未來的人機交互革命