A New Baseline for Front End Developers
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.
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.
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.
In-browser developer tools
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;
HTML, CSS, and JS frameworks
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.
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. Grunt, Require.js, UglifyJS are some of the most useful ones. Once you master the ones mentioned previously on this post, you should check those three as well.
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...
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...
Understand the benefits of purchasing licenses with an Atlassian Platinum Partner and make it easier for your to obtain tools like Jira, Confluence and Marketplace Apps.