Tooling support for modern front-end development

Successfully implemented software is not only about writing code, but comes from a development process that ensures productivity and quality. The cornerstone of such a process is continuous integration, where code and other work realised by the development team are automatically pooled and verified as a whole.

Development tools are necessary to boost effectiveness and productivity. The best possible tooling looks after the automated integration processes and the manual development work. This is often overlooked or done incompletely in favour of starting to write code as fast as possible.

Front-end versus back-end development tooling

In the past, serious development was synonymous to back-end development, dealing with complex integrations, business processes and database updates. Now having front-end web technologies (JavaScript, HTML5), users are more demanding of the front-ends in terms of capabilities and looks.

The tooling to support front-end web development has however been slow to catch up to well-established tools and practices used for back-end development. Even in cases where architects attempted to use similar tooling and practices for front-ends, current development technologies (server-side web application frameworks such as Struts and JSF) didn’t make this easy.

Any architect or team lead that has tried wrestling with HttpUnit to write meaningful unit tests for a presentation layer, or developers that have spent endless hours waiting for new server deployments to see if their UI tweak worked can attest to this. Luckily such headaches are a thing of the past.

Modern front-end development tools

The need for rich user interfaces that are lightweight and easy to develop, has made JavaScript the new king of web application development. Where JavaScript was considered to be a simple means of adding pop-ups or client-side validation to your application, it has now become the de-facto technology for user interface realisation, giving rise to a host of top class frameworks such as AngularJS, EmberJS and Kendo to name but a few.

Most of these frameworks are fairly young to the software development scene but, learning from lessons from the past, have been designed to implement design patterns and best practices at their core and be flexible enough to support rich development processes. However, having not been around for long, JavaScript-based frameworks lack the mature tools of their back-end counterparts, and are faced with too many options, often of varying quality.

Establishing a checklist at the start of a JavaScript-based project is a task every architect or team lead must do.

So what do you need from your front-end development tooling?

The things to look for are inspired from the classic software development needs, with certain additions due to the nature of the technology:

• Testing: unit tests to test code in isolation and end-to-end tests to test through the resulting user interface itself.
• Test coverage: to complement test reports by highlighting how much of your code is tested.
• Quality checks: rule-based static code analysis and checks against style conventions.
• Support for large code bases: support for type checking and refactoring operations (considering the un-typed nature of JavaScript).
• Documentation: automatic generation of documentation for the code’s maintenance.
• Continuous development: streamlined development workflow by minimising wait time on changes and enabling automatic test re-execution.
• Server and developer support: allow tools to be used both by developers and continuous integration servers.

Get inspired by our approach

Here at TRASYS we have invested significant time from our front-end development experts to define a best-of-breed tool stack for JavaScript-based development.

With AngularJS at its core, TypeScript and SASS for JavaScript and CSS authoring, and tool support from Jasmine, Protractor, Bower and Gulp (to name but a few), the result is an ecosystem of closely linked tools that represent the cutting edge of modern web application development.

These Individual tools are tied together as part of a “seed” that is cloned to start new projects, keeping the link to ensure updates are easily incorporated.

Moreover, multiple such projects have been defined, forming a hierarchical portfolio to cater for different needs and technologies (e.g. library project, web app project, AngularJS project, Ionic project for mobile development).

So… Get inspired by how we have approached web development to boost your development projects. Stay in touch with modern requirements and expectations by selecting the correct tools to empower your developers and make front-end development “serious” and fun at the same time.