Popular frameworks for mobile development. Framework7: making mobile applications in a native style

It's time to talk about the evolution of mobile applications. In order to understand how most applications work, you do not need to have deep knowledge in this area. It is enough to understand how HTML, CSS and JavaScript work. With the help of web technologies, applications are created that run on various platforms, unlike native applications.

Today, there are various tools and frameworks that help us create mobile applications without much difficulty.

In this article we will look at the top 7 such frameworks.

IONIC is one of the most promising frameworks for HTML 5 based mobile applications. Built using SASS, which provides a large number of UI components allowing you to create interactive applications. To run applications, the JavaScript MVVM and AngularJS framework is used. Two-way data pinning, interaction with backend services and APIs makes AngularJS the most popular among application developers. There is no doubt that it will become even more popular with the release of the new version of AngularJS 2.0, which is aimed at mobile devices.

The IONIC team will soon introduce a new assistant for creating IONIC applications called “IONIC creator”. It will be announced very soon and will support drag and drop, which will make app creation much faster.

To get to know IONIC better, you can read articles about getting started with mobile apps and developing games based on the Firefox OS.

Mobile Angular UI is an HTML 5 based framework that uses bootstrap 3 and AngularJS to create interactive mobile applications.

The main features of Mobile AngularUI include:

• Bootstrap 3
• AngularJS
• Bootstrap 3 mobile components such as branching, overlays and sidebars that were not present in regular bootstrap.
• AngularJS modules such as angular-route, angular-touch and angular-animate.

The response media queries are separate from the bootstrap program and you just have to select what you need. Mobile Angular UI is independent of jQuery, so all you need to create a mobile application are some AngularJS directives.

To see Mobile Angular UI in action, take a look at the demo page. We also recommend that you read the instructions on how to get started with Mobile Angular UI.

Intel XDK is a multi-platform development from Intel. Working with it is quite easy, you just need to download free applications that are compatible with Linux, Windows and Mac. It contains many templates to get you started and supports UI frameworks such as Twitter bootstrap, jQuery Mobile and Topcoat.

Intel XDK provides real-time preview on your connected device while you explore other cool tools.

In our opinion, Intel XDK is the easiest to use. It uses drag and drop, which avoids a lot of grunt work.

In the introduction to working with Intel XDK you will find a large amount of training material on working with the platform.

Appcelerator Titanium is an open resource for mobile app frameworks that provides a framework for creating native apps for multiple mobile platforms.

Titanium is an excellent development in which you will find everything you need to create hybrid mobile applications. To work with Titanium, download Titanium studio. Titanium SDK contains several platform APIs and a Cloud service that works as storage. It comes with an independent API platform that makes it easy to access on a mobile device.

Titanium uses Alloy, an MVC framework to speed up mobile applications. Modules created with Alloy are easy to reuse across multiple applications, hence significantly reducing runtime and code lines.

Titanium studio contains some code examples and we hope to have training videos on SitePoint soon.

Sencha Touch is an HTML 5 framework for creating applications for platforms such as iOS, Android and Blackberry and more. It has been around for several years, but has become popular among hybrid mobile app developers relatively recently.

Sencha Touch is more advanced than its opponents when it comes to creating native applications for various platforms.

Working with it is also not difficult, but in order to get the best out of it, you will have to spend quite a lot of time.

To fully appreciate the benefits of Sencha Touch, take a look at the sample codes on the official website.

Telerik’s Kendo UI - HTML 5 framework for creating multi-platform mobile applications. Kendo UI relies heavily on jQuery and contains a number of jQuery-based widgets.

It's not difficult to work with him. Developers familiar with jQuery will appreciate the ease of working with Kendo UI. Kendo UI has an open resource of tools and JavaScript frameworks.

However, most of the widgets used are still only available under a commercial license.

Review the official documentation for working with Kendo UI. There you will find video tutorials that will help you learn this framework.

PhoneGap is a little out of our list because it is not a framework for creating an application, but for packaging and releasing it. The paid program PhoneGap is open source Cordova and owned by Adobe. Popular among many mobile application developers.

To work with PhoneGap, you can choose between JavaScript or UI frameworks. Combinations of jQuery Mobile and KnockOut.js or AngularJS are good. Once you're done with the code, PhoneGap finishes all remaining work on the platform you're working with. Applications built with PhoneGap use a web view to deliver content. PhoneGap contains a minimum set of web APIs for accessing the capabilities of a mobile device and allows you to write requested plugins.

You will find instructions for working with PhoneGap.

Bonus

App.js is a JavaScript library for creating mobile applications. This framework, unlike others, does not use AngularJS. It provides several basic themes and widgets. You can write an application using zepto or jQuery.

Conclusion

In this article, we have reviewed some of the best HTML 5 mobile app frameworks. Mobile HTML 5 is developing well and is offering more and more options every day. Which frameworks do you prefer? Share in the comments.

