Hey y’all,
I created a 4-part video series where I build a frontend app in increasingly professional coding paradigms.
I think this will be a huge breakthrough for beginning developers in learning how to write code as a professional would - taking into account maintainability and scalability.
Level 1
- I recreate a design from frontendmentor.io.
- When implementing the JS, I rely on the DOM nodes themselves as the state of the application.
This is the most common sense approach for a newbie. The downside is that for every feature you want to implement, you have to react to a user action, take stock of the DOM elements on the screen, then update the right ones.
This will likely require messy, nit-picky logic that gets difficult to maintain as the project grows.
Level 2
- I restructure the JS to represent the state of the application as stored JS data.
- The process becomes: the user does something, I update the state data, and then I render out the UI according to the data.
This makes the rendering logic more modular - if things aren’t rendering properly, I can isolate the rendering logic more easily.
Also, the rendering logic will be largely the same for new features, so making new features becomes faster as the project complexity increases.
Level 3
- I note that neither approach thus far has led us to a fully functional frontend app.
- We have hardcoded the user’s data, and upon refreshing the browser window, we are back to where we started. The user’s progress is not recorded.
- We fix this by using localStorage as our place to store the user’s updates, allowing us to bring the user right back to where they were if the screen is refreshed.
- I end by noting that by this point, you know all you need to deploy a legitimate and potentially successful application, mentioning the game “2048” as an example.
Level 4
- I take you on a massive refactoring journey and paradigm shift to make your code as clean, maintainable, and scalable as possible.
- I start simply with the latest JS syntaxes and tricks, then I go deeper into how to structure your project to be less buggy and more maintainable/scalable as it grows - by:
- Implementing naming conventions
- Implementing Object-Oriented Programming (OOP)
- Breaking the project into modular folders and files
- Using Webpack to bundle and minify the files for optimization
By the end of this journey you will be a significantly better developer who understands more professional levels of thinking, which will help with your future projects and communication in interviews, and separate you from other beginners.
Here’s the link to the beginning of the series - https://youtu.be/Ksu7ks6U9mA
I hope you like it! I know it’s long, but it’s worth it!
Best of luck,
Jared
Top comments (0)