22 October

AngularJS and the future of web development

Angular js Magento Themes Magento Templates

In full “era HTML5″ and Web 2.0 are few who discussed that Javascript and CSS3 are the absolute kings in relation with the “front-end” development. Nowadays Web Site are much dinamic(some web’s seem real desktop applications) so that improves greatly the user experience.

HTML is a language for defining static documents and the way to energize inevitably passed by Javascript. However, this process of dynamic HTML documents can be a rather tedious task that often, it is quite difficult to maintain if not designed properly.

Today we are going to introduce a framework called AngularJS (a standardized set of concepts, practices and criteria to focus on a particular problem type) that soon we will implement in our templates to improve and simplify the experience for those who use it, which is the purpose of our web development.

AngularJS Javascript is a framework which runs on the client side (browser) and focuses on attempting dynamic HTML documents, which is commonly known as DHTML (Dynamic HTML).

Normally this is achieved using CSS and Javascript so that, depending on the events that occur on our website (user actions, responses from the server via AJAX or Websockets [enable interactive communication between the user's browser and server]), updated, created or deleted certain components of our DOM (an image, a paragraph, or whatever …)

The object “document” of Javascript provides a number of methods as “getElementById” or “createElement” allowing to manipulate, create, or delete items in our HTML document. However, this is usually a relatively tedious task and often complex, especially for people who are not used to working with Javascript (JQuery is true that greatly facilitates the work).

AngularJS changes a little the approach of “dynamic” in the static HTML document by linking elements of our HTML document with our data model (data binding). Thus, we define a data model (Javascript) that correspond to certain parts of our HTML and, whenever there are changes in one part, it will automatically be reflected in the other.

In summary, in this blog we introduce a new way of how to energize our HTML pages on the client side using the JavaScript framework: AngularJS. This type of frameworks (some call MVC, other MVVM) allow us to separate the presentation logic from view by linking components model data with HTML.

From our point of view, AngularJS provides two major advantages:

  • Separation of presentation logic from view, so that the JavaScript code is independent of HTML code so we could redo the view without having to touch a single line of our business logic. In addition, our code is extremely easy to test and are not dependent on any external context (is pure logic).

  • Ease when manipulating DOM elements and their properties. This is a task that, as a rule, is quite tedious and as it grows the presentation logic is often complicated to write code that can be maintained easily. AngularJS simplifies greatly the work in this regard.

That is why, we decided to implement this framework in our upcoming themes, as well as we do with Bootstrap (CSS framework that we explained a few weeks ago), to enhance our templates not only from the point of view of structure, functionality and quickness, if also on usability, accessibility and user experience.

This post is also available in: Spanish

  • Chuck Norton

    I love the idea of Angular solely as the presentation layer. Are any of your recent themes setup for this yet?

  • nxlevel

    Great article. Have you designed any of these new Angularjs themes as yet? I’m patiently waiting to use one for my own website.

Back to Top