Fast cross-platform HTML5 application on Framework7
Thinking about the development of html5 applications, many immediately come to mind jQuery, or rather jQueryMobile. And having tried to write even the most unpretentious application using jQueryMobile, it is very easy to be disappointed, since the performance and responsiveness of the resulting html5 application is much lower than expected, and absolutely not to compare it with native applications.
Accordingly, if you continue to follow the html5 path, you gradually learn that brakes and poor responsiveness are due to the fact that there are many subtleties, for example, that jquery is not the fastest option for an application or by default any user click will work with a 300ms delay that impairs responsiveness.
Also, the important point is whether there is a set of ready-made typical components, such as a list, buttons, sidebar, and so on, for which it makes no sense to waste time on re-development. You can add to this list that somehow all the same you need to solve the problem of performance in order to compete with native applications.
')
And we finally come to the most important thing, so as not to bother with solving such problems, but to get a ready-made tool for developing fast, responsive and functional html5 applications, there is a Framework7 . I myself ran into it completely by accident, and was surprised at how easy it was to use without needing to search for solutions in different places, it’s enough just to connect framework7.js.
It should be noted that to work with Framework 7, it is not necessary to use any third-party modules or libraries, since it already contains everything:
The site has a huge number of examples (work in the browser), instructions and tutorial articles (for example, the work of Framework7 in conjunction with AngularJS)
www.idangero.us/framework7
In order not to go far, we will create a small example application where you can see how to combine the individual components of the framework into a single application. We will use the slide menu, pull to refresh, infinite scroll, change the material / ios style on the fly and a huge list of 8000 items that does not slow down (virtual list).
The structure of the application is quite simple:
Nothing more is needed, other libraries or frameworks are not needed to create the application. But if you want, you can use require.js, angular.js, matreshka.js, and so on.
The result is a very responsive, easy and fast html5 application that can be used as and anywhere.
Although we got a very fast and easy application, on older versions of android it will still not be productive enough.
The fact is that on Android versions up to 4.4, a very slow webview is used (you can make sure of this, for example, if you put a chrome beta on 4.1 android and run the application in it, and then compare it with what is in the built-in browser, the difference is speed will be very noticeable). Therefore, if you just pack html5 application in apk, it will use the built-in brake webview.
Only since Android 5.x, webview is updated separately and is based on fresh chromium, so the html5 application will work quickly and smoothly.
Simply put, if you need good performance from html5 applications on any devices and any versions of android, you need to work on the chromium engine. The project that allows this is called crosswalk, and instead of the built-in webview, you use your own, which runs on the latest version of chromium.
The easiest way to check how your html5 application will work using the crosswalk is to install Intel XDK, create an empty “Standart HTML5” project, and replace the www folder with yours in the created project.
After that, select Build and click on Crosswalk for Android. The application will be compiled on a remote server, and after a few minutes you will receive a link to apk (version for arm and x86). The disadvantage is the fact that the size of the application will increase by ~ 19mb.
Site framework7: www.idangero.us/framework7
Online sample of the finished application: comedian-ant-73047.bitballoon.com (since it’s online, style loading slows down a bit)
Sources: yadi.sk/d/Quu2VfApgcGXA
Ready apk files created via Intel XDK: yadi.sk/d/marrZA5-gcGuQ
Kitchen-sink online example: framework7.io/kitchen-sink-ios or framework7.io/kitchen-sink-material
The same in material design: poacher-bear-12003.bitballoon.com/kitchen-sink-material/index.html
Accordingly, if you continue to follow the html5 path, you gradually learn that brakes and poor responsiveness are due to the fact that there are many subtleties, for example, that jquery is not the fastest option for an application or by default any user click will work with a 300ms delay that impairs responsiveness.
Also, the important point is whether there is a set of ready-made typical components, such as a list, buttons, sidebar, and so on, for which it makes no sense to waste time on re-development. You can add to this list that somehow all the same you need to solve the problem of performance in order to compete with native applications.
')
Framework7
And we finally come to the most important thing, so as not to bother with solving such problems, but to get a ready-made tool for developing fast, responsive and functional html5 applications, there is a Framework7 . I myself ran into it completely by accident, and was surprised at how easy it was to use without needing to search for solutions in different places, it’s enough just to connect framework7.js.
It should be noted that to work with Framework 7, it is not necessary to use any third-party modules or libraries, since it already contains everything:
- High-performance Animation - I want to highlight this separately, since the animations are really very fast.
- fast-clicks - solves the 300ms delay problem without third-party libraries
- Template7 - templates engine, syntax like Handlebars, but less weight and speed up to 3x faster
- Dom7 - faster and more transparent jQuery replacement
- Navigation / Router - many options for transitions and their control
- Style support, including partial support for material design
- A huge list of built-in components, such as forms, buttons, list view, pull to refresh, infinite scroll, slide menu, etc.
- Swipe - built-in swipe for all occasions: call the menu with a swipe, return to the previous screen, delete an item, etc.
- And many other useful things.
The site has a huge number of examples (work in the browser), instructions and tutorial articles (for example, the work of Framework7 in conjunction with AngularJS)
www.idangero.us/framework7
Sample application
In order not to go far, we will create a small example application where you can see how to combine the individual components of the framework into a single application. We will use the slide menu, pull to refresh, infinite scroll, change the material / ios style on the fly and a huge list of 8000 items that does not slow down (virtual list).
The structure of the application is quite simple:
- index.html - application design
- about.html - design of another view
- app.js - application initialization and settings file
- css / app.css - in general, this file is not needed, since in framework7.css there are already all the design settings, but you can, for example, change the background color of the side menu
- lib / framework7.js - the framework itself
- lib / framework7.css - design of all elements and components in the style of ios
- lib / framework7.material.css - design of all elements and components in the style of material
Nothing more is needed, other libraries or frameworks are not needed to create the application. But if you want, you can use require.js, angular.js, matreshka.js, and so on.
index.html
First, consider the index.html framework:
Adding components is very easy to implement (for each component there is an instruction on the site), for example, to add a pull-to-refresh, it’s enough to add to
a pull-to-refresh-content class, and an arrow design that will be shown when updating:
Now we need to add a table view (list view), which will have a list of our elements. To create short lists, the List View is suitable (Media List, etc., the list can be created statically or dynamically):
But for very long lists, it is necessary to unload elements that are not visible on the screen now, this is necessary so that nothing slows down and the application works as well as native. Such a list is called the Virtual List, and it is created just as simply:
In the future, the list will need to be initialized and filled in app.js
Here we add the infinite-scroll, which adds the same way, by adding the class of the same name, the design of the twister and indicating from what distance to call infinite-scroll:
To change the ios style to the material style and vice versa, add 2 buttons, for example, in the left menu:
Later on the class changestyle we will hang up the handler to respond to the click and change the css file to the one specified in rel.
<!DOCTYPE html> <html> <head> <!-- meta- --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>My App</title> <!-- framework7 , id, --> <link id="pagestyle" rel="stylesheet" href="lib/framework7.css"> <!-- --> <link rel="stylesheet" href="css/app.css"> </head> <body> <!-- statusbar-overlay --> <div class="statusbar-overlay"></div> <!-- panel --> <div class="panel-overlay"></div> <!-- reveal --> <div class="panel panel-left panel-reveal"> </div> <!-- , views --> <div class="views"> <!-- , view-main --> <div class="view view-main"> <!-- , --> <div class="navbar theme-white"> </div> <!-- , navbar toolbar --> <div class="pages navbar-through toolbar-through"> <!-- data-page , --> <div data-page="index" class="page"> <div class="page-content"> </div> </div> </div> <!-- --> <div class="toolbar"> <div class="toolbar-inner"> </div> </div> </div> </div> <!-- framework7 --> <script type="text/javascript" src="lib/framework7.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html> Adding components is very easy to implement (for each component there is an instruction on the site), for example, to add a pull-to-refresh, it’s enough to add to
<div class="page-content"> </div> a pull-to-refresh-content class, and an arrow design that will be shown when updating:
<div class="page-content pull-to-refresh-content"> <div class="pull-to-refresh-layer"> <div class="preloader"></div> <div class="pull-to-refresh-arrow"></div> </div> </div> Now we need to add a table view (list view), which will have a list of our elements. To create short lists, the List View is suitable (Media List, etc., the list can be created statically or dynamically):
<div class="list-block media-list"><ul> </ul></div> But for very long lists, it is necessary to unload elements that are not visible on the screen now, this is necessary so that nothing slows down and the application works as well as native. Such a list is called the Virtual List, and it is created just as simply:
<div class="list-block virtual-list media-list"> </div> In the future, the list will need to be initialized and filled in app.js
Here we add the infinite-scroll, which adds the same way, by adding the class of the same name, the design of the twister and indicating from what distance to call infinite-scroll:
<div class="page-content pull-to-refresh-content infinite-scroll" data-distance="100"> <div class="pull-to-refresh-layer"> <div class="preloader"></div> <div class="pull-to-refresh-arrow"></div> </div> <div class="list-block virtual-list media-list"></div> <div class="infinite-scroll-preloader"> <div class="preloader"></div> </div> </div> To change the ios style to the material style and vice versa, add 2 buttons, for example, in the left menu:
<div class="list-block left-menu"> <div class="row theme-white" style="width:90%;margin-left: auto;margin-right: auto;"> <div class="col-50"> <a href="#" class="button changestyle" rel="lib/framework7.css">iOS style</a> </div> <div class="col-50"> <a href="#" class="button changestyle" rel="lib/framework7.material.css">Android style</a> </div> </div> </div> Later on the class changestyle we will hang up the handler to respond to the click and change the css file to the one specified in rel.
app.js
Now let's take a look at the app.js file, in which the application is configured, the lists are initialized, and so on.
// var myApp = new Framework7({ animateNavBackIcon:true, pushState: true, // , back android modalTitle: "MyApp", modalButtonCancel: "", // Cancel swipePanel: 'left', // }); // ios, back , if (Framework7.prototype.device.os == "ios") myApp.params.pushState = false; // jQuery Dom7, $, , $$, jQuery, var $$ = Dom7; // css , ios material . localStorage, css $$(".changestyle").click(function() { $$("#pagestyle").attr("href",$$(this).attr('rel')); localStorage.setItem("css", $$(this).attr('rel')); return false; }); // css if(localStorage.getItem("css")) { $$("#pagestyle").attr("href",localStorage.getItem("css")); } // var mainView = myApp.addView('.view-main', { dynamicNavbar: true, domCache: true, // scroll position }); // ( Template7) var myList = myApp.virtualList('.list-block.virtual-list', { items: [ { id: 1, title: 'Item 1', picture: 'http://lorempixel.com/88/88/abstract/1' }, { id: 2, title: 'Item 2', picture: 'http://lorempixel.com/88/88/abstract/2' } ], height:44, template: '<li class="contact-item" data-id="{{id}}" >' + '<a href="about.html" class="item-link">' + '<div class="item-content">' + '<div class="item-media"><img src="{{picture}}" width="22"></div>' + '<div class="item-inner">' + '<div class="item-title">{{title}}</div>' + '</div>' + '</div>' + '</a>' + '</li>' }); // , function reloadTable(table, array) { table.items = array; table.update(); } // 20 var itemsArray = []; function firstInitList(text, count) { itemsArray = []; for (var i = 0; i < count; i++ ) { itemsArray.push({ id: i, title: text + ' ' + i, picture: 'http://lorempixel.com/88/88/abstract/' + i }); } } firstInitList("Item", 20); reloadTable(myList, itemsArray); // pull-to-refresh var ptrContent = $$('.pull-to-refresh-content'); ptrContent.on('refresh', function (e) { // 0.5 setTimeout(function () { refreshIt(); }, 500); }); // var authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers']; function refreshIt() { // 10 Refresh firstInitList("Refresh", 10); myList.deleteAllItems(); myList.appendItems(itemsArray); // 8000 var temparr = []; for(var i = 0; i<8000; i++) { var picURL = 'http://lorempixel.com/88/88/abstract/' + Math.round(Math.random() * 10); var author = authors[Math.floor(Math.random() * authors.length)]; temparr.push({ id: i, title: author, picture: picURL }); } myList.appendItems(temparr); myApp.pullToRefreshDone(); } // infinite-scroll $$('.infinite-scroll').on('infinite', function () { loadMore(); }); // var loading = false; // infinite-scroll' $$('.infinite-scroll-preloader').hide(); function loadMore() { // , if (loading) return; $$('.infinite-scroll-preloader').show(); // 1 setTimeout(function () { for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) { itemsArray.push({ id: i, title: 'Item ' + i, picture: 'http://lorempixel.com/88/88/abstract/1' }); } reloadTable(myList, itemsArray); // , loading = true; }, 1000); } app.css
// infinite-scroll .infinite-scroll-preloader { margin-top:-20px; margin-bottom: 10px; text-align: center; } .infinite-scroll-preloader .preloader { width:34px; height:34px; } // navbar .navbar { border-bottom: none; background: #2196f3; color: #ffffff; } .navbar a.link { color: #ffffff; } // .panel, .left-menu .list-button { background-color: #3f4041; } .left-menu .item-link.list-button { text-align: left; } The result is a very responsive, easy and fast html5 application that can be used as and anywhere.
Accelerate html5 applications on the old version of android. Crosswalk
Although we got a very fast and easy application, on older versions of android it will still not be productive enough.
The fact is that on Android versions up to 4.4, a very slow webview is used (you can make sure of this, for example, if you put a chrome beta on 4.1 android and run the application in it, and then compare it with what is in the built-in browser, the difference is speed will be very noticeable). Therefore, if you just pack html5 application in apk, it will use the built-in brake webview.
Only since Android 5.x, webview is updated separately and is based on fresh chromium, so the html5 application will work quickly and smoothly.
Simply put, if you need good performance from html5 applications on any devices and any versions of android, you need to work on the chromium engine. The project that allows this is called crosswalk, and instead of the built-in webview, you use your own, which runs on the latest version of chromium.
The easiest way to check how your html5 application will work using the crosswalk is to install Intel XDK, create an empty “Standart HTML5” project, and replace the www folder with yours in the created project.
After that, select Build and click on Crosswalk for Android. The application will be compiled on a remote server, and after a few minutes you will receive a link to apk (version for arm and x86). The disadvantage is the fact that the size of the application will increase by ~ 19mb.
Site framework7: www.idangero.us/framework7
Online sample of the finished application: comedian-ant-73047.bitballoon.com (since it’s online, style loading slows down a bit)
Sources: yadi.sk/d/Quu2VfApgcGXA
Ready apk files created via Intel XDK: yadi.sk/d/marrZA5-gcGuQ
Kitchen-sink online example: framework7.io/kitchen-sink-ios or framework7.io/kitchen-sink-material
The same in material design: poacher-bear-12003.bitballoon.com/kitchen-sink-material/index.html
Source: https://habr.com/ru/post/257889/
All Articles