Choosing a Front-End Framework
6 December 2017 |
Roland Becsi | About a 5 minute read
I come from a time where the only library that existed in the development world was where jQuery and Bootstrap hadn’t ever have been dreamt of. Back then, the typical front-end developer did not get a headache because they had to choose a framework at the beginning of a new project. The software was crafted from scratch every time, and everyone had a beloved library of functions used to reduce redundancy. But, we are coming up to 2018 now and the market is full of well tested, community built solutions for both the back-end and front-end. Why reinvent the wheel when we can generate our code using CLIs and keep the consistency through standards? Do you have an itch at the back of your head that insists you to use one of the shiny new frameworks? Think again.
Do you need a framework at all?
Depending on the size and complexity of a project, using a framework could be excessive, and result in a build up of future tech debt. This article highlights how it feels to be a front-end developer within modern times. Sadly, I find the depicted scenario happening too often.
A key question I suggest you always ask at the beginning of a development project is; what, why and how are you trying to solve the challenge?
“One of my first projects used Handlebars on the frontend. Because it was a simple app, there was no need for a fancy framework.”
– Ruth Earle, AND Digital Product Developer
Most of the cases where I hear of a new project coming along, my first instinct is to use Angular or React, I’m already sorting components into folders, and imagining the Bootstrap layout with Font-Awesome icons. We have to be more aware of our preferences and take a moment to consider alternatives.
I need a framework, what’s next?
With new projects, you have the opportunity to manoeuvre the tech stack and build a stable, high quality codebase. Always consider business requirements as the baseline, then do a sense check of the following:
- Performance requirements
- Client preferences
- Team skills
Depending on the size of the project, you need to look at the bigger picture to understand the future uses and maintainability of your tech stack. Stability, support and performance of the framework are main concerns, and you need to understand the pros and cons of your options before making a decision. Also worth considering, is the maturity of a new tech before you propose it to a client; if it backfires, your team will have the responsibility to clean it up.
During my career, I have built small to medium front-end projects (not more than 1000 components) and the first factor, performance, was mostly irrelevant. The most popular frameworks are optimised for fast performance with rendering, caching or code chunking techniques.
The client’s preference is an important factor, but tread with caution; sometimes their reasoning may be due to misunderstanding or industry hype. Don’t be afraid to push and express your views, backing them up with evidence.
If you crossed out the above, the initial framework should be chosen based on the skills within your team. Experience in a given framework will boost performance and code quality. If the majority of team members have to learn a new framework, factor in the (sometimes steep) learning curve and time to research best practices. It’s very easy to produce horrible code due to lack of experience.
It is hard not to be biased by your favourite tech but important to prioritise the above considerations. Do not let yourself to be manipulated into choosing a technology just because a fan likes it. When someone says one framework is better than the other, they are merely sharing their personal opinion, not facts.
“Realising the right time and place to propose a different framework is important. If you are in a situation where you have free rein, then it all comes down to experience and thoroughly understanding the pros and cons of the tech.”
– Sam Gregory, AND Digital Product Developer
Popular frameworks in 2017; Angular, React & Vue
When it comes to top front-end frameworks, the landscape is dominated by three players: Angular, React and Vue. Of course there are older and less known frameworks available, but again, ensure you can justify your decision to a client.
Angular is a full-blown framework including all the tools for creating components, HTTP requests, tests to define more stability and uses the power of typescript for consistency. Rapid development is made really easy with the CLI: and takes away the dull process of generating all the necessary files. The official documentation is easy to follow and drives through a lot of examples.
React is a template library and allows you better flexibility to install your own tools for the rest of the application. Using virtual DOM makes it more performant when it comes to relatively larger applications. It also comes with greater responsibility, it needs experience and strict rules to maintain code quality. React has a huge advantage in mobile dev with it’s native capabilities (React Native).
Vue is the “new” kid on the block, it has some similarities to React like the uses of virtual DOM but prefers HTML over JSX. I like the ability to attach component behaviour to existing, pre-rendered HTML. This may be the main reason Laravel is one of the main supporters of Vue.
Always go for quality, because in the end it doesn’t matter which shiny framework you use if your code looks like a dead wombat. In the end, decision making can feel like a complex process but always remember to do your best to produce professional, beautiful code, because this will be your signature, your footprint in the digital world.Read More From This Author
React Native Engineer (London)
Champion software quality and technical vision for AND and our clients, work on large-scale projects and help junior and mid developers grow in their roles.
Technologies you will be using
Tech Lead (Reading)
Bring your expert tech knowledge to the table to influence the direction of projects, whilst coaching and your team through engineering best practices.I'm Interested
DevOps Lead (Reading)
Bring your delivery expertise to the table, leading the pack as ambassador on operational requirements, influencing and continuous development.I'm Interested