Altabel Group's Blog

Posts Tagged ‘jQuery

JavaScript is the most accessible cross-platform language nowadays. It’s used both on front-end and back-end website development.

Using it Altabel developers create web-apps which includes offline mode, desktop apps, apps for smartphones and tablets, add-ins for Microsoft Office, SharePoint and Dynamics. And if you don’t get acquainted with JavaScript yet we strongly believe that you should do it immediately!

I reckon many of us know there are plenty of different languages compiled in JavaScript. It’s CoffeeScript, Dart, GorillaScript and others. To be fair some of these languages are fly-by-night creations that have never really taken off in the wild. But many of these languages are major engineering efforts with large ecosystems and large corporate backers. With so many frameworks and languages out there it can be difficult to figure out which one is the best.

In 2012 Microsoft analyzed the situation and created a new language with a possibility of dealing with problems and using existing JavaScript insights. Thus, a free open source programming language TypeScript was developed and maintained by Anders Hejlsberg (co-creator of Turbo Pascal, Delphi and C#). From the very beginning the new language started expanding rather quickly due to its flexibility and productivity. Considerable amount of projects written in JavaScript began to transfer to TypeScript. Popularity and relevancy of the new language leaded to the fact that lots of TypeScript ideas became the part of new JavaScripts standard afterwards. And moving forward the AngularJS 2.0 version (today one of the most popular web frameworks) was completely written on TypeScript with the help of Microsoft and Google.

But why TypeScript?

Let’s review main reasons of its popularity:

  • TypeScript is a typed superset of JavaScript. In other words any valid JavaScript code is also valid for TypeScript.
  • TypeScript may be used to develop JavaScript applications for client-side or server-side execution.

Microsoft’s TypeScript seems to generate the most attractive code and is considered to be one of the best JavaScript front-ends. TypeScript adds sweetness, but at a price.

  • TypeScript can also be used with existing JavaScript frameworks/libraries such as Angular, jQuery, and others and can even catch type issues and provide enhanced code help as you build your apps.
  • TypeScript can be just the right fit for projects in which developers try to remain relevant without the need to learn a whole new syntax.

The ubiquity of JavaScript as a runtime has inspired people from a variety of programming backgrounds to recreate JavaScript as they see fit. And yes, TypeScript lets you write JavaScript the way you really want to.

  • TypeScript differs from JavaScript with possibility of evident static objectives, with usage maintenance of full-blown classes (just as in traditional object-oriented languages), and also with maintenance of logging on modules. It’s aimed at development speed raising, simplifying of legibility, refactoring and reusability of your code.
  • TypeScript has many additional language features but defining types and creating classes, modules, and interfaces are some of the key features it offers.
  • In TypeScript the same types are supported as well you would expect it in JavaScript. Types enable TypeScript developers to use highly-productive development tools and practices: static checking, symbol-based navigation, statement completion and code refactoring.
  • TypeScript implements many conceptions that are appropriate to object-oriented languages such as extending, polymorphism, encapsulation, accessibility modifiers and so on.
  • Lots of TypeScript features have strict rules, so various code formatting errors are excluded. Which means that the possibility of incorrect implementation or inaccurate method invocations is eliminated.
  • TypeScript potentially allows writing large complex programs more quickly. Thereafter it’s easier to maintain, develop, adjust to scale and test them in comparison with standard JavaScript.

Drawbacks

TypeScript has a number of other positive features that are out of the scope of this article. On the other hand, there are two significant minuses exist.

  • Probably, the biggest minus is entry threshold and number of specialists on the market. Nowadays there are not so many specialists with solid experience in this language.
  • In comparison with JavaScript, it’s needed more time for the development. It stems from the fact that apart from class implementation one should describe all enabled interfaces and method signatures.

TypeScript 2.0

There are some significant changes coming in TypeScript 2.0 that continue to deliver on the promise of making JavaScript scale. This includes a whole rewrite of the way types are analysed in the flow of the code and an opt-in feature that starts to deal with logic errors around the flexibility of things being undefined or null in JavaScript. Other features planned for TypeScript 2.0 include read-only properties and async/await downlevel support.

TypeScript creator Anders Hejlsberg already has plans for TypeScript 2.1 and beyond. Features envisioned for these releases include a new JavaScript language service in Microsoft’s Visual Studio software development platform and more refactoring support.

The most recent version, TypeScript 1.8, rolled out in February, includes several more features like F-Bounded polymorphism, string literal types, etc.

Conclusion

So, if you haven’t taken a look at TypeScript, I have hopefully convinced you that it is something to at least worth a bit of your time. It has some of the best minds focused on making JavaScript scale and the team is going about it in a way that is open and transparent. By embracing the reality of JavaScript and building on top of it, in my opinion TypeScript is transforming the common language of the web, for the better.

We will be happy to hear how you use TypeScript in your current projects, if you like it, if you are planning to switch to this language, what are the pros and cons in your opinion, etc. Feel free to share with your thoughts in comments below!

 

Victoria Sazonchik

Victoria Sazonchik

Business Development Manager

E-mail: victoria.sazonchik@altabel.com
Skype: victoria_sazonchik
LI Profile: Victoria Sazonchik

 

altabel

Altabel Group

Professional Software Development

E-mail: contact@altabel.com
www.altabel.com

jsframework

Whether you’re building apps for the browser, mobile or desktop, Aurelia can enable you to not only create amazing UI, but do it in a way that is maintainable, testable and extensible.

Retrospective and today

Aurelia is a project of Rob Eisenberg, the author of a very popular MV * – framework for Caliburn.Micro XAML-platforms, Durandal. Understanding all the disadvantages of Durandal, Eisenberg engaged in the development of so-called NextGen framework. In 2014 he began to work in Angular team on the second version of the framework. However, several months later, Rob decided to leave the Angular team since the direction of Angular 2, in his opinion, had changed a lot. He gathered a large team and returned to work on the framework of his dreams. And Aurelia is the result of that work.

JavaScript of tomorrow?

By using modern tooling Aurelia was written from the ground up in ECMAScript 2016. This means you have native modules, classes, decorators and more at disposal.
Aurelia is written in modern and future JavaScript, it takes a nowadays approach to architecture. It’s built as a series of collaborating libraries, which form a powerful and robust framework for building Single Page Apps (SPAs). However, Aurelia’s libraries can often be used individually, in traditional web sites or even on the server-side through technologies like NodeJS.
Aurelia’s code is open sourced under the MIT License, a very permissive license used by many popular web projects today. The starter kits are available under the Creative Commons 0 license. There is also a Contributor for those who wish to join the team in working on Aurelia. Ultimately, this means that you can use Aurelia without fear of legal repercussions and it can be build in the same confidence.

Benefits of Aurelia

Clean and Unobtrusive – Aurelia is the only framework that lets you build components with plain JavaScript. It stays out of your way so your code remains clean and easy to evolve over time.

Convention over Configuration – Simple conventions help developers follow solid patterns and reduce the amount of code they have to write and maintain. It also means less fiddling with framework APIs and more focus on their app.

Simple, But Not Simplistic – Because of the simple design developers are able to learn a very small set of patterns and APIs that unlock limitless possibilities.

Promotes the “-ilities” – Testability, maintainability, extensibility, learnability, etc.- Aurelia’s design helps developers to naturally write code that exhibits these desirable characteristics.

Amazingly Extensible – Aurelia is highly modular and designed to be customized easily, so developers will never hit a roadblock or have to “hack” the framework to succeed.

Web Standards Focused – Focused on next generation JavaScript and Web Components, and avoiding unnecessary abstractions that obscure the underlying web, Aurelia is the cleanest and most standards-compliant framework today.

Integrates Well with Others – Easily integrated with any 3rd party library or framework: for instance, with jQuery, React, Polymer, Bootstrap, MaterializeCSS and much more.

TypeScript Support – Each Aurelia library is released with its own d.ts files. There are also official TypeScript beginner kits and production quality starter kits.

An Official Product with Commercial Support – Being an official product of Durandal Inc., it has commercial and enterprise support available, so you can use Aurelia for building core technology for your business.

Thriving Community and Ecosystem – Having one of the largest developer gitter channels in the JavaScript world, oodles of contributors and a huge core team, Aurelia has been used to build just about every type of application and is used by large, well-known multi-national companies and enterprises.
 
Aurelia, Angular and React.js – what’s common and what’s different?
 

Aurelia vs. Angular

Similarities between Aurelia and Angular 2:

  • Aurelia offers ES6-support out of the box and supports all forms of alternative abstraction syntax such as TypeScript and CoffeeScript. Migration documentation about migrating from Angular 1 and 2 have been put on the roadmap.
  • The basis of both Angular 2 and Aurelia application comprise components associated with the corresponding template.
  • Differences in vision details and options range:

  • The syntax is much simpler and more explicit (i.e. self-explanatory) than Angular 2 and looks a lot like standard JS syntax. ES6 and JSPM are used by default and a gulp file with a custom-built system to transpile ES6 to ES5 using the Babel transpiler is included in the standard package.
  • Aurelia also uses conventions instead of its own syntax and boilerplate code. No special characters like the ones in Angular 2 (*, (), [] en #) here.
  • Aurelia is built in a modular way making it very pluggable. You can plug in internationalization, routing, virtualization, animation, … Besides that, third party plugins are available as well such as the aurelia-flux plugin adding the Flux dispatcher to Aurelia.
  • The presence of a root-component is necessary; it represents an application (app). The metadata may / should be attached to components by using decorators. Component initialization is performed by using dependency injection. In addition, each component has a declared lifecycle, which can be built by using the lifecycle hooks. The components may be formulated into a hierarchical structure.
  • Communication between the component and the template is performed by using data binding. The process of template rendering to the final HTML can be integrated by using pipes (Angular) or value converters + binding behaviours (Aurelia).
  • The main advantage of Aurelia in comparison to Angular is an advanced composition mechanism and template parts. Aurelia is designed with an emphasis on unobtrusive, the number of framework structures in the final code is minimal. Aurelia is more compact, while Angular sometimes simply forces to produce copy-paste.
  • Aurelia is new to the market while Angular has a big user base because it’s already been around for 6 years. On the other hand, Aurelia has great documentation available, it’s an official product of Durandal Inc, and the company has a long term vision for the product, something the Angular team doesn’t seem to have and is blamed for a lot.

Aurelia vs. React.js

  • While on the surface it might not seem fair to compare Aurelia to React.js, they’re both being used for the same things. Despite the fact that React.js is a fully-fledged and functionally released product without the early preview alpha tag and Aurelia is not, at current stage they are both pretty at the same level. You can achieve the same tasks within both, just in different ways.
  • As for React components and Aurelia’s ViewModel’s, they are both quite similar in that you’re essentially using a class to define properties and methods bound to a particular view. The primary difference between them is React doesn’t separate the logic from the view, meaning in React the View and ViewModel are both within the same file.
  • However, that’s not to say that Aurelia doesn’t allow you to achieve the same thing by rendering the View from within the ViewModel as well and forgoing a traditional View.
  • The original intent behind React.js was not to be a competitor to the likes of Angular or Aurelia, but rather be the library that everyone uses with their SPA framework like Angular to improve performance.
  • Therefore, this means you can easily use React.js within Aurelia. Aurelia and React.js can be used together and in doing so, it provides you with a level of power other frameworks cannot without subsequent complexity and strict convention like EmberJS.

Aurelia vs. Angular and React

  • Two-way binding is provided out of the box and the framework does so very precisely. By default, 1-way databinding is used except for form controls, a clear plus when compared to React. Do keep in mind that two-way data binding can only be done through explicit syntax, as is the case in Angular 2.
  • The learning curve for Aurelia is comparable to that of Angular 2 and thus a lot steeper than React’s. Luckily, the extensive documentation makes up for that a great deal.
  • Angular 2 and Aurelia Architecture is very similar. Aurelia looks a lot like Angular 2 in the sense that it’s a complete framework that relies on the web standards. It’s as pluggable as React is and as Angular 2 will be.
  • While Angular was created by Google and React by Facebook, they don’t provide commercial or enterprise support, something that Aurelia will do.

 
Conclusion

It goes without saying why these three frameworks are so popular. They all have a lot of strong advantages. Eventually, I’m favoring Aurelia: there’s solid documentation available and the overall philosophy is the same with Angular 2, but Aurelia is a better choice from the syntax and execution point of view. The architecture and syntax vision of Aurelia team seems to be more clear than the vision of the Angular team. The company and enterprise support of Aurelia is also a big pro.
What is your personal experience with these frameworks? Which one would you choose for your projects and why? What’s your prediction “who” will win the crown in the nearest future? Please feel free to share your thoughts with us.

Thank you in advance!

 

Darya Bertosh

Darya Bertosh

Business Development Manager

E-mail: darya.bertosh@altabel.com
Skype: darya.bertosh
LI Profile: Darya Bertosh

 

altabel

Altabel Group

Professional Software Development

E-mail: contact@altabel.com
www.altabel.com

js

JavaScript is celebrating 20th anniversary in 2015. It’s a language with a changeable history and carries a lot of baggage from its childhood, but as it leaves its teenage years behind it, now it’s a language that has finally grown up. JavaScript made a revolution in web by allowing scripts to run in a browser. But after its initial popularity soon the reputation was spoiled and JS was often associated with poorly written, cut-and-pasted code that was used to create annoying pop-ups and cheesy ‘effects’. Thus we see that JavaScript had some annoying weaknesses as a programming language.

On the other hand, we can observe that JavaScript has “ubiquity” that other programming languages don’t have. One must admit that you just need a browser to run, which means that anyone with a smartphone or computer is capable of running a JavaScript application. JavaScript has made the dream true that Java was available on all platforms by using the browser as its virtual machine. And now thanks to Node.js, it can run without a browser.

It is well known fact that simple text editor – is all you need to write a program in JS. JavaScript has a low barrier to entry when it comes to development. And we also must agree with GitHub that JavaScript is one of the most popular languages. This means that help is often easy to come by and there is a lot of JavaScript code out there. Furthermore, one should not forget that it also means that code’ libraries are well tested and many issues have already been solved.

After a first decade, which was a period of awkward childhood, JavaScript was growing up like most of the teenagers. People changed their mind with the revolutionary advent of Ajax. jQuery then made people using JavaScript to build some new applications and Node has taken it all to a whole serious level. JavaScript established itself as a powerful and flexible language with some cool features such as:
– Prototype-based Inheritance
– Closures
– JSON (subset of the object literal notation of JavaScript)
– Asynchronous event-driven programming
– Functions as objects

Frameworks and Libraries

Lots of frameworks and libraries have been written to mitigate problems and improve JavaScript for programming. JavaScript framework is the set of pre-written JavaScript code that helps to ease development of the JS based applications. This framework is also known as JavaScript libraries, which enhance the use of this programming language in many ways.
We have already shared some posts about the JavaScript frameworks in the past. JavaScript framework can be found anywhere on the web with different type of working capabilities. We have selected few of them to keep an eye on, and we hope you will find our compilation useful.

1) Angular.js

Open-source web application framework. It aims to simplify both the development and the testing of such applications by providing a framework for client-sidemodel–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

2) Ember.js

