Comparison of solutions for cross-platform development: PhoneGap, Xamarin, Flutter, React Native. Framework7: making mobile applications in a native style Frameworks for creating mobile applications

Objective-C, Swift or JavaScript?

Frankly speaking, your humble servant is addicted to many products of the apple company ... but not from Objective-C... I had 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 so far it is 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 the available iOS development technologies, I decided to focus on my favorite JavaScript. If there is no vital need for native Objective-C chips, and you have experience in JavaScript development behind you, then why not start conquering mobile platforms with it? Moreover, one-time projects often appear in this area (without further support), and for the sake of them there is simply no point in seriously studying Objective-C.

An example from practice: once I had to do an application development project for a corporate online store. The task is in fact a one-off: "we make life easier for customers and send the application to float freely." In such cases, you want to quickly solve the problem with minimal costs. As a "silver bullet" in this field has long established itself PhoneGap... It generates the framework of the future application and equates the creation of a mobile application with the creation of a typical website. So it turns out that with an average knowledge of HTML / CSS / JS, it is quite possible to build a decent application.

The PhoneGap platform provides everything you need to create applications, but leaves design details to our discretion. Roughly speaking, it's not so easy to take and build an application with an interface close to native execution. It is impossible to do without attracting additional technologies.

Bootstrap for mobile platforms

Modern web developers have heard about the power and awkwardness 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 targets mobile platforms. As befits a good framework, F7 contains all sorts of widgets and components that allow you to create an application that is as similar as possible to the native one.

Initially, F7 focused exclusively on the iOS platform. The default theme was focused on iOS 7 and stood out in comparison with the competition for its interface performance. Most recently, the developers announced support for Google's Material Design, 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, we cannot find familiar things like the built-in jQuery library in F7. Instead, a lightweight Dom7, which has most of the necessary features.

So, let's summarize. F7 is a JS / CSS framework with all the necessary UI elements in a mobile-native style. To be honest, such frameworks have already shone on GitHib, but F7 compares favorably with high performance and implementation of many native UX chips. For example, such familiar to iOS users as Pull to refresh ("pull to refresh"), Swipe, back bar, and many others are available out of the box and do not require additional programming.

The strengths of the F7 don't end there. I will not go into details, but just share my impressions a little.

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

I have already mentioned the amazing performance. It is achieved primarily due to a rigid diet and the use of current modern JavaScript capabilities. When it comes to replacing jQuery with Dom7, don't worry. The main methods are implemented in the same way. The name of the same type of methods, the order of the 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 response time of the interface myself. On the latest iPhone models (5, 5S, 6) it is beyond praise. Everything works quite naturally and as usual.

Of other pleasant buns for myself, I noted the use of the 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.

Trying in practice

Technology changes regularly, but one thing remains the same: the best way to get to know it is through practice. To demonstrate how F7 works, I decided to write a useful application that will definitely come in handy for all our readers - a news reader from the site of your 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.

It is not too difficult to create a reader on the HTML / CSS / JS / F7 / PhoneGap stack, since a fairly functional plugin has already been created to work with RSS. The rest of the work will be reduced to writing a few dozen lines of rotten HTML. It's pretty boring, so I took the liberty of adding some rock and roll. The example will remain the same, but we will write it in the MVC style. As a result, we will get a kind of micro-framework 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 above thoughts, we get approximately the following plan of action.

Continuation is available only to members

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

Membership in the community during the specified period will open you access to ALL Hacker's materials, increase your personal cumulative discount and allow you to accumulate a professional Xakep Score!

Objective C, Swift or JavaScript

Frankly, your humble servant is addicted to many products of the apple company, but Objective-C is not included in this list. I had several attempts to make friends with him, but the friendship somehow did not work out. I don't know, I don't like him and that's all. The Swift release can be said to have corrected the situation, but so far it is 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 the available iOS development technologies, I decided to focus on my favorite JavaScript. If there is no vital need for native Objective C chips, and you have experience in JavaScript development behind you, then why not start conquering mobile platforms with it?

Moreover, one-time projects often arise (without further support) and for the sake of them seriously study Objective-C simply no. At the very least, it is expensive and time consuming. Once I got a project to develop an application for a corporate online store. The task is in fact a one-off - we simplify the life of customers and send the application to float freely.

In such cases, you want to quickly solve the problem with minimal costs. The project has long established itself as a "silver bullet" in this field PhoneGap... It generates the framework of the future application and equates the process of creating a mobile application with a typical website. So it turns out that with average knowledge HTML / CSS / JS it is quite possible to build a decent application.