1. Sencha Touch

Sencha Touch is the first HTML5 Mobile Web Application Framework. Sencha Touch retains the appearance of the application - native to iOS and Android devices. Sencha Touch allows you to easily create apps with massive multi-user interfaces and superior UX. Sencha Touch has the best technical support from the Sencha team and documentation of all details is available as support even for large enterprise software applications. The framework is easy to use and develop a mobile application. Sencha Touch is the framework that allows you to program for Android, iOS and BlackBerry without changing the appearance of the application. Sencha Touch can be used in collaboration with Phone Gap to make apps that have the exact look and feel of a native app, but are built using HTML/JavaScript.

2. Phone Gap

The Phone Gap framework is based on HTML 5, which allows mobile app developers to create native apps using JavaScript, CSS3 and HTML5. The best thing about Phone Gap is that it can be used in collaboration with other frameworks to support them with features that they don't have, but Phone Gap provides. In a short period of time, Phone Gap has become the most popular among most developers along with Sencha. This allows mobile app developers to create their own fully functional mobile apps and wrap them so that the app can be featured on the App Store, or Android Market.

3. JQuery Mobile

JQuery Mobile, Touch-optimized web framework for smartphones and tablets. It's a single user experience that remains consistent across all platforms. The code is very lightweight and hence is the preferred framework for mobile app development. The various themes created by the designers can be easily modified. Instead of writing different codes for different operating systems; JQuery allows you to write one simple code to create a fully functional, customized application on your website.

4. Titanium Appcelerator

Titanium promotes platform convergence in application development. Applications built on Titanium are natively integrated. The framework acts as a bridge between mobile applications and the API platform, resulting in an application that has better performance. The Titanium Appcelerator platform has been designed with a focus on helping web developers create mobile and tablet apps with ease. Over the past year, the platform has experienced tremendous growth in development, with new features and devices being added to the framework at a rapid pace.

2018 is the year of mobile apps. And this fact cannot be denied. But if you think that with the development of mobile applications, the popularity of web application development frameworks has decreased, then you are mistaken. Just contact a web application development company and you will learn about amazing tools that are used not only to create corporate websites, but also to build simple home web pages.

However, when it comes to creating web applications, you need to be aware of the competition from mobile devices and develop a modern and responsive application. If this is necessary, you should contact a company that offers specific web development services that meet your requirements. But before we do that, let's take a look at some popular frameworks that can be used to build your website. So,

1. Node.js

Since its introduction in 2011, Node.js has been a favorite platform among web developers. It makes it easy to create fast and scalable programs. And all because the author of Node.js, Ryan Dahl, created the framework in such a way that the developer has the ability to manage multiple connections at the same time. Also, the framework allows you to create network tools and web servers using JavaScript and its modules, which are responsible for various core functions.

2. React.js

React.js is supported by a group of programmers, also by the IT giant Facebook. React.js is an open source Java scripting library that allows developers to create huge web applications. These apps can consume large amounts of data, and you can change them without having to reload the page. The reason why professional website development companies recommend this framework in 2018 is that it offers scalability, simplicity and speed. You can use this library along with other JavaScript frameworks or libraries.

3. Angular.js

Angular.js is another JavaScript framework. You can add it to the HTML code of a web page via a tag. This allows you to extend the capabilities of HTML using directives. If you want to create dynamic web applications, then Angular.js has the perfect framework for this. Additionally, it allows you to use HTML as a template language. With data binding and dependency nesting, you can keep cumbersome coding under control.

4. Express.js

This is the perfect framework for those who think less is more! That's right, if you are looking for a flexible and minimalistic open source framework, then Express.js is what you need. Developers love it for its simplicity and flexibility in development. With the help of NPM modules, this framework allows you to improve the functionality of your website. And the best part is that to work with it, you just need to have basic knowledge of HTML, CSS and JavaScript and a little understanding of MongoDB. Since Express.js supports dynamic code, the application code will not be too complex.

5. Laravel

And last but not least, it is worth mentioning the most popular framework for PHP development - Laravel. It is quite versatile and developers can use it to create both web and mobile applications. It offers several benefits not only to app owners but also to developers. Laravel has quite a lot of functionality, including database migration, bcrypt hashing, MVC support, password reset and security. If you're looking for an extremely robust and flexible framework that makes the most of MVC, Laravel is what you need in 2018.

There are many other platforms used by web application development companies, but we believe the frameworks described here will emerge as definite leaders in their field this year.

Objective-C, Swift or JavaScript?

I'll be honest, your humble servant loves many of the apple company's products... but not Objective-C. I made several attempts to make friends with him, but the relationship somehow did not develop. Well, I don’t like him, that’s all. Release Swift, one might say, has corrected the situation, but it is still in the stage of active development and polishing. I don’t really want to use it in real projects.