Open-source JavaScript application framework, based on the model-view-controller (MVC) pattern. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework.

3) Meteor (MeteorJS)

Open-source JavaScript web application framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (web, Android, iOS) code. It integrates with MongoDB and uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor depends on jQuery and can be used with any JavaScript UI widget library.

4) Backbone.js

JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. It is designed for developing single-page web applications, and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized. Backbone was created by Jeremy Ashkenas, who is also known for CoffeeScript.

5) Knockout.js

JavaScript implementation of the Model-View-ViewModel pattern with templates. Main principles are: a clear separation between domain data, view components and data to be displayed; the presence of a clearly defined layer of specialized code to manage the relationships between the view components. These features streamline and simplify the specification of complex relationships between view components, which in turn make the display more responsive and the user experience richer.

6) Ext JS (Sencha Ext JS)

JavaScript application for building interactive cross platform web applications using techniques such as Ajax, DHTML and DOM scripting. Ext JS includes interoperability with jQuery andPrototype.

7) D3.js (D3)

JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework. In contrast to many other libraries, D3.js allows great control over the final visual result.

Conclusion

JavaScript will be one of the most important languages to learn and invest into over the next few years. Website development is into a single-page web application that relies on JavaScript to do the heavy lifting on the client side (in this case, usually JS goes with modern front-end frameworks such as Backbone or Angular.js). The advantage of using Isomorphic JavaScript is increasing the popularity of JS. The data that is transported from databases is often stored in JSON format. The possibility of using a combination of HTML, CSS and JavaScript let you build an application for iOS, Android and FireFox OS. JavaScript has existing libraries, plugins, APIs and other cool stuff to be broad used in The Internet of Things (IoT). JavaScript is becoming the language not just for the front and back end of web development, but also for interacting with a huge number of modern devices.