Platform PhoneGap provides everything you need to create applications, but leaves the design details to our discretion. Roughly speaking, it's not so easy to take and build an application with an interface close to native execution - it will not work. It is impossible to do without attracting additional technologies.

Bootstrap for mobile platforms

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

Initially, F7 focused exclusively on the iOS platform. The default theme was focused on iOS 7 and stood out in comparison with the competition for its interface performance. Most recently, the developers announced support for Google's Material Design, thus adding to the list of supported Android 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 library jQuery, not found in F7. Instead, a lightweight Dom7, which has most of the necessary features.

Let's summarize F7 – it is a JS / CSS framework with all the necessary UI elementsmade in a style that is native to the mobile platform. To be honest, such frameworks have already shone on GitHib, but F7 compares favorably with many: performance and implementation of many native UX chips. For example, such familiar 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 stop there. I will not go into details, but I will just share my personal impressions. I'll start with the most important attribute of a quality project for me - documentation. It makes no sense to expect books on such hasty things to appear - while they are being written, the framework will probably be updated and the text will lose its relevance. All hope in such projects is for documentation. The more detailed and better presented it is, the better. In F7, this is all right. As it seemed to me, most of the project was documented, and where there was not enough text, the developers gave code examples.

I have already mentioned the amazing performance. It is achieved primarily through a strict diet and the use of current modern opportunities. JavaScript... When it comes to replacing jQuery with Dom7, don't worry. The main methods are implemented in it in the same way. The name of the same type of methods, the order of the parameters are fully preserved Therefore, there will be no problems with addiction.

On the official website of the project, there are various graphs that confirm the performance of the F7, but I did not really understand them, because I trust my perception more. After developing the first real project, I checked the response time of the interface myself. On the latest iPhone models (5, 5S, 6) it is beyond praise. Everything works quite naturally and as usual.

Of the other nice buns for myself, I noted the use of the LESS language for describing styles. When developing web applications, you have to deal with this technology all the time, so it's nice that the acquired skills can be safely used on mobile platforms.

Trying in practice

