By: Gabriella Pirrone
In this article, we’ll explore why a headless CMS makes things simpler and geared more towards front-end developers, the foundational skills required for a front-end developer, and then move to topics like frameworks and additional tools that are needed to master the skill.
Why Traditional CMSs Depend on Full-Stack Developers
When you have a website that includes a backend/server-side programming as well as front-end (like most non-JAMstack CMS implementations), the barrier to entry for front-end developers is quite high. Primarily, a developer needs to know how to get the site running on their computer, which often requires you to install specific programs or dependencies (setup time is high). They also need to know how to work around the back-end, sometimes even do some basic things.
Also, the idea of managing a database and all their data themselves tends to scare a lot of developers as this is a requirement when using platforms such as WordPress, which most designers/front-end developers are used to. Full-stack developers are expensive, hard to find and not always specialized in front-end. The average salary of a full-stack developer in Canada can be about $110k annually, whereas the average front-end developer's salary is $90k a year.
The Rise of the Front-End Developer
For the seventh year in a row, JavaScript has been named the most commonly used programming language according to Stack Overflows Developer Survey Results - 2019.
Modern JavaScript frameworks such as Gatsby and headless CMSs make things simpler and are geared towards front-end developers. This is why the number of front-end developers is rising. JavaScript is the most used programming language. Now that you can use it on the back-end as well as the front-end, it’s the perfect tool for front-end developers.
Also, with the advent of microservice architectures, that may be in a docker container, which you would have to set up yourself, or something like Netlify Actions, Azure Functions, or Lambda Functions in AWS. Each of these can be written using the JavaScript skills you already know.
If you’re just starting your career in front-end development, look at some online tutorials. There are lots of self-learning platforms out there, such as Udemy, W3CSchools, and coding camps, too, that can help you become an expert.
The Path to Being a Front-End Developer
There is a particular skill set required to become a front-end developer. If you are just starting in the IT world, or maybe you are trying to land first front-end developer position, then check this list below on what you need to know to be considered a front-end developer:
Be familiar with a Design platform like Sketch or Photoshop (don't need to be an expert, as typically you just use it to review mockups etc. from designers and gather assets like images).
Learn HTML / CSS and get familiar with a good Text Editor like VS Code. Start working on static HTML/CSS layouts. (Static meaning that they don't have any interactivity or connect to a data source (database, API etc.)
Learn JavaScript first - Super important in modern web development, but important to learn the fundamentals of JavaScript before jumping into any JS Frameworks (discussed next). Some developers make the mistake and learn a framework first, which can end up being counterproductive.
Learn a JS Framework - Frameworks like React, Vue, Angular, etc. are VERY helpful for building high-scale web apps, however, our development team here at Agility CMS suggests that you learn JavaScript basics before diving into a framework. I discuss some of these frameworks below.
Learn a Static Site Framework - React has Gatsby, Next.js, Vue has Nuxt.js, Gridsome, etc. These frameworks allow you to build lighting fast websites and apps and are very important for SEO compared with a regular JavaScript Single Page Application. I discuss these and more below.
Front-End Frameworks
JS Frameworks
- React – React is a JavaScript library for building user interfaces. React can be used as a base in the development of single-page or mobile applications. You can read this article here to explore the leading UI frameworks for Reactjs applications.
- Vue.js – Vue.js is an open-source model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. For a complete list of Vue UI component libraries and frameworks, click here.
- AngularJS – AngularJS is a JavaScript-based open-source front-end web framework. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.
Full Frameworks
GatsbyJS – Gatsby is an amazing framework for Static Site Generation. Built on top of React.js, it's been around for about several years, and it's reliable. Agility CMS has written a Gatsby Source Plugin that allows you to build sites using Gatsby with content pulled directly from Agility's Headless Content APIs - including dynamic page routing.
Next.js – Next.js is a React framework that allows you to write server-rendered React apps easily. It’s relatively similar to NuxtJS, as they effectively do the same thing but with different frameworks.
NuxtJS – Nuxt.js is a free and open-source framework build on top of Vue.js, Node.js, Webpack and Babel.js. It allows for Static Site Generation, Single Page Application and Server-Side-Rendering. What's amazing is that you can run the same code in all these different ways, hook it up to a CMS, and power all the content from there (including the Page Routing). Most headless CMS systems don't allow for Page Routing to be defined in the CMS itself, but Agility CMS allows you the ability to do this. You can read more here.
CSS Frameworks
- Bootstrap – This is an oldie but a goodie and has been through a lot of iterations. It’s used in a lot of apps and websites, and if you aren’t using it now, chances are you may have to learn how someone ELSE has used it.
- Tailwinds CSS – Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
- Bulma CSS – This is a CSS framework based on Flexbox and can really help you get going fast, especially if you want to start from a responsive grid system.
How Can I Get Started?
Download your fully-featured Agility CMS instance! With a few quick steps and a couple of clicks, you will be all set! It’s completely free forever and gives you all the tools you need to build anything you wish.
- Pick one of our starter templates to kickstart your development.
- Follow along with our tutorials to get coding fast.
- Use any framework you want, including ReactJS, VueJS, or vanilla.
Happy coding!
Top comments (3)
This title was exactly the selling point our current CMS made for my management. I don't want to antagonize you and even don't have any experience whatsoever with Agility CMS, but this is not my experience. Once they want new features, that need specific third party integrations or event new features not provided in "plug and play" form, if any of your developers are not full-stack, or at least not "only" front-ends, you'll hit a wall. For sure, I think you say this with the better of intentions but this creates expectations that down the road could lead to a lot of friction or stress (clients demanding features for their specific needs, etc)
I think this is analogous to the "no-code fad". It's a great thing until it is not. It makes a lot of our work easy and the rest, impossible.
Hi Ibrahim - you make some really good points, and I know exactly how you feel when it comes to CMS not being a silver bullet. It should never be sold as that.
CMS is really just one more tool you have at your disposal. If you're more of a front-end person, and Javascript is your main strength, now you can use CMS headless APIs much more easily.
That being said, learning how to work with a CMS is also a pretty big investment of time. I would say it's worth it as a developer.
Hopefully, you can find one that you love working with to improve your own set of tools!
Hi Ibrahim.
Agree with you, and not to shoot down Agility CMS, there are too many false promises when it comes to website applications/NoCode solutions. I feel really sorry for non-technical people who think they can get a cheap website off the back of a lorry.
Joel, I will message you privately when I get a chance, as I have some ideas.