Evolution of Front-end Web Development
Website development have come a long way. In the beginning, web pages only show text. It was only in the mid 90’s that graphics and animated GIFs made its appearance on the web.
In 1998, Macromedia Flash and Fireworks was all the rage for creating webpages with animations and graphics. By the early 2000s, CSS was used widely to style webpages.
In 2007, Apple released the iPhone and smartphone usage took off. Websites were expected to work well across devices of varying sizes. Responsive web design is now an important aspect of web development.
In the same year WordPress, a free and open-source content management system (CMS) based on PHP and MySQL grew in popularity. It now powers 30% of all sites on the Internet, including about 15% of the top 100 websites in the world.
Disadvantages of WordPress
WordPress is easy to setup and customise. However it also has disadvantages. WordPress has numerous constant updates that render parts of your site usable. Site owners have to constantly troubleshoot and maintain their WordPress sites.
It is also the most hacked CMS platform on the internet. Security is an issue as WordPress relies heavily on plugins and themes for customisation. These plugins and the themes are not monitored and they can easily contain bugs or malicious code.
The worst of all, WordPress websites can be slow and bloated with unnecessary code from plugins and themes. The editor in WordPress generates bad HTML as well.
Even though WordPress is open-source and free, it isn’t really. There are significant costs to WordPress sites like hosting, paying for plugins and themes for customisation.
The Modern Web & Moving away from WordPress
Over the past few years several new front-end technologies emerged. The web development landscape has shifted radically towards the JAMstack, a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
It is now easier but much more technical to build websites. Modern JavaScript libraries can greatly improve the speed and efficiency of building websites while maintaining a well-organised and scalable codebase. They provide a better developer experience
JAMStack sites delivers reliable sites that load instantly even in uncertain network conditions. Such sites respond quickly to user interactions with silky smooth animations like a native app. They have higher security and lower cost of scaling.
On the back-end, modern websites are API-centric, data can be consumed via web, mobile app, in multiple formats and mediums. WordPress was built with website content in mind, not content across multiple devices and platforms. We will be using an API on the back-end to serve content to be displayed on the browser.
In the end you’ll be better off with a website built from scratch using a modern Javascript framework like Vue.js or React with content served via an API.
Comparison of Modern Front-end JavaScript Frameworks
It used to be that JavaScript and JQuery were used for the front-end, nothing else. However in last few years the landscape has been flooded with JavaScript frameworks. Every few months a new JavaScript library pops up.
How do you know which framework to use then? It ultimately depends on your project needs. If you are building your first simple static website, pick a lightweight library that is easy for you to learn. The Vue.js learning curve is shallow compared to other frameworks out there like Angular and React. It is simpler, less complex and easy to setup. Vue’s documentation also uses layman’s terms and is easy for beginners to understand.
This is an excerpt from the book, Modern websites with Vue.js.
Want to learn how to build state-of-the-art static websites using the latest technology stack? Visit ModernDev.Tech
Top comments (7)
I'm going to defend WP a little bit as I worked with it for many years and still doing so in a less regular basis.
WordPress is not only easy to set up and customise, it's super easy to use for a non-tech user. Easy to understand and easy to work with. That and the amazing quantity of plugins and themes have made it the most used CMS.
I completely agree with you that most of the plugins and themes add unnecessary code and are not well optimized, and I know that the plugin reviewers do their best to keep the users as safe as possible. However, that's a huge task and not an easy one to carry out.
WP released an API a few years ago that allows you to create your frontend as you like either using Vue, React, Aurelia or your chosen preference. In my case, after having worked with WP for many years, I would go with this option for new customers. That will offer them a nice CMS where they can edit content and will let me create a nice frontend customised for them using my favourite framework.
If you haven't tried it, it could be worth giving it a go ;)
Thanks for you article!
Hi Borja, thank you for your comment. I will definitely look into the API released by WordPress. WordPress is definitely not going away and clients are most familiar with using the CMS, it's easy to customise without the help of developers.
I'm in love with JAMstack!
I think because of how easy i can create on html/css/scss and then gatsby (still learning) and also i use other SSG as well as Headless CMS. I've been learning these past 2 years since netlify popouts out. I also learn how to minify/unminify the code if needed. I love using netlify.com, stackbit.com and currently i'm planning to grow small community on telegram at jamstackmakers.com to build telegram intergration + discussion and etc.
Before that last 8 years i've been using wordpress/mysql/myphpadmin alot and it annoys me with fancy themes and also plugins that always need to update. It takes alot of my time. It was a good thing for me as i was doing this for clients.
I'm still learning how to API everything on it.
So i need to understand JavaScript and JQuery more.
The challenge for me now on JAMstack is like authentication, hosting, javascript. I hope to achieve this more successfully. I've been self-taught and reading docs/articles. And i find your article is very useful and have very broad discussion and understanding evolution from creating static to dynamic too as well. Just followed you here! & subscribed to your newsletter - ModernDev.Tech
Thank you Fajar, I need to check out stackbit.com. I enjoy using Netlify so much too, it's so fast and easy to use. So nice to see how passionate you are about the JAMstack and thank you for creating a JAMstack community at jamstackmakers.com. There's so much potential with this stack.
You're most welcome! yeah is easy to deploy with one click.
I'm using netlify as well. Is easy for me to understand and it change the way how i see the future in web-development. You're most welcome! JAMstack will need to grow! yes so much potential and anyone can understand it too.
I have had a great experience with Jekyll for GitHub Pages. I host my own blog using it, and would recommend it for anyone who wants a hacker-style blog site for free. Hearing/reading "Wordpress" just kind of puts a sour taste in my mouth, as it never worked right for me, really ever. Static site generators like Jekyll allow sites to be fast as they are sort of "compiled", but from Markdown to HTML. There is no database, there is no extra connections (other than the HTML libraries) and it can all be hosted for free. Plus its not like you have to wait very long for the page to render on the server side, because its already rendered. Plus it still only takes minutes, usually seconds, to generate the pages before publishing.
Hi Chandler, thank you for your comment. I enjoy using static site generators like Jekyll too. You're right, it's really easy to use and super fast to render on the web. It's definitely a great option for a minimalist site that is easy to update and maintain.