Technologies regularly replace each other, but one thing remains unchanged, the best way to get to know them remains - practice. To demonstrate how F7 works, I decided to write a useful application that will definitely come in handy for all our readers - a news reader from the site of your 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 RSS protocol (http://xakep.ru/rss).

Create a reader on the stack HTML / CSS / JS / F7 / PhoneGap simple enough. Considering that a fairly functional plugin has already been created to work with RSS. The rest of the work will be reduced to writing a few dozen lines of rotten HTML. It's boring enough so I took the liberty of adding a little rock and roll. The example will remain the same, but we will write it in MVC style. As a result, we will get a kind of micro-framework 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 above thoughts, we get approximately the following plan of action. First of all, we prepare the basis for the project using the current technology stack, then we create the application interface using F7, and at the final step we fill this poisonous mixture into PhoneGap. We will focus the application on iOS, leaving the details of Android development to you as your homework.

There are several ways to organize MVC patterns in JavaScript, but we will use Philip Shurpik's version. It is quite simple and has already been tested (with some modifications) in my real projects. As for additional components / libraries, in addition to F7, we need:

• require.js - one of the best solutions for organizing AMD (Asynchronous Module Definition) approach;
• handlebars - one of the fastest JavaScript templating engines;
• hbs - simple handlebars for require.js;
• text.js - another plugin for reuire.js that allows you to load text resources;

We will not be able to consider all the possibilities of the listed components, and in the framework of our example it was possible to get by with less blood. Let me remind you that our goal is not only to get acquainted with the F7 framework, but also to get an application framework for further testing.

Application structure

The functionality of our application is extremely simple - we pull up the updated RSS feed and provide the user with a comfortable reading. Comfort is unthinkable if you download the full text of the news, so we will stick to minimalism. First, we display the headers, and the user can read the full version of the text after tapping on it.

Excellent, the organizational issues have been decided, it remains to design the structure of the future application. As always, there are several options, but I'm immediately guided that the finished web application will be fed to PhoneGap, so the best option would be:

• css - for storing your own styles. Everything that we override or modify is placed in this directory.
• img - images.
• js is all client-side JavaScript. We place only our own scripts here, not libraries. In the root of the directory, we place general-purpose scripts and models. Controllers and views must be defined in subdirectories of the same name. Let's look at an example, for the "about" controller we will create a "js / about" folder.
• libs - libraries and all possible additional goodies. For example, if you decided to connect the magnificent "Font awesome" - throw it here.

Only two files will be located in the root directory of the project - app.js and index.html... The first file will be the starting point for the application. In it, we will configure the auxiliary libraries and initialize F7.

Cooking the frame

We download the listed libraries (bower, git) and push them into the appropriate directories. Then, in the root of the project, create an app.js file and configure additional components.

Listing 1. Configuring require.js

require.config ((urlArgs: "fake \u003d" + (new Date ()). getTime (), paths: (handlebars: "libs / handlebars", text: "libs / text", hbs: "libs / hbs") , shim: (handlebars: (exports: "Handlebars"))));

The configuration for require.js is described in the first listing. Here we include additional libraries. Since handlebars is not AMD-style, the connection is through shim. In principle, we could connect the plug-in for reading RSS in exactly the same way, but since our application cannot exist without it, we will initialize it in the old fashioned way, through the index.html start file.

The development of a demo application implies the constant introduction of all kinds of edits and fixes, so we will immediately limit the appetites for caching require.js. There is no separate parameter for this, but you can get the desired effect using the urlArgs property.

The principle is simple - to each url an argument specified in the property is added with a specific value. To get rid of caching, the argument must be matched with a unique value. Everyone solves this problem in their own way, but for uniqueness I get the current time:

UrlArgs: "fake \u003d" + (new Date ()). GetTime ()

Listing 2. The app module

define ("app", ["js / router"], function (Router) (Router.init (); var f7 \u003d new Framework7 (); var mainView \u003d f7.addView (". view-main", (dynamicNavbar: true)); return (f7: f7, mainView: mainView, router: Router,);));

The second listing shows the code for the “app” module. In it, we initialize the routing system (router.js) and the framework itself. We describe all types of AMD modules. The define () method is used to declare a module. In the first parameter we pass the name of the module, in the second we list the dependencies, and in the third we describe the body of the module. See the require.js documentation for details.

The body of the module starts by initializing the routing module (see js / router.js file). The router will resolve routes and run the appropriate controller method. The routing itself is quite simple to implement (see Listing 3): at the input we get the name of the controller and try to call its predefined init () method. The path to the controller (file) is not difficult to determine - at the stage of discussing the structure of the application, we agreed to save them in the js folder / controllername / controllername.js.

Listing 3. Routing

function load (controllerName, query) (require (["js /" + controllerName + "/" + controllerName + "Controller"], function (controller) (controller.init (query);));)

Having finished with routing, we proceed to initialize Framework7. In the simplest case, it is enough to create an object instance Framework7() and enjoy life. For our example, this is enough, but in general, when the constructor takes an object with settings. There are a lot of them and they are all described in detail in the documentation. Most noteworthy: fastClicks, cache, cacheDuration, material).

Then the presentation area is initialized. In the context of F7, the view area is a separate visual part of the application. Each view area is characterized by its own settings, navigation bar and a number of other elements.

Only those view areas that require navigation are required to be initialized. In our case, this is.main-view. The initialization itself boils down to calling the addView () method. It asks us for two parameters: a viewport selector and an object with parameters.

Conquering RSS

We are all ready to develop the application interface. We will describe its main part in the index.html file located in the root of the project (be sure to create it). The markup text (html code) is wide, so I won't copy it here, but I'll direct you to the Basic App Layout documentation section. Feel free to take all the HTML source from there, copy the prepared file and get ready to make a few edits. Let's start with the scripting section. We bring it to the following form:

We definitely need to connect the framework itself and the Feeds plugin (for working with RSS). At the very end, we include the require.js library. Next, scroll the text a little and find the block:

In this area we will display the contents of certain views. We are planning one single show, so let's not bother and add support for the "Pull and Update" functionality with a slight movement of the hand. To do this, add an additional pull-to-refresh-content class to the block and get something like the following:

The next step is to add additional styles to the header ( framework7.feeds.min.css) and start creating the controller. I did not focus on changing the title of the application, adding additional text - you can do all this makeup yourself.

MVC-style tricks

Our project will need one single controller, let's call it index and prepare a separate directory in the / js folder. Create several files in it right away:

• indexController.js - the controller itself;
• indexView.js, index.hbs - view and template;

We don't need a model, but for example, an empty stub file feedModel.js was created in the root of the js directory. If necessary, we describe the model in it and get access to it from the controller.

Let's look at the contents of the controller (Listing 4). The first thing that catches your eye is the ad format. Our controller is nothing more than a regular module with one init method, receiving a portion of the dependencies.