To sum up, I must admit that now is the perfect time to get started with JavaScript projects, as it moves into its 20s, and has finally grown up for starting to go places!
What are your opinions about JavaScript future, its libraries and frameworks? I’d love to hear your thoughts in the comments.

 

Svetlana Pozdnyakova

Business Development Manager

 

altabel

Altabel Group

Professional Software Development

E-mail: contact@altabel.com
www.altabel.com

Developers use JavaScript for a number of different web applications. If you continue adding more code to make it work in multiple browsers and use cases, it can quickly become a big mess. Hence you’d better use a framework to avoid this.

Frameworks like Angular, Backbone and Ember make your JavaScript code structured and keep it organized. Being all open source, they’re constantly improved by the community. They also save your time as they’re built on top of JQuery, a fast and powerful library that makes some of JavaScript’s complex operations easier to perform and more readable.

However, choosing your JavaScript framework isn’t such easy and could be challenging. Let’s try to understand how Angular, Backbone and Ember are different from each other and what their strengths and weaknesses are.

AngularJS

AngularJS is an open-source web application framework, maintained by Google and community, that assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

AngularJS was originally developed in 2009, and it is the oldest of the three frameworks. It also has the largest community. In 2013, Angular was fourth in number of project contributors on GitHub and third in number of stars gain which testifies to its huge popularity. Moreover such well-known companies as Amazon, Google and Nike credit AngularJS as JavaScript framework. There are also a lot of news sites using AngularJS on their front pages, including the Guardian, the Huffington Post, and MSNBC. You may also check https://builtwith.angularjs.org/ to have a look at good examples of Angular apps and experiments.

