The frontend landscape has been growing in complexity over the past decade, as more and more logic is being migrated from the server to the client. As a result, technologies have been released that attempt to simplify or solve some of the more difficult and common problems in frontend development, with some platforms even allowing users with no coding ability to create entire websites! New developers are often ambitious, want to understand everything and dive into all the complexities by doing everything from scratch. However, this is often not necessary, costs a lot of time and rarely produces a serious improvement over using third party code. I have tried to create a breakdown of some of the problems that have been solved via open source, so that you don't end up needing to reinvent the wheel. I hope you enjoy it!
Single Page Application Frameworks
I am going to talk about the most obvious first. If you want to code a new website with the intent of making a professional single page application, you should go for a JavaScript framework. Frameworks offer tooling for very common problems and obscure complexity that a developer rarely needs to fully understand. They are also often opinionated, meaning that they force the developer to follow a predefined approach to developing the site. This may sound restrictive to new developers, however it actually saves a lot of time that would otherwise be spent coming up with personal conventions (which, as we all know, end up changing way too frequently). These are some of the things that I look for in a JavaScript framework:
- Separation of Concerns: it should be easy to divide elements of your site into components that can be spread across many files in a meaningful way. This makes it easier to understand your code as it grows, because you can concentrate on the things most relevant to your given problem
- DOM Interaction: The framework should make it easier, or at least not harder, to interact with elements on the site
- Routing: Implementing routing for single page applications from scratch is extremely difficult. Make sure you framework of choice has a simple implementation
- Combining JavaScript with HTML: Having your HTML and JavaScript on the same page vastly reduces complexity, while reducing the risk of error and headache caused when having to constantly switch between markup and code logic
- Active Community: You will run into problems as you develop and for that reason, you don't want to be the only person solving those problem. Established frameworks have libraries that solve common and tedious tasks, or keep the option available to ask a large community of developers for help
State Management
In frontend development, a lot of the complexity comes from application state. Data is shared between different views and components, meaning it can be difficult define where and how it should be stored. State management refers to the practice of storing application state at a single point and making it available to certain components as necessary. This is too complex to be worth coding from scratch, so if your JavaScript framework does not have it a built-in tool for state management, I suggest using a third party library like Redux.
Layout Systems
At the beginning, I often found myself creating the same types of CSS classes over and over. Examples of this were containers for other elements, that would use flex box to line up elements horizontally or creating a container that was broken up into other containers like columns in a grid. There are many CSS frameworks that make creating layouts for websites easier and more intuitive. Using these can save you a lot of code and are usually more flexible than options coded from scratch, while also being faster to work with. Examples of CSS frameworks that feature layout components are Bootstrap, Flexbox Grid or Materialize. Another alternative is to get really advanced at using CSS grid, which is a newer feature that is slower to work with than a CSS framework, but is better for defining more complex layouts.
Widget Styles
As a beginner, you might be tempted to create all the styles for various components of your site from scratch, to make your site more unique. That's certainly admirable, but I think it's good to know of a faster alternative. CSS frameworks like Materialize or Bootstrap come with professional looking styles for forms, buttons, and much more, saving you a lot of time having to worry about such things. They can also be adjusted to your needs by simply using another SASS file to override existing variables from the framework. Another key benefit of using a CSS framework is that they often have free themes available, allowing you to iterate and try new things quickly.
Animations
Animation is another thing that can be really cool if it is custom made, but can also take up a lot of time when a third party option might be just as good. For most common applications, such as hamburger buttons or content loading spinners, there are already public open source components ready for you to use.
Requests
This may seem weird but - there are also libraries for making requests and you should use them. Tools like axios make it more readable and safer to send out Rest requests, while Apollo does the same for GraphQL.
Complex Interactions
Often, things like creating a drag and drop system, swipe motion, or something similarly complex yet common, are usually unnecessary to code entirely from scratch since someone will have needed to solve these problems already. Given how hard these are to make and that doing so could lead to weird and error prone interactions, you should cut as many corners as you can here.
A General Rule of Thumb
Professional development is all about fast iteration. "Standing on the shoulders of giants" - or in other words, using what others have already created - is a great way to accelerate your progress and often achieve a better result than you would have otherwise. Whenever I am thinking of adding a new feature these days, I always ask: "Is this something that enough people would struggle with that there is already a tried and tested open source implementation". I am always surprised as to how often the answer is: Yes! I hope you found this article useful and that it saved you some time in the future to come.
Top comments (2)
I tried a lot of css frameworks and all of em have their own flaws:(
Also, a lot of times using libraries which implement custom behaviors limits your flexibility, thats why a few months back when i made a logic gate sim i decided to implement dnd from scratch
I definitly agree with the first 2:)
I think there is ALWAYS merit to coding something yourself (if only for learning purposes). I like CSS frameworks because I am bad at design - someone who is not definitely could do much better without one. Either way, I wish someone showed me how to leverage them sooner (hence this post)