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
- 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
- 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
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.
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.
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.
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.
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.