Pros

  • Ideal for complex “client-side” applications, where the complexity is more in a way “components” of an application interacts with each other than in a way they synchronise and/or interact with backend
  • Very clear separation of concerns
  • Uses concepts that kind of look like the future of HTML/DOM (DOM templates, binding attributes).

Cons

  • A bit complicated to grasp. A lot of new concepts
  • jQuery or another dom parsing framework in directives may be painful to use because of the way angular compiles templates
  • Good for application with a big level of complexity on the client side, but you’ll have to learn a lot of new stuff.

On the whole, AngularJS is a robust and viable framework for building generic web apps. Whether it lives up to the expectations of being the most dominant JS framework for web development is yet to be seen.

Backbone.js

Backbone.js  is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. It is designed for developing single-page web applications and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized.

Backbone came out in June 2010, and its community is nearly as large as Angular’s. Many popular applications such as Twitter, LinkedIn Mobile and Foursquare use Backbone framework. Also a number of music apps were built with Backbone, including well-known Pandora, Soundcloud and Pitchfork.

The download size of Backbone is very small compared to other frameworks which is its biggest advantage, since it only depends on one JavaScript library instead of several. Moreover, this framework is remarkably hands-off. This means experienced JavaScript developers can quickly get started. However less experienced developers might find themselves writing a lot of “boilerplate” (repetitive) code. If you’re having trouble Backbone has an especially active community rife where you could find free tutorials for getting started with the framework.

If you’re working on a single-page application or widget and you’re comfortable with being a self-starter—Backbone is likely the right choice for you.

Pros

  • Very easy to start with
  • Very small
  • Free to use any templating engine
  • A lot of excellent documentation
  • Good Community Support
  • Very popular (According to Github, Stackoverflow statistics)
  • Very flexible in how you may want to use it
  • Minimalist library
  • Easy to learn

Cons

  • No two way data-binding
  • Dependency on different frameworks like jQuery and Underscore
  • No provision for handling nested views
  • More work required to build large scale applications as compared to Angular or Ember
  • Code can become messy
  • DOM manipulations are left to the developer
  • Performs slower than AngularJS

Ember

Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.

Ember is the newest of the three, but it’s already making waves. LivingSocial, Groupon, Zendesk, Discourse and Square are some of the most well-known applications that have adopted Ember. Ember’s creators say it’s easy to see when a site is using Ember because of its loading speed.

At 69K minified and zipped, Ember is the largest framework of the three. Ember’s larger library size partly explains why it’s the largest download of the three Javascript frameworks. Another reason for it is that Ember comes with a lot of built-in support for standard code features.