After requesting the index page, the controller's init method will be called. Then everything depends on the task. We can receive some data and pass it to the view, we can process something, etc. In ours, everything is limited to the formation of a representation. To do this, call the render () method. You can transfer data from a controller to a view through its only parameter. We don't need to pass anything, so we just pass the object to the stub.

Once the view is formed, the DOM will be populated with new nodes and we can do something useful with them. For example, initialize the Feeds plugin. To do this, we define a selector for output and an object with settings. From the settings you need

The path to the rss feed and the display method (on the page, in the window). See the fourth listing for details.

Listing 4. Controller code

define (["app", "js / index / indexView", "js / feedModel"], function (app, IndexView, Index) (function init (query) (IndexView.render ((model: (message: "test" ))); var myFeed \u003d app.f7.feeds (". feed", (url: "http: //localhost/feed.xml", openIn: "page"));) return (init: init);) );

The view code is shown in the fifth listing. In terms of code organization, everything is similar to a controller. The same module and one single function. Notice the use of the $ variable. This is not a jQuery library, but Dom7. Many of their methods are identical, but Dom7 doesn't have all of them, so be careful.

Listing 5. View code

define (["js / feedModel", "hbs! js / index / index"], function (Index, viewTemplate) (var $ \u003d Dom7; function render (params) ($ (". page-content"). html ( viewTemplate ((model: params.model)));) return (render: render)));

Listing 6. Content view

We will receive data for output from the RSS feed, so the presentation template contains standard html. It is worth paying attention to the addition of the pull to refresh functionality (pull and refresh). Previously, we added the appropriate class to index.html, but in the view we just finished what we started. You do not need to write code to request an updated feed, since The RSS-Feed plugin supports Pull To Refresh functionality out of the box.

This completes the development of the application. You can test it with a local web server (eg included with gulp).

Preparing PhoneGap

The web application is ready and now all that remains is to build it using the PhoneGap platform. To install PhoneGap, we need node.js installed on the system. If you keep up with modern trends, then most likely the node is already installed in your system. If not, go to the official website and follow the instructions.

$ sudo nmp install -g phonegap

Great, but PhoneGap alone isn't enough. Cordova Command Line tools are also indispensable:

$ sudo npm install -g cordova

