Adopting Frontend Frameworks for traditional HTML/CSS developers
an easy guide for people like me who wonder why they need to adopt frontend frameworks
After successfully ‘fighting’ to get a bus from the ‘Sandfield’ bus-stop at about 5:20 pm, on a time that might be the peak period for commuting by public bus, I settled to read the ‘Vue’ documentation. The more I read, the less I understood it. I had many questions.
Do not get me wrong, the document was well written- very easy to understand(I actually went to React site first and I developed a headache). But I do not get why I would need to use it. I am just fine with this codebase of CodeIgniter, how would this ‘Vue’ come in to play and what does it offer. An Angel was on the bus that day. He was a python developer at the office on the third floor working for this Big Tech Chinese company. He told me that ‘Vue’ was the easiest frontend library to start out with- easier than ‘React’ and ‘Angular’. But I still do not understand why I need it- that was the pain.
That was many years ago (not really, just about 3–4 years back). Now I use ReactJs (NextJs of course!) actively on projects and I can’t think of doing the project without using a frontend framework! What changed and what have I discovered?
I see people who have been developing websites for some years now use the somewhat old frameworks a bit reluctant to pick up javascript frontend frameworks because they don’t want to pick something fancy. They do not just see the value in.
Why a front-end library/framework
- Money, silly. Have you tried applying lately?
- You can separate the codebase of the Frontend away from that of the backend. That way, the team can develop tools independent of the backend / server-side language. As a front-end developer, I do not have to work on a full-stack framework like CodeIgniter to do my task. I do not have to know PHP or any other language the backend team is using.
- There are numerous server providers like Vercel and Netlify that can provide you with free hosting for your frontend application.
- I can now slice sections of the UI. For instance, I can have a single layout header and footer across the application without doing copy and paste around. That’s why I use PHP sometimes, just for slicing.
- Trust me, you wouldn’t miss JQuery. The same thing a backend language like PHP can do, creating logic right in the HTML code, You can now use JavaScript without wrapping in the <script></script>
How to get started
- I do not personally recommend reading the React Js documentation to get started. It might be for some people coming from some other background, maybe those that have worked using Angular Js. But for someone wandering why to use a frontend lib, Nah.
- Try Vue. It is learner-friendly and easy to start using right away without having to know all the packages. (I wondered why I needed to use packages like Webpack- what does it solve). The learning curve for React is stressful. Although they have a different approach, once you understand Vue to a point, the concept of React will be easy to grasp. (I think)
- For learning react, I recommend getting this course on React: React for the rest of us by Brad Schiff
- You can build a project that shares multiple complexes but one that excites you. A todo list is cool but everyone has that these days.
Some of the projects I am building/ built with React:
Connect with me on Twitter @hellodemola or email: hi@hellodemola.com.