After thinking about the pros and cons of all available iOS development technologies, I decided to stick with my favorite JavaScript. If there is no vital need for native Objective-C features, and you have experience developing in JavaScript, then why not start conquering mobile platforms with it? Moreover, one-off projects often arise in this area (without further support), and for the sake of them there is simply no point in seriously studying Objective-C.

A practical example: I once had to do a project to develop an application for a corporate online store. The task is, in fact, one-time: “we make life easier for customers and send the application to free floating.” In such cases, you want to solve the problem quickly with minimal costs. Has long established itself as a “silver bullet” in this field PhoneGap. It generates the skeleton of a future application and equates creating a mobile application to creating a standard website. So it turns out that if you have average knowledge of HTML/CSS/JS, it’s quite possible to put together a decent application.

The PhoneGap platform provides everything you need to create applications, but leaves the design details to our discretion. Roughly speaking, it’s not going to be so easy to simply assemble an application with an interface close to its native design. This cannot be achieved without the use of additional technologies.

Bootstrap for mobile platforms

Modern web developers have heard a lot about the power and clunkiness of the Bootstrap framework. It allows you to work wonders and create prototypes of modern web applications in minutes. Framework7 is a kind of Bootstrap, but aimed at mobile platforms. As befits a good framework, F7 contains all kinds of widgets and components that allow you to create an application that is as similar as possible to the native one.

Initially, F7 specialized exclusively in the iOS platform. The standard theme was focused on iOS 7 and, compared to its competitors, stood out for its interface performance. Most recently, developers announced support for Material design from Google, thereby adding Android to the list of supported platforms.

The project developers tried to put things in order under the hood and leave only the really necessary things. As a result, familiar things like the built-in jQuery library in F7 cannot be found. A lightweight version is available instead Dom7, which has most of the necessary capabilities.

So, let's summarize. F7 is a JS/CSS framework with all the necessary UI elements, made in a native style for the mobile platform. To be honest, similar frameworks have already appeared on GitHib, but F7 stands out for its high performance and the implementation of many native UX features. For example, such things as familiar to iOS users as Pull to refresh, Swipe, back bar, and many others are available out of the box and do not require additional programming.

The F7's strengths don't end there. I won’t go into details, but will just share my impressions a little.

I'll start with the most important attribute of a quality project for me - documentation. There is no point in waiting for books to appear on such hasty things - while they are being written, the framework will probably be updated and the text will lose relevance. The only hope in such projects is documentation. The more detailed it is, the better. In F7 this is completely fine. It seemed to me that most of the project was documented, and where there was not enough text, the developers provided code examples.

I've already mentioned the amazing performance. It is achieved primarily through a strict diet and the use of current modern JavaScript capabilities. As for replacing jQuery with Dom7, there is no need to worry. The main methods in it are implemented in exactly the same way. The names of methods of the same type and the order of parameters are completely preserved. Therefore, it will not be difficult to get used to it.

The official website of the project presents various graphs confirming the performance of the F7, but in such matters I trust my perception more. After developing the first real project, I checked the interface response time myself. On the latest iPhone models (5, 5S, 6) it is beyond praise. Everything works quite naturally and habitually.

Among other pleasant benefits for myself, I noted the use of language Less to describe styles. When developing web applications, you have to deal with this technology all the time, so it’s damn nice that the acquired skills can be safely used on mobile platforms.

Let's try it in practice

Technologies change each other regularly, but one thing remains unchanged: the best way to get to know them is through practice. To demonstrate how F7 works, I decided to write a useful application that will definitely be useful to all our readers - a news reader from the website of a favorite magazine. Since in the current implementation our site does not have a full-fledged API for receiving materials, we will use the good old protocol.

Creating a reader using the HTML/CSS/JS/F7/PhoneGap stack is not too difficult, since a fairly functional plugin has already been created for working with RSS. Otherwise, the work will come down to writing several dozen lines of rotten HTML. It's pretty boring, so I took the liberty of adding a little rock 'n' roll. The example will remain the same, but we will write it in MVC style. As a result, we will get a kind of microframework with an eye to the future. In other words, we will create a universal framework for the subsequent development of highly extensible applications.

Summarizing the thoughts listed above, we get approximately the following action plan.

Continuation is available only to members

Option 1. Join the “site” community to read all materials on the site

Membership in the community within the specified period will give you access to ALL Hacker materials, increase your personal cumulative discount and allow you to accumulate a professional Xakep Score rating!

There are so many frameworks and libraries around... And how to choose promising and necessary ones for your project?

The team has put together for you TOP best frameworks for Front-end development in 2018.

We are sure that this article will become your guiding star and will not let you drown in a sea of ​​frameworks. Go!

But first, a little theory:

