We are starting the series of tutorials and short reviews about popular HTML5 mobile frameworks. In this post we are discussing why would developers use existing mobile web framework instead of building one from the ground up. And we are creating simple mobile web application with Framework7
Mobile web applications allow us to quickly design and develop prototypes, reuse already written code across multiple mobile platforms and in many cases match look & feel for customers using wide range of devices with different operating systems.
PhoneGap is hybrid HTML5 mobile application framework which has nicely growing user community.
Here on HTMLCenter we have published several tutorials about designing and developing Cordova / PhoneGap based HTML5 mobile applications.
In fact, any other developers using PhoneGap framework can just import your plugin and use the functionality in their own apps. Developer community has created many such plugins. And Cordova contributors have developed plugin manager called plugman in order to make installation of plugins simple.
These days creating a new piece of web or mobile software feels a lot like combining already made pieces together. Adding some glue so they do not fall apart, releasing version v1 and repeat the loop many times. Until you are satisfied that nobody cares or that you have actually built something useful.
Agile, lean and other tech product methodologies have thought us to use this process. And ever increasing modular nature of web and back end frameworks make it easy to follow these steps. Many hours are already spent by community of smart people while creating all the reusable modules for your future app.
Good example to illustrate this trend is Hackathon Starter project. Its created for people building web and mobile apps with help of Node.js. As the name suggests it was created as reusable prototype for hackathon projects. In hackathons you usually have ~24 hours to create a somewhat working project. As this template is beefed up with main modules it will save lots of time and will let you concentrate on the specific functionality you want to achieve.
Applications we build are more and more dependent on 3rd party data sources. And as Internet of things continues to grow, this fact becomes even more stronger.
It allows us to create great experiences for the app end users by presenting them data gathered from across the Internets. But at the same time we have to spend more time ensuring that our applications are consuming all this data securely and they only get access to the data they need. OAuth protocol was designed and developed for this exact reason.
This is the second part of tutorial for building native mobile application based on AngularJS, HTML5 markup and CSS styles. In the first part you will find how to setup the new project, add routes, controllers, HTML5 views and do simple testing in a standard web browser.
What we are doing in this tutorial?
In this tutorial part we are going to take previously created application and add back navigation button, sliding animations between the views and functionality to retrieve data from web services by using asynchronous HTTP communication. Finally I’ll give some hints how to wrap this application into PhoneGap framework in order to create installable version. Lets get started.
This is the first part of the tutorial for building native mobile application based on AngularJS framework, HTML5 markup and CSS styles. The second tutorial part can be found by following the link.
This tutorial is about how to build Angular powered HTML5 mobile application, wrap it up with PhoneGap and distribute as a native mobile app (on several mobile platforms if you wish so). We have split tutorial into 2 parts, just to make it easier for information to sink in. As always, links to the example source code can be found at the end of the tutorial posts.
What we are going to cover?
First, we will briefly explore what is AngularJS (however, this tutorial is not about learning the basics), we are going to pick Ratchet as a front end framework for our HTML5 mobile application and create MVC structure. Second tutorial part covers how to make our view transitions animated, how AngularJS communicates with web services and how to wrap up AngularJS application with PhoneGap. Sounds like we have some ground to cover. Lets get started.