DEV Community: publikacje

Learn everything about Headless in 11 minutes

publikacje — Fri, 12 Mar 2021 13:09:00 +0000

The traditional monolithic web architecture of an application could be no longer enough. Headless is the fresh technology to pursue. It allows you to build a modern and efficient sales strategy focused on providing more than excellent CX.

While e-commerce companies struggle with growing customer expectations, the competition does not rest or sleep. E-commerce is a fiercely competitive environment. To not fall out of the loop, or for that matter the market entrepreneurs need to create online sales platforms to attract customers. The fight over any potential customers is fierce. The traditional monolithic web architecture of an application could be no longer enough. Headless is the fresh technology to pursue. It allows you to build a modern and efficient sales strategy focused on providing more than excellent CX.

Headless solutions provide IT flexibility and dynamism for adapting to any current and future consumers’ needs. That is what the most developed businesses aim at achieving. Most important, with Headless approach, the adaptation works well with any customer communication channels, even the ones that will exist in the future. So overall, it leaves us a lot of room for further development and scaling up.

Then what exactly is headless?

Headless is a brand-new concept in software development. Its architecture separates the front-end application layer (what clients see), from the back-end (what the developers see while working on, e.g., an application). For these both sides to communicate requires designing an API (Application Interface), in simple words it works like a connector of some type. Such an approach supports organizations in responding quickly to any users’ additional needs and offers them groundbreaking digital experiences. Currently, we find the technology as a combination of two as Headless CMS (Content Management Systems, or in Headless e-commerce used in modern online stores.

Traditional CMS vs. Headless CMS

Let’s start with the fact that every online store model comprises three key elements:

Database stores all product data incl. price, name, description, and its images.
Back-end - the systems’s IT backbone, supports all store features and internal management and configuration tools.
Front-end is simply the storefront, displays processed database info to end-users.

The major difference between the traditional CMS systems (e.g. Wordpress) and Headless CMS lies in classic approach to programming. While the CMS favors a tight connection between the front-end and back-end, Headless grants independence to each of these layers. For that reason, we call traditional systems, also monolithic. They offer a set of features for creating content and impact how it displays to buyers. CMS-based technologies are used to prepare the presentation layer. However, the idea no longer works or holds water because of the growing customers’ demands. Also, often alternatives seem to be very difficult or even impossible to use in a traditional CMS. That is when Headless solutions come to our rescue. Headless CMS transforms the way we deal with the visual layer via API interface. It is now used to deliver content everywhere. Losing the ties between frontend and backend gives all developers the freedom to choose any frontend technologies. The content is designed just once and unified it in the app’s backend. As a result, we can display it on various devices, computers, smartphones, tablets, TVs or even VR and IoT devices. Even though each device display is different, the content will adopt to the user’s device. Because the backend lets us define a separate view for online viewed in a mobile app, or in fact, or for any other point of contact. The goal is to provide the best experience for users on any device. It is worthwhile, as each channel gives us unique presentation capabilities.

Presenting content on different devices and in different ways is the dominant feature that Headless’ is ahead of other technologies on the market.

API - the heart of headless

Headless design is based on API. We can say that API acts as a bridge between the frontend and backend. It separates these two parts from each other and enables communication between different applications. Raw data on the server supports the JSON or XML format. Why is it important? There is no need to generate content per each device and put on the server. We ‘retrieve’ the uploaded data from the server while it is rendering the client-side version depending on the device used. It displays the content optimized to the client’s app settings and parameters. And it does not matter if it is a web application in a browser, or a mobile app on any smart devices (smartphone or tablet, or on a TV). In a matter of seconds, the API passes on that information or data from the backend to any system which needs its data. The reason behind it is can do it is that the content itself is detached from any pre-defined structure.

Benefits of headless

The headless model is gaining popularity all over the world - and here is why. The architecture type concentrates on the user-oriented omni-channel following significant sales increase. Headless supports, and will continue to do so, any customer communication channel. Content display adopts to varied devices along with the user interfaces. It does not require any changes in the application back-end. IT grants overwhelming flexibility, increase our options for implementing new, innovative solutions. Also, developers, marketing or e-commerce managers can on their own create unique customer experiences in a shorter time than before. Besides, headless is perfectly compatible with PWA/TWA applications, which are conquering the e-commerce market.

Omnichannel

Growing customer expectations are making the purchase path expand day by day. To keep up with customer demands, brands need to readjust their IT tools to various sales channels. However, just switching to a multi-channel sales mode is not sufficient. What is then? Integration of all customer touch points for building a consistent brand image. That is when the omnichannel comes in. The strategy relies on combing all sales channels into one. Its effectiveness lies in a unified shopping experience across all sales channels. However, with omnichannel you need to be flexible, the traditional approach won’t work. Because it holds on the interdependence on the frontend and backend, and multi sales channels synchronization. It has no chance with Headless solutions which provide flexible and scalable architecture. For one, each customer touch point uses a single data source. Changes in the visual layer do not affect the backend layer, unlike monolithic architecture where a change in one layer goes hand in hand with changes in the other. Even if some modifications become much simpler and implementing new sales channels. Also, it is possible to create front-end layers per each sales channel individually. There is always room to extend the application features to reach new customer touch points and maintain a consistent brand image.

Fast content delivery

Headless technology gives a power boost to the page loading speed. It is not the only key factor that is important to end-users. The other one is comfort and significant SEO visibility. Headless-based pages have a higher position in search engines. Using API calls (i.e. requests sent to/from server) lets to retrieve content. In the scenario, resources are not shared, so we avoid system overloading, which often happens in the traditional model. The browser’s memory (cache) executes required scripts, causing the number of queries to drop. As a result, we guarantee system users faster system operation.

UX

Increasing customer demands is not the only reason online store owners welcome multichannel in e-commerce. Delivering consistent experiences at every touch point is. Headless constantly supports specialists and UX designers in meeting the customers’ wildest expectations. By using bespoke tools, it is possible to personalize UX every sales channel and add top-of-the-line features. Also, user satisfaction goes up because of the page display speed. Customers seeing everything is running smoothly, buy more. Conversation rate goes off the charts.

Headless mobile

The study held by Gemius/PBI in August 2020, 24.2 million people accessed the internet via different smart devices. Overall, the ratio of PC and laptop users lost the lead to mobile users by over 3 million. Polls from previous months or even years show smartphones and tablets are more popular and the trend is constantly increasing. Acting now and adapting websites to mobile standards is inevitable. There are bigger limitations to optimizing pages for mobiles. However, the headless model supports the mobile-first idea and makes it perfect for the task. We can create specialized mobile site versions and ones suitable for desktop use. As the headless separates the frontend and the backend, the client can use an application in any technology. Designing a mobile application has never been easier.

Flexible design

Nowadays IT flexibility is something every business strives for. You can rely on Headless as it provides you with unlimited possibilities. Enterprises can customize any platform features and create unique UX in multiple channels. It is much easier to follow market trends if you can change or add features without worrying how they will affect the entire system. Separating the backend and frontend layers enables the use of any programming language, framework, or technology. It is golden as you can shape anything to your business needs for improving the old or introducing a new sales channel. The work relies on deploying another API endpoint. You design a communication channel between the main platform, and a new POS (point of sale).

Security

The headless architecture provides much greater security for any stored information and databases. Since the frontend and backend layers are separate, a website user cannot access the system’s internal database. Frequently system parts are on different servers on purpose to increase data protection.

The SEO question

It is a common misconception that CMS-based is better than Headless, as it has more built-in features that help to manage SEO aspects. Headless CMS doesn’t have these features by default. Yet you can configure it to provide the same ones and expand them even further - provided you think it through well. Building SEO-related features is happening in the system’s backend. During the project, consider such aspects as the metadata, URL structures, HTTPS, or XML site map. Note Headless CMS solves the page performance issue. As we all know, website loading speed is a very important SEO factor. It also has a real impact on your search engine position and conversions. Google indexes slow-loading pages and favors the faster ones. It is true for mobile searches, where every millisecond matters in the overall SEO ranking.

Headless PWA

When you speak Headless, you must say PWA (Progressive Web Application), because they go together. The technology helps in creating a user interface for Headless CMS-based content. By combing these two options, you get twice the benefits. You can create efficient, highly accessible, and future-proof platforms.

The Internet calls for a mobile approach, as its traffic is going through the roof. Smartphones stopped being phones, they became versatile tools used for work and entertainment purposes. Because of the shift, a new application generation emerged: the Progressive Web Apps. Why is the mobile standard better? The PWAs are not native apps, because users do not install them. They resemble the ‘old’ ones because they work and provide all standard application features and more.

Let’s say a user visited a website that offers a PWA. Then, a special web notification would appear asking whether one would want to use the app on their devices. By clicking ‘Agree’ then the icon would appear on their home screen. The progressive app launches like a regular web page, yet you start them by pressing an application icon. There is more to PWAs, they work offline, can use built-in functions in a device (e.g. camera, geolocation feature), and send push notifications. Also, they provide a mobile user-friendly interface, are way responsive compared to the app designed in the old standard.

PWA tackles all major problems the mobile market struggled for years - providing a rich mobile experience to all users. You do not need to search for them in app stores, wait until they install and/or update themselves before using them. ‘Trouble-free’, run fast and smooth, and enable to use of all features the original website offers. From a customer’s perspective is all about the comfort of use. If everything works well, one will purchase within a matter of seconds. Yet, if they run into even minor trouble, e.g., too long loading time, they will turn away. The seller loses a customer, while the potential buyer gets an inadequate experience. The incredible PWA speed is the most crucial quality it offers, followed by an excellent UX and positive enforcement to come back.

The PWA’s standard extension is TWA (Trusted Web Activity), which is a technology that connects the entire world of web and mobile applications. Its purpose is to, so to speak, pack all PWA-based web services into a special container. Having the app like you can sell it on a marketplace, e.g., Google Play. Users visiting the app mobile store won’t even know it is something way better than a typical mobile app.

We dare say that PWA or TWA-based apps are the solutions from the future, and they will work in every industry. Its advantages go beyond expectations, however, will make a tremendous difference in e-commerce.

Combine or not to combine PWA and Headless?

Well, these two such strong and innovative technologies allow designing applications that offer the most revolutionary user experience. Such a duo guarantees unlimited IT flexibility and scalability for both applications and business. The market is hungry for these two aspects and TCO (Total Cost of Ownership). Whereas, a PWA app is cost-effective and is now the fastest way to develop compared to the Headless native app. Also, the Headless back-end makes any PWA applications easy to update and remains open to further digital improvements. Such applications work smoothly and display the content that matches a specific device. However, even the best-designed front-end application cannot work without a solid back-end won’t satisfy our customers. Here, Headless CMS comes to the rescue. A powerful platform guarantees the information flow goes to/from the platform.

Who will most benefit from Headless?

Headless is the technology of the future. It is a perfect solution if your company values IT flexibility and freedom in adopting alternative solutions. Ecommerce is the industry that will go well with Headless. Also, if you are a business owner always facing new challenges, Headless will the answer to your prayers. No matter if it comes to meeting ever-growing customer expectations, or even experimenting with new technologies.

The API-based approach eliminates the limitations put by the traditional sales platforms. It is best for large enterprises because it offers many complex, unique business rules and processes. Also, Headless welcomes integration with external systems. Its flexibility makes it easier to integrate your sales platform with other systems or tools. Also, extending platform features and/or alternative solutions implementations becomes much manageable. There are no limitations to any specific system integration, so you can say the possibilities are endless, also with mobile development.

Mobile apps have unique programming requirements and differ from traditional websites. Headless still can optimize their operation. It provides a wide range of possibilities and does not force any User Interface method. The API delivers content from the same backend, so it does matter if the app uses iOS, Android or PWA. Separating frontend and backend helps developers a great deal. During designing an application, they focus on providing the best quality experience to end-users.

Invest in Headless if your company needs something more. You will get your money’s worth compared to traditional system solutions. Even though it is a bigger investment, its benefits will haunt you and won’t seize to surprise you. Especially if you’re an e-commerce seller with ambitions to go global or open new sales channels. The Return On Investment increases along with the application’s performance, its speed, and significant savings in the long run. To know for sure, calculate the ROI based on the scale of your business and its development plans. Headless may not guarantee satisfactory results if your company operates in a smaller market with fewer target groups.

Summary

The future is now and comes bearing unknowns. The biggest challenge for business owners is not so much being ready but adopting to it like a chameleon. Now, you know about Headless, the new technology tool that will help you change colors. Meaning you can alter your business model to welcome the inevitable evolution and match the digital reality and customer expectations.

Almost every week we hear about new examples and study cases on platforms that used Headless technology. Such global giants as Forbes (PWA in 2017), Twitter (Lite, 2017), Uber (2018), Nike (2018), Adidas (2018), BMW (2018), and Zalando (2018) already have it. Next, Netflix (2020), Amazon (Luna, 2020), and finally YouTube (release on the 25th January 2021 and works on a desktop). And these are some examples on the top of the head. Headless revolution is on the move. Jump on the bandwagon and let your clients and customers enjoy it too!

Author: Eliza Bolon
Ideo Software

Vue Framework the 3rd – So, what's new?

publikacje — Wed, 18 Nov 2020 12:05:00 +0000

After many announcements and beta releases, we finally welcome to the market the Vue 3, one of the most popular Frontend frameworks.

On the one hand, a new way of creating components – one might say that it is even a revolution. On the other, the possibility to stay in your comfort zone - thanks to backward compatibility, you can still use the old API to create apps. Too good to be true? Let’s see and discuss what the most vital changes are in the latest Vue release.

Composition API

We can undoubtedly call the brand new Composition API an actual breakthrough. You can create components in a completely another way. The framework’s approach differs significantly compared to its former version. With the Vue 3 announcements, we were introduced to the new Composition API concept. The Vue community became agitated. Then, the users weren’t fond of those changes, as they seemed too drastic. All because the applications based on Vue.js 2 would become incompatible with new Vue.js.

Developers feared that the framework development team does not have a clear and steady vision for its further growth. No wonder they have already seen a similar scenario in the past with angular.js framework by Google. Then, developers have changed the concept so drastically, that instead of creating its new release version, it became a completely separate framework - Angular.

However, it turned out later on that those fears did not hold water. Evan You, the framework development team leader, announced that previous API changes its name to Options API and they will continue to provide technical support to developers. It is glorious news, as we can still create applications in Vue 3, with full backward compatibility, and enjoy the benefits of Composition API.

You might ask what those advantages are. First, greater flexibility in arranging code logic, its better reusability, and improved readability - thanks to a smaller number of indentations. Experience has shown that larger applications, based on Vue.js version 2, were much harder to maintain and develop. Diagnosing software bugs was quite a challenge. Some developers complained about reactivity issues. With this in mind, Evan You set out to change the approach to change the way of creating components’ logic. His inspiration came from other popular frameworks, such as React or Svelte. One of the many ideas he had was for example by introducing structures confusingly similar to React Hooks.

To show you how in real-life, you can flexibly create component logic via Composition API, I have created a budget calculator with basic features. It has a built-in search, can keep and calculate your current expenses.

The application is nothing but a simple form comprising fields that carry various data. You can easily add an extra expense, insert its name and price. As a result, you create an expense list. I have added a simple logic for filtering expenses by name and calculating the total. I chose these two functions on purpose to show the differences between the operation of the new Composition API and the previous Options API.

Now, let’s look at the component logic I have created with the Options API.

Component’s logic via Options API

The screenshot shows the base component logic. In Options API, the developer had to separate the code logic, not by its functionality, but by grouping objects. For example, those were responsible for the application’s condition, methods, computed and watch values, and others. As a result, it used a part within the larger a component for specific functionalities were simply scattered throughout the component. You can see it right here. The parts handling expenses are marked in green, while the ones in orange work the search feature. We can well see that the code is not organized according to its feature, but components intertwine. With larger components, it does not work well as the code becomes unreadable. Any developer working on a specific functionality will have to “jump” within the code.

I would like to offer my solution to the problem via the Composition API.

Component’s logic via Composition API

In the screenshot, the green code parts are expenses while the orange ones concern the search itself. What you see right away is the better code organization - not fragmented, code color corresponds to a feature. How to achieve it? You take a complicated Vue instance object with a set of fields (data, methods, computed, and watch) and replace it with a single setup function.

We can put all the code logic inside the setup function, as a result, you do not need to refer to the data and methods of a component by using the ‘this’ keyword. This is quite a convenient way to approach it. A lot of errors in JavaScript applications came from no grasp of ‘this’ and how and in what context it operates within the code.

Using this type of construction, as opposed to a more object-oriented one, enables us to reuse our code more easily. In the above screenshot, the code search logic has been moved to the custom useSearch hook.

By doing that, we can re-apply object search functionality also in other components with no code duplication. The previous framework version required using mixins to do so. Yet, it had many limitations strictly related to inheritance in object-oriented programming. The new Composition API achieves that goal despite a lack of mixins. As a result, the Composition API now provides all developers with much greater flexibility for creating components and code organization structure.

Teleport

The feature allows you to render any component part, literally anywhere in the DOM tree. So far, the template defined inside the component was trapped in it, which is a good practice in programming. However, sometimes, you may need to use a certain part of a component somewhere else, thus – the name itself. It comes extremely handy when you are working with any kind of modals, notifications, or pop-ups. As the Teleport becomes, let’s say a native component of Vue 3, rendering will become extremely convenient and no external patches will be necessary.

Multi-root components

In the previous Vue version, we faced a limitation related to starting the component template. You had to begin a template with just one base DOM element. Sometimes, such an additional tag wrapper could tie all our elements together within the structure – not always it was necessary or made sense. It increased the DOM size. In Vue 3, you can freely code, as it requires no additional tag to wrap other tags. Look for yourself and compare.

Vue 2 component template

Vue 3 component template

Improved Typescript

The source code in Vue 3 is new and rewritten in Typescript. If you remember, using Typescript (Vue 2), was slightly problematic because of the object-oriented Options API. As a result, most developers who wanted to proceed with typing had to apply the Vue Class Component package. Once applied, it was possible to create a class-based component much easier in Typescript. The new version framework does not need any additional package. It uses the Composition API, making your life much easier.

Suspense

Sometimes, you need to load certain components and data asynchronously. The common practice was declaring a special boolean flag. It would store information about its component data loading state. Yet, it’s a little bit of redundant work. First, the data would have to load into a component, then we would wait for a loader to appear or see a notification that data loading is still pending. In Vue 3, adding the Suspense component was to simplify the entire process.

Now, the process became automated, there is no need to use boolean flags holding loading state. Instead you can use two special slots inside Suspense component. Previously, we would have to define conditions and behaviors during and after asynchronous data loading for both components and data.

See, the Suspense component at work:

Suspense Component in action

Bundle size optimization and efficiency

Since the work on Vue 3 began, the framework creators focused on 2 goals – main bundle size reduction and sharpened efficiency. They achieved it by separating the framework’s core, which helped to compress the bundle’s size to 10kb (twice smaller than Vue 2).

Also, the efficiency increased by introducing an advanced tree-shaking approach. If you use a specific framework feature, then its logic code will not be used by the main bundle as opposed to Vue 2. Therefore, improved modularity caused significant decrease in production bundle size, especially in larger apps.

Migration to Vue 3

The good news is migrating to version 3 shouldn’t be a pain. Because of backward compatibility with the Options API, components we created in Vue 2, have the support and should work seamlessly in Vue 3. We can effortlessly migrate our application to Vue 3 without reworking any of the components.

For time being, both APIs have full support, and the choice is yours. You can start using the Composition API, meanwhile rewriting your components. If you got attached to the old Vue 2, you can use that too.

To sum up

The Vue 3 is a step up and forward. The developers were strongly inspired by other popular solutions in Javascript community and the increasingly popular functional programming approach. We do not know yet how many users will want to work with the new API. It will depend on personal preferences. Vue 3 was the ultimate response to issues related to running large applications. With time, we will assess whether those solutions successfully worked in large application deployments.

Meanwhile, we should observe the Vue approach. High chance, it will become as popular as React or Angular. At the moment, the Vue 3-oriented ecosystem comprises Vuex, Vue Router, and Vue Devtools. The framework itself as its tools are stable and well-developed. The Vue framework is mature and makes a great software candidate to develop fresh and challenging projects.

By now, I am quite convinced that the Vue framework has a bright future ahead of Vue. Soon enough, we should know.

Author: Michał Kuncio
Fronted Developer, Ideo Software

Svelte - the "new" frontend framework!

publikacje — Tue, 10 Nov 2020 14:24:00 +0000

In the last few years, the frontend focused on the popularity of Vue, React and Angular. Yet recently, a new player has emerged and intrigued the frontend experts. Svelte – that is the name of the "new" discovery.

We observe that novelty software disappear as quickly as they came into being. Yet, now and then, a framework stays for longer, and svelte may be just the case. Let's consider it for a moment.

When you hear the “new” framework you instantly catch yourself asking the same question as all programmers. What else can you do to facilitate software development? The IT world is so dynamic, it just springs new products at every turn. Despite repeatedly hearing about components and reactivity, hook-based solutions are also making a breakthrough.

All available market frameworks have one thing in common - we add them to the software source code. Here, Svelte is the exception to the rule.

What is Svelte, and what makes it stand out?

The framework has been on the market since 2016, and its popularity has been thriving since then. Let’s look at why its third release received so much attention.

Popularity trend among Github users. Source https://www.npmtrends.com/svelte

Data on the chart show a significant shift in developers' interest. The trend became very obvious at the very release of the latest version. Just so in 3 years, even before that, Svelte could gather a rather large and dedicated user community. In comparison with React or VueJS, it appears rather small. Yet, those frameworks have been around since 2013 which is 3 years longer than Svelte.

According to data from npmtrends.com, you can compare those frameworks’ download ratio within 3 years after their release. Svelte, with its 69 479 user downloads and being at the same development stage as the other two, did amazingly well.

Vue	Svelte	React
8 518	69 476	244 995

The significant difference between Svelte and React lies in numbers. No wonder, it is so vast since Facebook Inc. supports the technology.

The State of JS conducts annual polls which aim at programmers from all over the world. Data collected provides us with a lot of interesting material.

Various polls on the researched technologies.
Source https://2019.stateofjs.com/front-end-frameworks/

21,717 respondents from all over the world took part in the survey. If you look carefully, you see that Svelte has the lowest percentage of dissatisfied users. Those declared to use it at least once and will not do it in the future. According to data, it has a great appeal within programmers and they want to learn Svelte.

What seems a little odd, most people at the time of the study had not heard about Svelte just yet. The present survey results and may increase Svelte popularity soon. Interestingly, the same development path had VueJS almost 3 years ago – now, the second-most-popular JS framework. Research by State of JS, present on the chart, reveals that Svelte took the lead in 2019 within several popular frameworks.

Ranking of popular frontend technologies.
Source https://2019.stateofjs.com/front-end-frameworks/

Svelte is becoming prominent among recognized JavaScript frameworks. Is there a specific reason it gained so much recognition? What does it hold over its competitors? Will it be a precursor in the frontend technologies?

It is hard to say unambiguous answers to these points. The only source you can rely on your thoughts, user polls and statistics based on collected data. Additionally, the sense of the frontend market environment and its demands may come handy in the context.

Svelte – unlike others

Some say that Svelte is a powerful alternative to the leading frontend frameworks. Like React or Vue, you can use it for building entire applications, and their specific components. Svelte’s prominent feature is the simplicity of coding.

In the newest version, the framework mechanisms became more simplified. As a result, there is less code to handle and you can implement the application much faster. Consequently, it does make the developers’ job, less demanding – easier code management and fewer bugs.

Compared to other frameworks, its source code is not attached to the final code. Rich Harris, Svelte’s creator and Babel tool developer, used his previous experience with compiling JavaScript code.

Svelte behaves like a compiler during the production building process. It transcodes its syntax into pure JavaScript. Using native JS solutions, it slightly changes the source code, so it can work independently with no external tools. The compilation result is native JavaScript with no framework code load. How does it help exactly? The answer is quite straightforward by enhancing its speed significantly.

Svelte – swifter than others

According to any web speed testing tools, Svelte-based sites perform very well and are extremely responsive. Therefore, you can count on a high ranking in PageSpeed Insights from Google.

Also, the Svelte creator/developer has anticipated some future requirements related to SEO. For instance, Sapper is a tool that allows you to run the project in Server Side Rendering mode. It also supports excellent SEO visibility and higher indexation rate by search engines.

From an SEO perspective, those two are valid advantages to start using Svelte.

Svelte testing trials

Therefore, I tested the actual performance of solutions based on described frameworks: Svelte, React, Vue. For the sake of testing, I have created three almost identical projects with separate semantics per each framework.

Then, I ran all of them under identical conditions: the same server, the same configuration and no external load. Testing in the same environment made it possible to observe differences in response speed, performance, and file sizes. Each application has to render a certain amount of digits from in the Fibonacci sequence.

First, I tested the rendering speed for the first 50 numbers in a sequence. The results are the following:

Svelte	Rendering time required: 10.2ms JS Heap: [1.4MB - 1.4MB]
React 16.13.1	Rendering time required: 12.0ms JS Heap: [1.8MB - 1.9MB]
Vue 3	Rendering time required: 16.1ms JS Heap: [1.7MB - 1.7MB]

Performance Test #1 - Svelte (Devtools Chrome)

Performance Test #1 - React (Devtools Chrome)

Performance Test #1 - Vue (Devtools Chrome)

Just by looking at the results, you can see that Svelte is ahead of the competition. It is faster than React by 1,8 ms and 5.1 ms than Vue application.

Another test, I devised with the Lighthouse tool. I wanted to measure the page performance. Here again, the winner was Svelte.

Page Performance Test #2 – Svelte (Devtools Chrome Lighthouse)

Page Performance Test #2 – React (Devtools Chrome Lighthouse)

Page Performance Test #2 – Vue (Devtools Chrome Lighthouse)

Finally, I compared the file sizes for each application. In the screens shots below, you can see that both React and Vue use their source codes on a runtime. Svelte does not do it, and so the file weighs only 5kb, when for React it is over 130kb, and for Vue 85 kb.

Network download production file size - Svelte (Devtools Chrome)

Network download production file size - React(Devtools Chrome)

Network download production file size - Vue(Devtools Chrome)

Summing it up

Svelte is a tool that allows you to approach programming differently. It is de facto the first-ever framework-compiler. While using it, you get a pure object code – the one written by the programmer. That is the precise reason why it may revolutionize the frontend technology field.

Time will tell, whether Svelte will stay longer. It will largely depend on Svelte developers, and their sole motivation to support and optimize the framework components. Only creating a stable environment can bear positive results and drive in new Svelte believers.

The development will revolve around the compilation process and its improvement. Then, adding automatic unit tests to check the developer’s code in compile time – without devising own tests from scratch.

Svelte, with its two fortes - simplicity and speed, is surfing into the future in new directions and IT solutions. Keep an eye on Svelte framework. In 2-3 years it may become one of the key players in the JavaScript community.

Author: Damian Glazer
Fronted Developer, Ideo Software