Geekly Articles each Day
📜 ⬆️ ⬇️

Accelerated web / mobile application development

When an idea arises to create something useful, you usually really want to make a prototype (or version 1.0) as soon as possible. For someone, seeing a quick result is a good motivation to develop the idea further; for others, the main thing is to “start,” the well-known truth that it is much easier to finish / rework ready than to write from scratch. So, in the process of another tea and discussion of financial markets, we had the idea of ​​creating a light service for exchanging ideas and news, as well as determining the current situation in financial markets (so-called trends) - after all, knowing the trends, you can trade more effectively.
The requirements were: a web service, a mobile version (preferably an app), an easy, collective admin part, and a simple interface.
How did we get a mega-fast "blind" at the same time and the web and mobile version of the application CxInvestor and will be discussed in this article.

Development


The first question that needed to be solved was what to write about the server.

Serverless Firebase



My php knowledge went far back to the 90s, and I didn’t really want to write a small, lightweight server in ASP.NET or Java . The idea to write a “serverless” web application sounded too good, but after digging on the Internet, it was decided to try Firebase . It took just 20 minutes to create an account, database and implementation of a simple example. It is worth noting that in addition to the "real-time" database, Firebase also has a built-in user system, privileges and various login-integrations with Facebook and Twitter . In fact, the entire system of managing users, passwords and privileges was given to the ball.
Well ... not exactly on the ball, if you have a larger application - the minimum paid upgrade costs $ 50 / month.
')
So, Firebase :

Pros:


Minuses:


Here’s what the magic of Firebase looks like:

var fb = new Firebase("https://YOUR.firebaseio.com/"); fb.set({ name: "Alex Wolfe" });


Adaptive Bootstrap and AngularJs



For the frontend, the choice was obvious enough - to use Twitter Bootstrap , so that you can conveniently work with the service on any device, but AngularJs did not immediately come to mind. The main argument in favor of AngularJs was that this is a full-fledged framework, that is, you do not need to learn bundles of two, or even three basic javascript libraries (for example, RequireJs + KnockoutJs). And also, AngularJs has a good modular structure, separation of presentation from logic, and support for long paths.
In general, AngularJs did not let us down, all the problems that arose were solved quickly with the help of google, and adding new functionality to the application was easy and pleasant.

So, AngularJs :

Pros:


Minuses:


This is how we set the dependence of some modules on others:

  var controllerId = 'calendar'; angular.module('app').controller(controllerId, ['$rootScope', 'common', 'datacontext', calendar]); function calendar($rootScope, common, datacontext) {


Mobile Phonegap



Theoretically, adding the previous three elements ( Firebase , Bootstrap and AngularJs ), we have a ready-made service running in mobile web browsers. Packing everything in Phonegap and making a mobile application from a web service was a logical addition.

Confused a few things:

  1. Whether the application will be missed in the AppStore - after reading stories about how Apple does not like Phonegap wrappers, and after weighing all the pros and cons, they decided to try. By the way, despite the simplicity of our application, and obviously the non-iOS user interface design, our first version did a review the second time (in the first package I did not include icons of all required sizes)
  2. Stability and availability of necessary features
  3. Work speed


As it turned out, some things still do not work as we would like, and the speed of the first version of our application still left much to be desired (but more on that later).

Having tried several different plugins for the same functionality and having suffered from alert ('yoo') in javascript (who knows, will understand), I still debugged the functionality and launched the working version on my iPhone. For the future, I want to note that the main problems nevertheless arose simply with examples that go along with the plugins. Most likely, plugin developers do not have time (or are lazy) to update examples in time, with the result that minor syntax errors or changes in call parameters lead to spending whole evenings with tea , debager and alert to get the application to work.

With the speed of the problems turned out to be much more! After wrapping up in Phonegap, our application looked quite frankly completely non-interactive (and some parts were terribly slowed down). The wonderful invention of AngularJs brackets, such as {{myData}} , turned out to be a curse in a mobile application, because it jumped out here and there for a fraction of a second, and it seemed like a complete file. As a result, the main part of the system had to be rewritten in order to cache as much as possible and update the elements as rarely as possible. All the css and angular animations had to be removed completely (which, in principle, I almost do not regret). And all the brackets {{myData}} had to be replaced by ng-bind = "myData" .
Further, unnecessary javascript, unused css, appeared as much as possible, and finally, FastClick was added:

  <script type="application/javascript"> window.addEventListener('load', function () { FastClick.attach(document.body); }, false); </script>


Result? The application has become more interactive, of course, the speed is clearly different from native applications (not for the better), but an indisputable advantage is that Phonegap allows you to create applications on all mobile platforms at once.

So, Phonegap :

Pros:


Minuses:


Installation and Setup


Registering a domain, hosting and using an ftp client is the right thing, but the system for preparing and managing builds is more important. First, you need to separate what goes to the server, generate a new version and tag, apply production configuration, obfuscate javascript and css, reconfigure if you need htaccess, sitemap.xml, robots.txt and finally make sure that the user browser does not cache all old files, so the user will not know that the web application has been updated.

Build system

The idea of ​​making a small build system came at once, as it was necessary to automate the obfuscation of the sources and maintain versioning. As it turned out, in fact, you can (and should) automate many other tasks before you actually start copying in the ftp client (which can also be automated).
PowerShell was chosen as the build script, due to its modularity, ease of use and good work with the command line parameters.
Closure Compiler was chosen as a javascript compiler, and css was compiled using yuicompressor.

  Write-Output "Compiling js files..." java -jar compiler.jar --language_in ECMASCRIPT5 --angular_pass ` --js $BaseDir\scripts\jquery-2.0.3.js ` --js $BaseDir\scripts\angular.js ` ...


So, the web service is ready and added to the google index, but one problem remains - the google bot cannot run javascript on the pages, so any url leading to the AngularJs view (for example, www.mywebsite.com/#!/myView ) will not The google bot is correctly loaded because it requires javascript to run. This is probably one of the most embarrassing moments when using AngularJs, as it automatically complicates the SEO of your web service and adds more work to you as a developer.
Currently, the recommendation of Google (and other search engines) is the support of the so-called html-snapshots, which will display the requested page without javascript and fully (with this strictly - google punishes if the html-snapshot and javascript version are very different).
This should be available at a special url: www.mywebsite.com/?_escaped_fragment_=/myView
It looks scary ... fortunately, apache rules came to the rescue, which can be defined in the .htaccess file:

  RewriteCond %{QUERY_STRING} ^_escaped_fragment_=/?(.+)$ [NC] RewriteRule ^ /snapshots/%1.html? [NC,L]


And then it's easy - we go around all our views and save the finished html files after the javascript has loaded all the data and has completely worked. Later, PowerShell helped us automate this process and automatically update the snapshots on the server. Also, the Internet is full of services that will do everything for you for a modest payment (you just need to put a similar steering wheel in .htaccess to redirect google bot to the subscription service website).

What's next?


During the development process, many of the original functional requirements were changed and many fresh ideas were added.

Undoubtedly, the next step is the promotion of our service and mobile applications, but more on that another time.

CxInvestor

Source: https://habr.com/ru/post/232257/

More articles:


All Articles