Ember’s library size and support network are its two greatest strengths, but if you’re only trying to create a small widget or single-page app, it might be overkill for you. If you’re working on a multipage, navigational, long-term project, Ember might be the right choice for you.

Pros

  • Good for long running and complex applications with deep nested view hierarchies
  • Aggregates model data changes and update the DOM late in the RunLoop
  • Well defined models and computed properties
  • Use HandleBars as templating which is flexible
  • Provides auto updating computed properties
  • Test driven

Cons

  • Relatively new framework
  • Steepest learning curve out of the three
  • Payload is the largest out of all three
  • Dependency on jQuery and Handlebars
  • Poor performance as compared to AngularJS
  • Documentation is not very good
  • Two way bindings are not implemented well

As I could see from a number of forums about JavaScript frameworks, many love AngularJS. What about you? Which one framework is your favorite one and why? Please feel free to share your thoughts/experience in the comments below 🙂

Yuliya Tolkach

Yuliya Tolkach
Yulia.Tolkach@altabel.com
Skype ID: yuliya_tolkach
Business Development Manager (LI page)
Altabel Group – Professional Software Development

Almost everyone involved in web development knows jQuery or at least heard of it. Being simple and concise, it makes web developers’ life much simpler. But could it be a solution to every problem? Unfortunately not.  Once you decided to create more complex web apps, you are to face a problem, as there is no easy way to make your UI and data communicate with each other dynamically. And you need a library which will provide you with a more sophisticated way of communication between your UI and the underlying data model. And here is where Knockout (KO) could help.

What is Knockout?
Knockout is a JavaScript library which helps to create rich, desktop-like web UIs. It was developed and is maintained by Steve Sanderson, a Microsoft employee. KO simplifies user interactions and makes interfaces fully responsive to any data source changes. It provides a simple two-way binding mechanism to link a data model to an UI, thus making synchronization between them very easy.

 Pros:

–     Dependency Tracking
 The right parts of your UI are automatically updated whenever your data model changes. This is achieved by the two way bindings and a special type of variables called observables. You don’t have to worry about adding event handlers and listeners for dependency tracking.

–     Declarative Bindings
 This allows you to bind the elements of UI to the data model in a simple and convenient way. When you use JavaScript to manipulate DOM, this may cause broken code if you later change the DOM hierarchy or element IDs. But with declarative bindings even if you change the DOM – then all bound elements stay connected. You can bind data to a DOM by simply including a data-bind attribute to any DOM element.

–     Templating
 This becomes useful when your application becomes more complex and you need a way to display a rich structure of view model data, thus keeping your code simple. Knockout can use alternative template engines for its template binding. It has a native, built-in template engine which can be used right away.

–     Compatibility and Extensibility
 Knockout is compatible with any back-end technology and on the front-end it does as much or as little as you decide. It leaves many decisions to you to make, thus letting pick the best tool to meet your specific needs. Knockout doesn’t care about how you communicate with the server or how you choose to do routing, but there are several third party libraries that do a fine job of these things (like sammy.js for routing and upshot.js for data-access). It goes without mentioning that it works fine next to jQuery. Knockout is also easily extensible. To modify or extend the default functionality, it offers features like custom bindings, and custom functions. There are also several plugins already written for KO.

–     Ease of Learning and Use
 The documentation for knockout is probably the best have ever been seen. It has an amazing interactive tutorial system, live examples, and the documentation is extremely comprehensive and easy to understand. For most developers already familiar with JavaScript it should not take more than a few days to pick it up and start using.

Some additional benefits are the following:
•          KO is a pure JavaScript library – so it works with any server or client-side technology
•          It can be added on top of your existing web application without requiring major architectural changes
•          It’s compact – around 13kb after gzipping
•          It works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)
•          Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms

Cons
 –              All JavaScript variables and arrays are functions (also known as KO observables) as opposed to Angular. This can be a little confusing at first for some people. But it should be noted that all native JavaScript array functions like splice(), indexOf(), push() etc. are implemented by Knockout and may be used on KO observables.
–              HTML views can get messy as declarative bindings increase. This can be weakened to some extent through the use of custom bindings, computed observables and by attaching events to the DOM using jQuery instead of using the data-bind attribute.
–              Additional functionality like data-access and url-routing are not included. If you are looking for an end to end solution that offers a complete toolbox of common web-app functionality, you should probably check out such frameworks as Angular or Ember.

Knockout VS jQuery

Knockout.js is not a replacement of jQuery (as well as of Prototype, or MooTools). It doesn’t attempt to provide animation, generic event handling, or AJAX functionality (however, Knockout.js can parse the data received from an AJAX call). Knockout.js is focused only on designing scalable and data-driven UI.

Moreover Knockout.js is compatible with any other client-side and server-side technology. It also acts as a supplement to the other web technologies like jQuery and MooTools.

Although you will need to use Knockout with jQuery at the same time, in some cases like animated transitions, Knockout itself doesn’t depend on it. Another thing you need to understand is that Knockout doesn’t compete with jQuery – they both do excellent job; each one in its own direction. And if you want to get the most benefits you should use them together.

Knockout is the simplest of all the frameworks as well as one of the smallest. It does not claim to be able to solve all your problems, but it does claim to do a few useful things and do it better than the alternatives. In the words of Knockout creator Steve Sanderson, it is “low risk” because its uses are focused and it is compatible with any other technologies you are using and you can use it in a very small part of your application or your entire application. For someone who wants to take their project to the next level without too much risk, knockout is a great choice.