Framework is a platform that provides developers with a framework for writing applications. It contains predefined and implemented classes or functions. Also, for specific tasks, you can add your own code to what is already contained in the framework.

The main advantages of frameworks:

Profitability

Most f. - are free and open source for use. Since this significantly speeds up the creation of the application, it accordingly reduces the price of the web application itself.

Performance

F. significantly improves productivity, and all because it optimizes the process as much as possible. Because it's easier to use f. with optimization and well-structured templates than writing hundreds of lines of code.

Safety

Trending JavaScript frameworks boast not only the support of a large community on GitHub, but also an iron-clad security system.

So, let's look at the TOP 10 frameworks and libraries for Front-end Dev that are relevant in 2018:

An excellent JavaScript framework released in 2013 by Instagram and Facebook. Using it, you can easily create complex and large-scale dynamic applications. Most often used to build user interfaces. This framework has more than 89 thousand stars on GitHub.

Pros:

React's motto: “Learn once, write everywhere”

Free and Open Source

Can use already written code

Supports virtual DOM functionality

Minuses:

Virtual DOM algorithm is inaccurate and slow

Requires complex asynchronous programming when communicating with the server

AngularJS is a framework for developing web applications from Google. Well suited for dynamic web applications, using HTML for static web pages. An indispensable framework not only for software developers, but also for designers. AngularJS, Angular 2 and Angular 4 are firmly established among the popular frameworks.

Pros:

Open source

Saving code snippets for later use

Developers experience fewer errors because data binding is built on top of Angular elements

Various MVC elements supported

Works well in an Agile environment

Lots of test tools

Minuses:

Difficult for beginners

Vue is simpler in terms of architecture

The Angular API is huge and there are many concepts to understand

It is also used to create user interfaces. Designed from the ground up for greater applicability. Consists of an accessible core library that focuses only on the presentation layer, and an ecosystem of supporting libraries that helps manage the complexity of large single page applications. On GitHub, this project has received more than 84 thousand stars.

Pros:

Does not require any default compilers,

Transformation from a library to a framework during use

Managing Advanced Single Page Applications

Excellent balance between readability, maintainability of the code and the writing of the code itself

Minuses:

Runtime errors in templates

The component approach in React is more flexible

One of the most popular MVC JavaScript frameworks. It appeared in 2011 as open source. It can be used to create scalable single-page web applications quite easily and provides two-way data binding. Does top-notch server-side DOM rendering work. Supported by Discourse, Groupon, LinkedIn, Vine

Pros:

Easy to set up

Deploys large user interfaces

Two-way data binding

Minuses:

Rigid project structure

There is no standard set of UI elements

This is not a full-fledged framework, it is a library, albeit the oldest and most popular. jQuery and JavaScript have a long and strong relationship. And with an MIT license, this library gives application developers the ability to write shorter code, thereby reducing workload. It supports DOM manipulation and, in tandem with CSS, can be useful for solving any problem.

Pros:

Widely used due to fast processing

It behaves the same in all browsers

Great for beginners for simple applications

Minuses:

Many functions that make working with the DOM easier are already implemented natively

It allows you to create lightweight and fast applications. Modern, simple, fast and non-blocking. GoDaddy and Paypal are just a few of the big names that use Node.js. Ideal for I/O related and data streaming applications.

Pros:

Simple and fast

Such software can run on multiple hosts

Enabling fast servers

Minuses:

Not for end-to-end operations

There is nothing to do without tests in Node.js

We have a grandiose full-stack platform. It has all the features any developer needs for front-end rendering, back-end development, and database management.

Pros:

Full-Stack platform

Creating full-featured applications

Reactive programming

Fast data processing

Low barrier to entry

Minuses:

Complex interface for beginners

Just a perfect match for JavaScript. This is a real JavaScript framework.

Great for creating web applications and responsive websites. Comes with CSS grid, breakpoints, API and browser style normalization features.

Pros:

Based on JavaScript and CSS

Adaptive image for a variety of monitors

Can be integrated into any design

Compatible with any browsers

Minuses:

Insufficient implementation of certain functions, including standard ones

A platform for creating mobile and desktop cross-platform applications in JavaScript (HTML+CSS to boot). This is a cloud platform for building/distributing software and everything you want for creating functionally rich applications. A nice assortment of cool tools and functions.

Pros:

Easy to use and learn

IN high performance structure

For desktop and mobile cross-platform software

Minuses:

Titanium SDK is updated later than operating system SDKs

Lack of InterfaceBuilder

Insufficient implementation of certain functions, including standard ones

This platform can easily be called a next-generation framework for mobile and web applications.

The best thing about Aurelia is that it is modular and contains quite a few independent small libraries. Thus, you can create your own framework and implement it into the platform.

Pros:

Extensive set of libraries

Creating your own framework within the platform

Minuses:

The set of libraries requires additions and improvements