The latest articles on DEV Community by Salie Lim (@salielim). https://dev.to/salielim https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F431215%2Ffab08542-61a8-4eaa-b01f-31f514b50e5a.jpg https://dev.to/salielim en Salie Lim Tue, 14 Jul 2020 22:34:25 +0000 https://dev.to/moderndev/modern-front-end-web-development-14j9 https://dev.to/moderndev/modern-front-end-web-development-14j9 <h2> Evolution of Front-end Web Development </h2> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <h2> Disadvantages of WordPress </h2> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <h2> The Modern Web &amp; Moving away from WordPress </h2> <p>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.</p> <p>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</p> <p>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.</p> <p>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.</p> <p>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.</p> <h2> Comparison of Modern Front-end JavaScript Frameworks </h2> <p>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.</p> <p>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.<br><br></p> <p><em>This is an excerpt from the book, Modern websites with Vue.js.</em> </p> <p>Want to learn how to build state-of-the-art static websites using the latest technology stack? <strong>Visit <a href="http://moderndev.tech">ModernDev.Tech</a></strong></p> vue javascript beginners codenewbie