08Jun2016

Application Development: Polymer framework is a new better Web

Web and HTML as its main technology was designed more than 20 years ago. There was just the idea to publish rich format documents and reference each other in easy way. The purpose of the Web has been changed drastically several times during these years. A proposition to reinvent HTML sounds reasonable. There is a lot of hype around new Polymer project [https://www.polymer-project.org/1.0/] provided by Google. Its version 1.0 is already released and used widely. Polymer is based on Web Components technology. In practice, it’s treated as the same.

Web Components

Web Components is HTML5 standard for both extending HTML as a language and providing modularity for rich SPA solutions. A component is a sort of reusable part of the page. It contains all 3 parts of web application: HTML template based on regular tags and other components treated as children, CSS styles specific for the component and JavaScript code of this logical part of the page:

Read more
25Apr2016

Web Development: TypeScript as OOP version of JavaScript

JavaScript is not classic OOP language

OOP (Object Oriented Programming) is the most popular style of coding for now. OOP programming languages are the most used for now. E.g., C++, Java and C#. These are the most used ones in software development. That’s why the majority of frontend developers have been coding in OOP paradigm. On the other hand, JavaScript dominates on the client side of Web Development. Besides, JavaScript is rising very quickly as server side language by node.js platform. JavaScript is not classic OOP programming language. Actually, there is some kind of OOP based on prototype, but it provides another approaches and patterns. One more point against JavaScript is its dynamically typed nature. These and some other features make JavaScript very outstanding. A lot of developer note that they are hate JavaScript.

 TypeScript for making JavaScript more friendly

There are several attempts to make JavaScript development more friendly and controllable. E.g., CoffeeScript [http://coffeescript.org] is a language that compiles into JavaScript. CoffeeScript code looks like Ruby. Its main goal is providing a minimalistic syntax to make source code smaller and elegant. Another way is TypeScript [http://www.typescriptlang.org] by Microsoft. It makes JavaScript look like regular OOP language with classes and static typing. TypeScript is a language, or rather to say extension to pure JavaScript, because it uses the same syntax as pure JavaScript, but introduces extensions to define types, interfaces, classes, modules, etc. There is a compiler to translate TypeScript code into pure JavaScript to run in browser or by node.js engine. It’s open source both the specification and the implementation hosted on GitHub. Thus, it may be used for any OS and platform. Install it globally into your system as any other npm module:

Read more
25Mar2016

Application development: Angular 2 is a ready for production framework

Last month we started new web project with client side implementation by Angular 2 framework [https://angular.io/]. First of all, this is not just new major version of the same technology, but rather absolutely new framework designed from scratch. Solid part of terms and approaches are the same as in Angular 1.x, but a lot of things are much more simpler by design. Actually, that allows us to spend more time and efforts on application development than on pure system layer. E.g.,

import {Component} from ‘angular2/core';

@Component({

selector: ‘my-app’,

template: ‘<h1>{{ title }}</h1>’

})

 

export class AppComponent {

title = “My First Angular 2 App”

}

 

This TypeScript code above is very clear. It doesn’t need any extra knowledge to understand it.

 Ready to start

As usual, you can install it as npm module into your project and add to dependencies. Look at its GitHub repository [https://github.com/angular/angular]. Angular 2 is still in beta. Latest version for today is 2.0.0-beta.17. On the other hand, the Angular 2 core functions are stable for several months or even half of year. There are Components and Directives, Forms, Pipes, HTTP and Dependency Injection. Migration from Angular 1.x is not trivial, actually. That’s why there are a lot of tutorials and migration materials, like [https://scotch.io/tutorials/seamless-ways-to-upgrade-angular-1-x-to-angular-2].

Read more
29Feb2016

Application Development: Hapi.js is a professional node.js server framework

This month we created REST service as a project. Technical requirements were to use Hapi.js architecture [http://hapijs.com] to implement a solution. It’s a better alternative for well-known express framework. The problem with express is its simplicity in design. One of the goals of its authors was to make it as simple as possible. But in real life it’s not a criteria. You have to spend a lot of time to configure all components you need for your application. E.g., getting raw HTTP request content needs particular middleware attached into some point of HTTP request/response chain. That’s why a lot of teams and projects choose something more robust. Hapi provides very good balance between simplicity and power.

Beyond express framework

Hapi was created by Walmart software development team to hold under control their black-friday storm. By the way, this fact shows us one more time that node.js platform has both high performance and robust Application Development approaches.

Read more
27Jan2016

Application Development: Tweening and timeline are high abstractions in Web animation

Last month we implemented web solution with pretty outstanding animation. During looking for a framework to be used in our case, we found very robust set of libraries provided by GreenSock. Their products were very popular among Flash developer some time ago. E.g., module for Tweening, which is not just regular animation primitive, but customizable processes designed for really cool animation effects. These are widely used in Application Development to implement cool UI/UX or animation in a game. As web animation is moving from Flash to pure HTML/JavaScript, GreenSock team published their own package to cover almost any feature. They call it GreenSock Animation Platform or GASP [https://greensock.com/gsap].

 Platform and features

First of all, GASP supports all major web browser including even old versions (keep in mind IE as the main troublemaker) deprecated by other animation libraries. Such safe configuration is very important in professional Application Development at line of client satisfaction.

Read more
14Jan2016

Application Development: Vim as development environment

Vim [http://www.openvim.com/] is a successor of the ancient vi text editor, which was created as primary UNIX visual text editor several decades ago when computers were really big and expensive. Despite such a great age, Vim is still a very popular and useful tool in Software Application Development and DevOps. Both console and GUI versions are available for all operating systems and platforms. It’s included into any standard installation set of Linux/UNIX family system. Because of its plain nature, our programmers can use Vim as both regular text editor installed and runned locally and opened in remote shell via Internet with effective workflow even in case of slow network connection.

 

Features

 

In brief, Vim has 2 main modes: to navigate a cursor throw the text and to enter the text into place marked by the cursor. This would be the most terrible barrier between you and Vim. Don’t fight it. Just accept this approach and move on.

Read more
03Nov2015

Application Development: AngularJS framework

We already wrote about very popular front-end JavaScript Application Development approach Backbone. It’s not single right way to design and implement cool rich client side application without mess of code. There are other frameworks widely used. Nowadays, one of the most useful is AngularJS [https://angularjs.org].

 The idea

Main idea of Angular is to avoid modifying DOM by hand via JavaScript code. This way is very useful for web designers who can’t handle JavaScript as good as software developers or even can’t coding at all. Backbone uses behavior to drive the view, and Angular uses the view to drive behavior. First of all, Angular was created for fast prototyping rich web application and interfaces, but nowadays, it’s widely used in all kinds of projects. It’s not a kind of tutorial or introduction, but rather a set of several important points to understand Angular and use it in real projects.

Read more
20Jul2015

Application Development: Babel transpiler to use ES6 today

ECMAScript 6 standard is coming. As a next generation of JavaScript, it would be the most significant change in front-end Application Development in near future. BTW, new official label of standard is ES2015 for now. So, don’t be confused at line of terms. There is the same. ES2015 is not production ready approach, because it’s not supported officially by majority of the web browsers. On the other hand, ES2015 is very hot and too sexy to wait for official release date. Besides, it would be better to have ES6 skills for your front-end developer career. Well-known technologies like CoffeeScript pale into insignificance. A lot of smart software architects and CTO’s decide to design their new from-scratch client-side applications with perspective to be developed and supported in terms of ES6 standard. There would be the problem how to deal with such code right now. Regular solution is to use some tool to translate ES6 code into regular JavaScript, like we are doing in case of CoffeeScript or TypeScript. Babel [https://babeljs.io] is the most famous solution for that.

ES6 new features

So, what does it make ES6 standard to produce a lot of hype about. There is an arrow operator => introduces syntax sugar for function creation similar to CoffeeScript. There are classes with constructors, inheritance, static methods and other real OOP features. That is much better than old-school prototype-based pseudo-OOP of regular JavaScript. There is added built-in string interpolation like it’s used in other programming languages for decades already.

Read more
05Jul2015

Application Development: HTML5 build tools

Nowadays, HTML5 applications are complicated enough to treat them like something more than a set of static and dynamic pages. Web Application Development of client side solutions is a full process like any other software development. So, it needs some kind of build tool to process LESS or SASS sources of stylesheets, translate CoffeeScript, TypeScript or any other language that compiles into JavaScript, apply linters and run unit tests, join and minify the code. Automation of all these duties is a must-have practice of any professional team like Iflexion. There are already several approaches available and widely used.

Grunt

Grunt [http://gruntjs.com] was the first in a row of JavaScript build tools. It’s based on the set of tasks. Basically, grunt is a task runner. The tasks should be described in Gruntfile.js file as declarative configuration composed in JSON format. There are a lot of plugins to automate almost any set of actions. Grunt is based on node.js. Main module and its plugins are npm packages.

Read more
30Jan2015

Application Development: Backbone framework: modern professional front-end approach

Nowadays, web is not just loading pages and displaying them correctly. Modern browsers allow web application developers to create complicated one-page rich solutions on the client side: rich text processors, graphics editors, spreadsheets, etc. Backbone [http://backbonejs.org] is one of the best straight forward solution to organize even very complicated project in robust professional way. Practically, it’s very small set of JavaScript classes, that you can review in an hour.

The main idea is to split the code into 2 sets of classes: Models and Views. A Model is responsible to handle all data of specified component. It loads, saves and represents it for a View. A View is rather a controller to handle UI, render widgets and specify actions for a Model to provide any changes. You can use any front-end HTML templates system within Backbone Views.

Marionette.js

As I said above, Backbone is just a set of approaches to organize complicated project in robust way and a bunch of source code to help with it.

Read more
Pages:123