switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    javascript basics
    JavaScript Basics
    Feb 22, 2021
    testing practices for developers
    Testing Practices For Developers
    Mar 29, 2021

    Develop Incredibly Lightweight And Blazingly Fast Static Websites With Svelte

    Categories
    • Languages / Tech areas
    • Web Design
    • Web Development
    Tags
    • app development
    • boilerplate
    • code
    • css
    • develop websites
    • javascript
    • react
    • static websites
    • svelte
    • typescript
    • vue
    develop incredibly lightweight and blazingly fast static websites with svelte
    develop incredibly lightweight and blazingly fast static websites with svelte

    “Everything should be made as simple as possible, but not simpler”  - Albert Einstein

     

    Build boilerplate-free components with HTML, CSS and JavaScript/TypeScript, let Svelte compile your code, and get a static application that starts fast and stays fast.

    Svelte is not bound by the particularities of JavaScript. All of the heavy lifting is performed during compile time and not in the browser like your traditional front-end framework React or Vue. Since Svelte compiles into vanilla JavaScript there is no virtual DOM. No virtual DOM means no complex state management libraries. No complex state management libraries means a simple development process. 

    But what does a simple development process mean for us? 

    Well, lets use an example to show case the simplicity of Svelte. Below we have 3 code sandboxes. Each sandbox implements addition using two input fields. The first uses Svelte, the second React and the third Vue.

    The CodeSandBoxes

    When reviewing the Svelte code below, notice how little code is actually written compared to React and Vue. Also notice that the Svelte code achieves exactly the same functionality as the other two, such as state change and reactivity.

     

    React requires a large amount of boilerplate code to achieve state change; importing the useState module, creating functions to handle the state change and then assigning the functions to manage the state.

     

    While the Vue code contains less characters than the React code, you cannot have two top level elements in the template tag without the need div tag. Defining your variables a and b is cumbersome and unlike the simplicity of JavaScripts let.

     

    Why consider learning Svelte?

    Fundamentally Svelte is different to React and Vue. During the compile step your Svelte code is parsed into highly optimised vanilla JavaScript, and because of this there exists no virual DOM. What brings the speed to Svelte, is this. There is no longer the computational overhead of the virtual DOM, the users browser is no longer doing the manipulation of the virtual DOM.

    Modern front-end frameworks are JavaScript frameworks, yet sometimes they feel miles away from JavaScript. Svelte does the heavy lifting in the compile stage and lets you be closer to JavaScript before and after compilation. And if you already know JavaScript you will have absolutely no issue learning Svelte within a day. It's seriously simple, yet powerful.

    Svelte tutorials and relevant frameworks for SPA and PWA implementations

    Svelte is a new take on front end development, and does not have a large of a community. But that does not mean you cannot build modern single page or progressive web applications. If your'e interested in learning Svelte follow this tutorial from their documentation. Also, there exists the Svelte spa router for single page applications. And if you're interested in building a progressive server-side rendered application you can use Svelte Kit which was released for beta on the 23rd of March 2021, aiming to migrate from Sapper.

    Contact us


      Related posts:

      laravel livewireLaravel Livewire errors in app insightsUnhandled Promises Sent Through To App Insights In Node JS how to deploy your app/website on herokuHow To Deploy Your App/Website On Heroku kill scriptsA Kill Script For Processes That Are Using TCP/UDP Ports
      Share
      25
      Adam Purdon
      Adam Purdon
      Adam is a full stack web developer, who specialises in modern front end front-end frameworks as well as NodeJs and Laravel.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy