A New Baseline for Front End Developers

18 August 2014 | Articles

by Antonio Mello, Developer at e-Core.

Back in the days when the set of tools for web development was very short and limited, it was very hard to tackle the complexity of web applications properly. Very often, developers found themselves struggling to solve annoying compatibility issues or trying to handle the lack of guidelines for developers. The lack of standards for the web platform at that time contributed to the creation of a generation of poorly implemented applications. Prototype and JQuery did a great job, but with the huge amount of demand for high performance, scalable applications, it was just not enough. Fortunately, time has changed and the future looks bright as never before. We will walk through a collection of different frameworks and libraries but I don’t plan to be very technical in here since it’s just an overview. There will be plenty of references spread all over this article, so you can check that later.

Package Management

Remember the previous compatibility issues we talked about? It’s not just super boring to handle the versions manually but it can be very troubling to update a third-party library without knowing its dependencies. Something may change down the road and you may be taken by surprise. Bower is a package manager for the web. As they say: “Web sites are made of lots of things: frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you”. So let’s say you’re trying to add Bootstrap to your project – we’ll talk about that later if you have no idea what this is about – but you don’t want to go to the website, search for the latest version, download that, and only then start to work. Now can you imagine doing that for every single library you need? You need to be fast. Type “bower install bootstrap” and you’re up and running.

Scaffolding

We don’t want to spend time with something we have already done millions of times in our life, right? The faster we can set up our project and start working, the more satisfied our clients will be. Scaffolding is a great thing and you should take advantage of that. Yeoman does just that for us. Yeoman helps you to kick start new projects, prescribing best practices and tools to help you stay productive. All you have to do is run yeoman in your terminal, answer a few questions about which preprocessor you want to use for example, and you’re ready to go. Simple as that. Yeoman goes beyond that of course. It has tons of generators to create a project using whatever technology you want. Polymer, Angular, Node are some technologies you can use.

Testing

Applications must be tested. It’s no longer a matter of choice. You just have to. If a few years back you had the chance to say there were no tools available in the web development world for such a job, well my friend, it’s also no longer true. QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself. On the other hand, Jasmine is another popular choice but with a different approach. Fans of traditional unit testing go with Qunit. Rspec lovers may consider Jasmine. Jasmine is a behavior-driven JavaScript tool. It has a very descriptive way of writing tests and it does not rely on browsers, DOM, or any JavaScript framework.

Code Evaluation

Bad habits while creating JavaScript code might get out of control sometimes. The language by its nature gives you the freedom to define things in a variety of different ways and still work, but this may lead to very tricky errors. Tools for linting code have become essential while writing JavaScript. JSLint was built by Douglas Crockford to validate your code based in a series of rules and, as he says, it may hurt your feelings. The tool is in charge of checking from uncapitalized constructors to unused parameters among other things. JSLint is known for being extremely severe when it comes to checks. There’s also JSHint, a community-driven tool to enforce good practices, but different from the previous one, it’s very flexible and you can easily adapt it to your particular code conventions. Companies like Mozilla, Twitter and Yahoo are using it constantly. That said, I believe you should be using that as well.

In-browser developer tools

This is probably one of the first things that actually got the front-end developers attention when it first came out. Although Firefox was the first one to release a decent debugging tool for web development (FireBug), the most popular one these days is with no doubt Chrome Developer Tools. It’s amazing how it keeps evolving every single day. The vast features that enable developers to inspect JavaScript without alerts, CSS and JavaScript real-time editions and even evaluate performance is just a sneak-peek of the power it provides. The Google Chrome Canary – a bleeding edge version with lots of experimental features – is also available especially for developers who target trends. Have you ever imagined seeing your DOM structure in a 3D space? Yes, it’s also available.

CSS preprocessors

CSS has very powerful syntax and with the additions of CSS3 it became even more powerful. But it can also be very verbose and redundant. Preprocessors exist for solving these problems. They act as compilers, providing you additional syntax that delivers advantages such as:

  • nested syntax;
  • ability to define variables;
  • mathematical functions;
  • operational functions;
  • mixins.

It allows you to define responsibility for each piece of code you write, creating a more concise, more reusable and semantic code. In the end, it compiles to standard CSS. As you might imagine, there are a few tools available for this job, but the popular ones are Sass and Less. Sass is coded in Ruby and is thus processed server-side, while Less is a JavaScript library processed client-side. There are some minor differences with the way both languages handle the features listed above as well, but I personally think it’s just a matter of taste, since they both provide the same functionalities.

HTML, CSS, and JS frameworks

Well, we finally reach a more friendly area – if it’s not, it will be very soon. Twitter Bootstrap has become the most popular project on Github, getting thousands of stars and becoming the standard when it comes to creating responsive, mobile projects on the web. It has an amazing set of rich components, which allows you to prototype web projects really fast and easy. It’s designed for everyone, even if you are not a CSS or JavaScript guy. The documentation is very extensive, full of meta examples which you can see directly on the bootstrap’s web site. The resource also provides you a bunch of templates – like blogs, marketing web sites, portfolios, etc. –  which can guide you through the process of developing something similar. Despite the popularity and strong adherence of the community, there are other tools intended to do the same thing. Pure.css by Yahoo and Foundation are the ones that come to mind. You may want to check those as well.

MVC Frameworks

The impressive amount of MVC JavaScript frameworks available these days is ridiculous. There’s even a place called TodoMVC which has a Todo application built up in almost every MVC framework available. It’s a very similar situation to the JEE times where every week there was a different MVC framework solving the same problem in a slightly different way. Even though people are recklessly building all kinds of MVC frameworks, when it comes to JavaScript, it was a huge step towards best practices. Most people don’t understand why it’s a good idea to have a MVC framework backing up the client-side. With tools such as that, you’re now able – almost forced – to organize your code in a proper way. No logic inside view/templates, less contact with the DOM, a unique focal point for data and so on.

When Backbone was first presented, it was considered the Holy Grail but it quickly lost its place to modern frameworks like Angular.js and Ember. Those two solve the same problem in very authentic ways, but instead of focusing in the differences between them I would go about saying what they have in common and what benefits they provide. The following list is intended to show that:

  • data bindings;
  • composed views;
  • route system.

I’m not going to dive deep into this but those three characteristics enable you to create rich single page apps, with a minimal amount of code. Data binding is the automatic synchronization of data between the model and view components. Composed views are used to divide the view into small blocks that can be reused or adapted to different scenarios. Route system is what maps determined functionality to a specific template. It allows you to navigate through your app in a very easy way linking an action with a template. You can take advantage of this feature to create REST applications very easily.

Conclusion

The web is a happier place for developers thanks to these new technologies. But it’s our responsibility to keep working in order to improve the way we do things. I tried not to stick with the basics – such as JQuery as we all know – but there’s a lot more to talk. GruntRequire.jsUglifyJS are some of the most useful ones.  Once you master the ones mentioned previously on this post, you should check those three as well.

Read more:

3 Marketplace Apps for your Confluence!

 The Atlassian Marketplace is a portal that provides access to many apps that will optmize tools that you use, like Jira, Confluence, Bamboo and others. In addition, you can differentiate yourself by your integration potential. It allows customers to discover and...

6 Common Questions When Licensing

We know that at the time of purchase and / or renewal of licenses of Jira, Confluence or other Atlassian tool, some doubts arise. In an effort to help you solve some of them, we've chosen the key issues we're addressing at the moment. Are additional licenses required...

Share This