DEV Community

Discussion on: 9 Projects you can do to become a Frontend Master

Collapse
 
beitadev profile image
Zaheed B.

Nice article. I hope you can recommend some projects for vanilla JavaScript.

Collapse
 
yeraycat profile image
Yeray Catalá

I suggest you to try to build a (very very simple) framework.

Try to implement the basis of a frontend framework: Render components, change detection, spa routing...

I don't think you will get anything suitable/maintainable/performant enough for a production environment, but you will learn a lot about vanilla Javascript and the typical gotchas of the frontend.

Collapse
 
simonholdorf profile image
Simon Holdorf

Thanks for your comment, Yeray!

Collapse
 
beitadev profile image
Zaheed B.

How do I go about that?

Thread Thread
 
yeraycat profile image
Yeray Catalá

There are a few articles over the internet from people that tried to do it as a learning experience and documented it, however I can't find one good enough right now.

Those 3 topics I think are the core of every frontend framework:

  • Render components
  • Detect changes on the data model and update those components (and viceversa)
  • Navigation without reloading (spa routing)

So you can start by trying to find out how you are going to implement components.

You can do the Angular/Vue way, that is to render the component from an html template and give it some capabilities based on custom html tags, or you can go with the React approach, that is the opposite, to create the components using javascript functions and return the template.

Once you have that, you should start with the actual rendering. The gotcha here is to render components recursively (one component has another on its template, so when you render the parent every child gets rendered eventually).

Once you have that, start with change detection. This is the most tricky point I think, because it has to be done recursively also, but it can be a headache to keep it performant.

You can check the source code and issue trackers of existing frameworks to try to extract some techniques and knowledge about how they solved it.