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
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
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.
- 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
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.
Constantinos Simatos, Senior Solution Architect