Hope you found the information in this article useful. Your valuable feedback, question, or comments about this article are always welcome! 🙂

Yuliya Tolkach

Yuliya Tolkach
Yulia.Tolkach@altabel.com
Skype ID: yuliya_tolkach
Business Development Manager (LI page)
Altabel Group – Professional Software Development

Zend Framework and Yii Framework are object oriented web application frameworks written in PHP. Over the recent years Yii has become extremely popular with the developers for implementing large scale secure and fast web applications, better to say, has become number 1 choice for many of them. However with the long-awaited release of Zend Framework 2 (ZF2) that supports all great PHP 5.4 features the position of Yii may sufferJ

So let`s start with the “newborn” Zend Framework 2. In no way it can`t be compared with the older ZF versions as ZF has been totally rewritten. More than 5 years have passed since ZF 1.0.0 release! Zend framework 2 includes almost all the advance PHP features which have taken the framework to the next level.

Some of the great features:

Modular Approach. Zend Framework 2.0 introduces a new and powerful approach to modules. This new module system is designed with flexibility, simplicity, and re-usability in mind. ZF2 emphasize on dividing your application logic into several modules rather than controllers. Each module in ZF2 application acts as a separate application with its own configuration and layout. Application module will be loaded every time so the default stuff goes into the application module. A module may contain just about anything: PHP code, including MVC functionality; library code; view scripts; and/or public assets such as images, CSS, and JavaScript. The possibilities are endless. Such an extensive modular approach not only improves the performance of application but also make it easy to manage and debug.
Service Manager. It`s one of the best features of ZF2. Service manager is simply a layer which will return you the object of any service you want to use in your application with the flexibility to include your own factories.
Event Manager. The basic architecture allows you to attach and detach listeners to named events, both on a per-instance basis as well as via shared collections; trigger events; and interrupt execution of listeners.
PHP Composer. Another great addition in the ZF2 which will automatically get the dependences of the project groom is the PHP composer. Composer makes sure that every project is using the same libraries with same versions.

ZF2 minuses.

Some developers may call it over engineered as the learning curve of the framework is quite hard. Also documentation is currently the weakest part of ZF2: Zend has followed its tradition of bad documentation. However the Zend skeleton application tutorial may provide you with some info about the framework.

And now let`s move to YiiJ Yii is a component-based high-performance PHP framework for developing large-scale web applications. We have already had a couple of articles in our blog dedicated to this frameworkJ To cut the story short , Yii is very fast and flexible and has many pluses and great features. Here are some of them