Other helper tools for automating the build process are Ant. There are several ways to install Ant. The easiest way to do this is with a package manager. There are several of them for OS X, but HomeBrew (http://brew.sh/) stuck with me. It works stably and contains a large number of packages. Installing HomeBrew is easy enough. We type the command in the terminal:

Ruby -e "$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Immediately after the installation is complete, let's start with Ant:

$ brew update $ brew install ant

The next step is to install Xcode. We are going to be patient and install the current version from the AppStore. After installation, be sure to launch it and accept the license agreement. If this is not done, then PhoneGap will not be able to build the project.

Putting together a mobile application

Stay close to the console and create a new mobile application project. Enter in the console:

$ phonegap create xakepRssReader $ cd xakepRssReader

Great, the basic template is ready - you can start migrating our web application. Go to the www directory and delete all content from it. Then copy all the files and folders of the application we created into it. As a result, our entire project should be placed in the www folder. Go back to the console and start building. First, we define a mobile platform for building (in our case, iOS), and then we start the deployment of the project:

$ cordova platform add ios $ cordova build ios

If there are no errors, the console will display “Build Succeeded”. It remains only to open the xakepRssReader.xcodeprof file from the platforms / js directory in XCode and start the build process (press the Play button). If everything goes well (and it should be so), then after a few seconds the emulator window will start (in my case, the iPhone 6).

Assembly completed

Building a mobile application using a stack of technologies familiar to every web programmer turned out to be not so difficult in practice. If you look at the AppStore, then most corporate applications are nothing more than the broadcast of a certain content / service from the company's official website. Is it possible to create such things without resorting to native technologies? Definitely yes.

Developers see the future of the web in a mobile environment and are trying to bring as many trending technologies as possible to it. Frameworks like the one discussed in today's article confirm once again that the impossible does not exist. The performance of mobile devices continues to grow, and this fact only spurs the transfer of familiar technologies to a new environment.

Certainly, you should not harbor unnecessary illusions and refuse to study native technologies (Objective C, Swift). If you are serious about developing for mobile platforms, then most likely you will not be able to do with web technologies alone. In any case, at the current time stage. But if your goal is to "practice" and earn some good money on typical projects, then web technologies can definitely help.

That's all for me. Happy mobile development!

Pros of PhoneGap

• The creation process is as similar as possible to the development of a web application;
• Single stack of technologies (HTML / CSS / JavaScript);
• Low entry threshold, fast results;
• Coverage of all popular mobile platforms (iOS, Android, Windows Phone);
• Low cost of application development;
• Cheaper escort;
• The ability to use JS developments;

Cons of PhoneGap

• Lower performance compared to native apps;

Frameworks are characterized as a comprehensive software development environment. They include many components whose main job is to help you build applications. Frameworks come with a number of toolkits, debuggers, compilers, code libraries, programming interfaces, and other components. Working together, they are all designed to make things easier for application developers.

Frameworks are the backbone of application development, and using them makes the development process easier and more exciting. Without them, programmers will write every application they want from scratch. This will require a lot of coding so that the application can run on multiple platforms.

There are a number of frameworks that you can consider for use. This article presents the best of them to help you make development easier and easier.

It is one of the most popular frameworks for mobile app developers. It allows the developer to create the best progressive and natural web applications. This capability makes it easy to develop applications that will run on all platforms, including the latest mobile devices. Any developer who is interested in the commercial success of their application will definitely choose this framework.

This is a Zepto plugin for creating mobile apps. It depends on several external libraries like Backbone.js and Flickable.JS for some of its functionality, but overall has its own look and feel. As a framework, it builds HTML 5 mobile apps using Ratchet CSS UI components.

This is a good choice of framework as it is based on HTML5 and JavaScript. It is very flexible and can help a developer create various mobile applications, simple or complex. The framework has some of the highest performing user interface widgets that will prove to be very useful in your development. Some of the widgets you get using Ext JS are forms, lists, toolbars, and menus in particular. All of these resources are available to help a developer create great apps for Android, iOS, iPhone and Windows.

It is also a Zepto plugin for mobile frameworks that was developed primarily for WebKit based browsers. It's customizable and extensible. The framework comes with a theme that can be modified using Compass or Sass, and very cool 3D transitions that can be adjusted using CSS3. You can also extend it with your own functions to get the support you need to build your application.

This framework can help you create impressive mobile applications. It is ideal for creating cross-platform mobile application projects. The framework has a wide range of plugins that minimize the amount of time it takes to build an application. You only need this single framework, and the applications you create will be able to run on a variety of devices, operating systems, and platforms. jQuery Mobile also comes with ThemeRoller, which is a unique feature that you won't find in other frameworks. It helps you create apps that are one of a kind.

A lightweight mobile framework that is based on HTML5 and CSS3. It is popular for its good default styles that you can use as a starting point for developing a mobile app. The framework also comes with several JavaScript APIs to control your application. Lungo creates applications that can run on a variety of platforms such as BlackBerry, iOS, Android and Firefox OS.

An excellent framework from a very reputable company Adobe. It is the ideal choice for building hybrid mobile apps using JavaScript, CSS and HTML. The framework offers many software solutions for designers such as InDesign, Photoshop, Illustrator and others. One of its strengths is the ability to create high-performance applications that can run well across a variety of devices. Adobe PhoneGap has many plugins that will make it easier to create simple as well as complex mobile applications.

This framework was first used by Twitter to help them build their mobile app prototype and then released as a free project. The framework provides a set of JavaScript user interfaces and plugins that help you build simple mobile applications. Ratchet also provides reusable HTML classes.

A good framework to use if you want to create HTML5 applications quickly and easily. It is best, of course, to consider when building complex applications, as it contains all the necessary solutions to make the development process much easier. It comes with great features to choose from that include plugins and industry-leading tools. It is best used when creating and monetizing games. The framework offers support or third party plugins that can significantly reduce the amount of time it takes to build high quality applications.

Another great framework that works with HTML5 and CSS3. It provides animations, APIs and components that are compatible with current browsers and mobile platforms. The framework offers support for Cordova and PhoneGap. With this support, you can create your own application and then ship it to the platform's app store. It also offers a selection of themes for iOS, Windows Phone, Blackberry, Android, Tizen and other platforms, so apps will always feel right in their native environment.

Frameworks form the foundation of your future application, so the correct choice for use should be carefully evaluated. One thing you should note is that frameworks are different and you need time to learn their different APIs in order to make the best choice for the application you are building. A great attribute of these frameworks is that they are able to deal with a wide range of problems that can arise when developing mobile applications, making your job much easier.