Integration with Javascript framework jQuery. Yii library comes with all the jQuery extensions like tabs and datepicker, allowing you to use jquery extensions in a very PHP way and initialize them on server so you can control their behavior on the client side in efficient way.
Yii Community. It is very vibrant and active and its participants can render great assistance to every developer.
Gii Module. Yii has handy built-in code generator Gii. With its help it`s possible to create web 2.0 applications in minutes. Basically this module allows you to create a model from your database table and then can from that model you can create the CRUD operations.
Active Record. One of the pluses is comfortable work with database: it can be used either as Data Access Objects, or as Active Record

Yii minuses:

Among the downsides of the framework many developers name a quite tough learning curve. Besides while using YIi developers need to be very careful about what you are dealing with, if you can do it well you are good to go.

Have you already tried to work with Zend Framework 2? Would you prefer ZF2 or Yii for your projects? Interesting to know your thoughts.

Anna Kozik

Anna Kozik
Anna.Kozik@altabel.com
Skype ID: kozik_anna
Business Development Manager (LI page)
Altabel Group – Professional Software Development

Responsive web design isn’t the future, it’s the present

In our humble opinion it’s late to debate whether responsive web design is the future because it’s already the present of everybody’s business represented online. Consumer/client behavior has been changing. According to statistics and analysts’ predictions, for instance, for the first time since 2001, PC sales are projected to be lower than they were in 2012; smartphone sales will double PC sales in 2014; tablet sales are expected to exceed 100 million this year and may top notebooks next year. So the shift to mobile is happening at an extraordinary speed, and tablets and smartphones are becoming extremely popular for business and pleasure matters. This means people view your content on thousands of oddly shaped and different sized screens. What’s more, according to Google research, mobile users “expect their mobile experience to be as good as their desktop experience” – this expectation poses a thorny challenge for both, business stakeholders and web designers and developers.

So this is no longer about “How do I make my website available to a smartphone or tablet?” – it’s “How do I make my business available in smartphone and tablet context?”. For some business it’s not important – it’s literally critical, for example: according to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web than via an app; the same percentage is quite common for e-commerce sites according to Google Analytics and that’s why RWD has been listed in E-commerce marketing checklist for 2013. If you wish to identify the percentage of your audience that use mobile devices use the Google Analytics Mobile Overview report feature: if mobile users are more than 5% of your total audience you should consider catering for them too.

In general, there are three main approaches to providing information and interaction to mobile/tablet device users : responsive (and adaptive) web design, mobilized websites, and mobile apps. It’s important to understand that these are different marketing channels and their value proposition is very different. A mobile web site may do something very different from a mobile app – simply said, “if your goal is just to display and show content beautifully create a responsive or mobilized website; if your goal is to show productivity tools, build an app”. Which option is the best for your business will depend on your use case, your users’ habits and your budget.

Responsive web design vs mobile web development: advantages and challenges

To talk about advantages of responsive web design, let’s start from its definition. RWD is a front-end development approach aimed at crafting device agnostic sites. It uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen. So responsive design provides easy reading and navigation with a minimum of resizing, panning, and scrolling, and eliminates the need for separate sites for different devices. Adaptive web design is either a subset of responsive design, or a related approach. “Responsive design will show more stuff or less, optimized for a mobile layout, but is likely to still provide access to the full desktop-view’s content. Adaptive design, by contrast, might show very different content, and also present a different UI, reflecting touchscreen’s tap/swipe/scroll versus desktop’s keyboard/mouse interaction.” In either case, responsive (and adaptive) web design will be based on the same code as a desktop site, and will locate on the same URL.

– In the definition above a couple of advantages of RWD are pointed out. Indeed, it improves user web browsing experience since a website adapts to the browser or device compatibility automatically and makes the content look good. For customers it shows that your business is receptive to changing technology and understanding of consumers’ needs.

– From business perspective, “one website – multiple devices” concept means that it’s easy to manage and focus on developing good content for your website. The same applies to analytics and strategy development and deployment since there is only one set of analytics to examine and a single strategy to develop and deploy. From maintenance standpoint, the technique is great too as one update affects all of your platforms.

– Additionally, responsive websites are easier for consumers to find than traditional or mobile web sites because they come up higher in search engines’ rankings. “In fact, Google recommends responsive web design because having a single URL for desktop and mobile sites makes it easier for Google to discover content and for Google’s algorithms to assign indexing properties to content.”

– One more advantage from the future perspective, as Resnick predicts, is: “As the internet transforms further into a platform of services and user interfaces that tie those services together, leveraging RWD technology in the future will allow companies to integrate a plethora of back-end services, such as Facebook, Twitter, Salesforce.com, and Amazon Web Services, and then present the integrated data back out the front-end iad layer on a responsive design so the application looks great on all devices without custom coding needed for each device or screen size. No longer are expensive back-end solutions needed to integrate legacy systems with business partners.”

Actually responsive web design is quite immature so it faces many challenges too.

– Even though we might view a responsive website on a smaller screen and it displays less visible content or smaller-sized images, this does not mean that the site will load faster. The thing is that from one side responsive websites are not much smaller in download size when viewed on smaller devices or screen resolutions compared to when being viewed on a desktop browser jacked into a broadband internet service provider, on the other hand mobile internet speeds still lag much behind broadband internet ones. Thus responsive web sites need advanced optimization, such as serving smaller images and conditionally loading scripts, and much more. An alternative may be found in dedicated mobile web development solutions since they specifically address mobile devices.

– The related issue concerns complexity. Responsive web designs are inherently complex because they are trying to support many viewing experiences without necessarily optimizing the experience for one particular device (or genre of devices). Mobile browsers will have to deal with a big HTML file, and the site would need to carefully avoid running specific scripts, loading certain CSS and download large images. Perfect implementation is possible, still avoiding over-resourcing requires scripts or code and therefore additional complexity. Typical “m dot” site wins in this case and is simple. It usually has a small amount of HTML, limited scripts, CSS, and images (if at all) as it is built specifically for its intended small-screen, touchscreen mobile devices viewing experience.

– As for UI and UX, responsive websites have limitations here. Not only in screen size, they are also limited for utilizing or recognizing key mobile features such as user location, connectivity, device limitations, software potential, and user needs. Mobilized sites and mobile apps will provide broader opportunities and advantages here.

Information architecture can be an issue. It needs to be carefully considered and should be hierarchically structured before the design implementation.

Advertising is an issue. Ads will have to shift with the sites, something that will wreak havoc with advertisers who want guaranteed placements on sites.

So, which approach will or do you use to present your business online?

HTML5’s momentum and Best tools for responsive web design

Responsive web design is not a specific technology but a whole design approach. However, responsive design is enabled primarily by CSS3 and JavaScript, which fall under the banner of HTML5. HTML5 is really maturing in terms of its functionality and, more importantly, its speed. So now HTML5 is the backbone of the new and interactive features of responsive web design.

To achieve a smooth flow from a large screen to a small one it takes a lot of patience and perseverance. To reach a seamless result there are a number of tools that help you with it. Below you will find a list of best responsive design tools broadly recommended in the web as well as by Altabel’s dev team:

1. Gridset
A tool that helps you design, prototype and build any type of grid layout required – columnar grids, asymmetrical, fixed, fluid or responsive grids. It even lets you create a library of your own grids, with a variety of presets available. It will allow you to build responsive prototypes (without all the calculations) very quickly and easily, providing all the measurements and tools to integrate with your existing markup.
Alternatives: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify, Responsive.gs, Golden Grid System and Photoshop Grid for Responsive Design.

2. Bootstrap
An intuitive and powerful front-end framework from Twitter to start a responsive website fast and easy. It addresses the most popular user interface components and interactions, uses a 12-column responsive grid system with simple and flexible HTML, CSS, and Javascript and features dozens of components, styles and JavaScript plug-ins, with basic global display, typography and link styles all set. It also gives the option of customizing components of your website for instance by using the Customizer .
Alternatives: Skeleton, Foundation, Base, InuitCSS, LESS Framework, Gridless, 320 and Upand Gumby.

3. Wirefy
Clients wish to see how wireframes will adapt to different device sizes. Static wireframes aren’t particularly useful to show a client how responsive your design is, or what functionality is being suggested. But rapid prototyping by building flexible wireframes may. Wirefy is a collection of functional responsive HTML snippets and templates that scale as the browser is resized (working across multiple devices). It builds on tools such as the Frameless grid system and Bootstrap, and uses CSS media queries that adapt to different device resolutions. Wirefy focuses on key elements such as typography, tables, images, slideshow, forms, tab panel, paginator, menu, etc., focusing on the users.
Alternatives: Froont, Interactive Style Tiles, Responsive Sketch Sheets, Responsive Wireframe Template, Interface Sketch Templates, Responsive Device Diagrams, Wirify.

4. FlevNav
Navigation strategy is a really critical component of any responsive website design. FlexNav is a jQuery plugin that takes a device-agnostic approach to complex site navigation. It is a mobile-first concept using media queries and JavaScript to create a menu with drop downs. It features multiple nested sub-menus, with support for em units and tap targets to reveal sub-menus for touchscreens.
Alternatives: TinyNav.js, Navigation Patterns for Responsive Design, MeanMenu, Responsive Solutions for Menu Navigation, jPanelMenu.

5. Adaptive Images
Previously, making your website images responsive was tricky and usually meant using a “hack-around”. Now several tools may simplify this task. Using a one htaccess file, one php file and a single line of JavaScript, Adaptive Images detects screen size of browsing devices, cashes and delivers device appropriate re-scaled versions of your web page’s embedded HTML images without any mark-up changes. Also it is entirely non-destructive, and works on existing websites and markups — without the need to edit anything. Adaptive Images works on the premise that you are already using the highest-resolution images on your site, and also offers a ton of customization options.
Alternatives: ReSRC.it, jQuery Picture, ResponsiveImg, Retina.js and Retina Images.

6. FitText
As content scales according to a user’s viewport, the text will naturally wrap as the container is narrowed; and this often causes widows, orphans or your headlines to look rather ugly, and can even break the entire layout. FitText is a jQuery plugin specifically for headlines and big text. It auto-updates the font size according to the width of the element wrapping it, so you can achieve scalable headlines and a non-broken layout that can be caused by font-sizing issues. FitText works perfectly with Lettering.js or any CSS3 property thrown at it. There are options to fine-tune the text, including the ability to set min-max sizes and the level of scaling. Still FitText is only for headlines, and shouldn’t be used with paragraph text.
Alternatives: BigText, Lettering.js, Kerning.js, Kern.js, Type Butter and Slabtext.

7. Responsive Slides
This lightweight plugin allows you to create a responsive slider using elements inside a container. The images have to be the same size and jQuery 1.6 and up should be used. You can keep captions and other non-HTML elements inside the slides, while also using CSS3 transitions with JavaScript fallback. It works in all major desktop and mobile browsers, can support multiple slide shows, have settings for transition and timeout durations, automatic and manual fade, and have options for customization.
Alternatives: Flex Slider, Slides.js, PhotoSwipe, Supersized, Camera, RefineSlide, BlueberrySequence.js and Galleria.

8. Responsive Tables
Data tables in responsive design can be troublesome: you want it to not break responsive layouts, not hide content, let you see entire rows and columns, not be too small to read easily or zoomed in too far requiring scrolling. Here ZURB comes out – a simple JavaScript/CSS combination containing two key files: responsive-tables.js and responsive-tables.css. It works by taking the first column, which is often the unique key for a table, and “pinning” it to the left of the table, allowing you to scroll the other columns under it.
Alternatives: Responsive Data Tables, Stackable.js, Footable, Responsive Tables, Responsive Tables, Responsive SEO Friendly Data Tables.

9. Responsive Design Testing
Building a responsive website means constantly testing how it displays across mobile and tablet devices. You could resize the browser yourself, or use a browser extension or tools within your IDE; but there is an extremely simple tool that allows you to see how a page displays on different screen sizes, in a single view. With Matt Kersley’s RWD testing tool you just have to enter your website’s URL into the address bar to test a specific page in different widths and device sizes. Also you can share the results of the test with others by adding any URL to the end of the testing page address. One major benefit of this tool is that it can be self-hosted (available on GitHub) by downloading and installing it on your own site. You can then navigate through the frames that your website appears in, testing the entire site effortlessly.
Alternatives: Screen Queries, Screenfly, Responsivepx, Responsinator, Responsive ViewportResponsive.is, and Resize My Browser.

10. Respond.js
The problem with media queries in responsive web design is that they are a part of CSS3 specifications so they do not work with older browser versions such as IE8 and lower. Respond.js comes to the rescue for browsers that don’t support media queries directly, translating any media queries it finds into equivalent JavaScript.The script itself is incredibly small and lightweight. It works unobtrusively, and doesn’t rely on any other scripts or frameworks to run.
Alternatives: Modernizer, Adapt, Categorizr, CSS3 Media Queries and Enquire.js.

The tools above are ultra useful for any RWD project from the planning and designing phase right through to testing, and what’re your favorites?

Welcome to share your view points.

Helen Boyarchuk

Helen Boyarchuk
Helen.Boyarchuk@altabel.com
Skype ID: helen_boyarchuk
Business Development Manager (LI page)
Altabel Group – Professional Software Development

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

%d bloggers like this: