What is Svelte and what are its top alternatives?
Svelte is a modern web application framework that compiles your code at build time to highly efficient JavaScript that updates the DOM when the state of your application changes. It is known for its simplicity, performance, and minimal footprint. With Svelte, developers write components using HTML, CSS, and JavaScript, resulting in cleaner and more maintainable code. However, Svelte may not be as widely adopted as other frameworks like React or Angular, leading to a smaller community and fewer third-party libraries compared to its competitors.
- React: React is a popular JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently update the DOM when data changes. Key features include virtual DOM, JSX syntax, and a large ecosystem of libraries and tools. Pros of React compared to Svelte include a larger community and more extensive documentation. However, React can be more verbose compared to Svelte.
- Vue.js: Vue.js is a progressive JavaScript framework for building user interfaces. It offers a flexible and approachable API, reactive data binding, and single-file components. Pros of Vue.js compared to Svelte include a gentle learning curve and a large set of official plugins. However, Vue.js may not be as performant as Svelte in certain scenarios.
- Angular: Angular is a comprehensive framework for building web applications. It provides a full-featured platform with tools for routing, forms, HTTP client, and more. Key features of Angular include two-way data binding, dependency injection, and TypeScript support. Pros of Angular compared to Svelte include a structured and opinionated approach to application development. However, Angular may have a steeper learning curve and a larger bundle size compared to Svelte.
- Ember.js: Ember.js is a framework for building ambitious web applications. It follows the convention-over-configuration principle and provides tools for routing, data management, and templating. Key features of Ember.js include Ember CLI, Glimmer rendering engine, and Ember Data. Pros of Ember.js compared to Svelte include a strong focus on developer productivity and a rich ecosystem of addons. However, Ember.js may have a higher barrier to entry for beginners.
- Alpine.js: Alpine.js is a minimal JavaScript framework for building JavaScript-driven web applications. It focuses on declarative and reactive programming using simple directives. Key features of Alpine.js include reactivity, interactivity, and lightweight size. Pros of Alpine.js compared to Svelte include a quick setup process and a small footprint. However, Alpine.js may not be as feature-rich or scalable as Svelte in complex applications.
- Solid.js: Solid.js is a declarative JavaScript library for building user interfaces. It emphasizes performance and simplicity with a reactivity model that updates only the necessary parts of the DOM. Key features of Solid.js include fine-grained reactivity, JSX syntax, and a small bundle size. Pros of Solid.js compared to Svelte include optimized rendering performance and TypeScript integration. However, Solid.js may have a smaller community and ecosystem compared to Svelte.
- Inferno: Inferno is a JavaScript library for building high-performance user interfaces. It aims to provide a React-like development experience with a focus on performance optimization and a small footprint. Key features of Inferno include virtual DOM, lifecycle methods, and JSX syntax. Pros of Inferno compared to Svelte include high performance and compatibility with existing React applications. However, Inferno may have a smaller community and fewer resources compared to Svelte.
- Marko: Marko is a JavaScript UI library with a focus on speed and simplicity. It offers a concise syntax for building reusable components and efficient rendering through server-side and client-side optimization. Key features of Marko include asynchronous rendering, hydration, and server-side rendering. Pros of Marko compared to Svelte include fast performance and a lightweight runtime. However, Marko may not have as large of a community or ecosystem as Svelte.
- Mithril: Mithril is a modern JavaScript framework for building single-page applications. It provides a simple API for creating components, routing, and state management. Key features of Mithril include virtual DOM, routing, and XHR utilities. Pros of Mithril compared to Svelte include a small size and a focus on minimalism. However, Mithril may have a less active community and fewer third-party libraries compared to Svelte.
- Preact: Preact is a fast 3kB alternative to React with the same API and features. It aims to be compatible with React but with a smaller bundle size and better performance. Key features of Preact include virtual DOM, component lifecycle methods, and hooks. Pros of Preact compared to Svelte include a familiar API for React developers and a smaller footprint. However, Preact may not have as large of a community or ecosystem as Svelte.
Top Alternatives to Svelte
- React
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project. ...
- Elm
Writing HTML apps is super easy with elm-lang/html. Not only does it render extremely fast, it also quietly guides you towards well-architected code. ...
- Imba
Imba is a new programming language for the web that compiles to performant and readable JavaScript. It has language level support for defining, extending, subclassing, instantiating and rendering dom nodes. ...
- Stencil
Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, part of the Web Component spec. ...
- Preact
Preact is an attempt to recreate the core value proposition of React (or similar libraries like Mithril) using as little code as possible, with first-class support for ES2015. Currently the library is around 3kb (minified & gzipped). ...
- Sapper
Sapper focuses on easy of use. It is alpha now and only compiled with rust nightly. ...
- JavaScript
JavaScript is most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic,and supports object-oriented, imperative, and functional programming styles. ...
- Git
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. ...
Svelte alternatives & related posts
- Components830
- Virtual dom672
- Performance578
- Simplicity507
- Composable442
- Data flow186
- Declarative166
- Isn't an mvc framework128
- Reactive updates120
- Explicit app state115
- JSX50
- Learn once, write everywhere29
- Easy to Use22
- Uni-directional data flow21
- Works great with Flux Architecture17
- Great perfomance11
- Javascript10
- Built by Facebook9
- TypeScript support8
- Speed6
- Server Side Rendering6
- Feels like the 90s5
- Excellent Documentation5
- Props5
- Functional5
- Easy as Lego5
- Closer to standard JavaScript and HTML than others5
- Cross-platform5
- Easy to start5
- Hooks5
- Awesome5
- Scalable5
- Super easy4
- Allows creating single page applications4
- Server side views4
- Sdfsdfsdf4
- Start simple4
- Strong Community4
- Fancy third party tools4
- Scales super well4
- Has arrow functions3
- Beautiful and Neat Component Management3
- Just the View of MVC3
- Simple, easy to reason about and makes you productive3
- Fast evolving3
- SSR3
- Great migration pathway for older systems3
- Rich ecosystem3
- Simple3
- Has functional components3
- Every decision architecture wise makes sense3
- Very gentle learning curve3
- Split your UI into components with one true state2
- Recharts2
- Permissively-licensed2
- Fragments2
- Sharable2
- Image upload2
- HTML-like2
- React hooks1
- Datatables1
- Requires discipline to keep architecture organized40
- No predefined way to structure your app29
- Need to be familiar with lots of third party packages28
- JSX13
- Not enterprise friendly10
- One-way binding only6
- State consistency with backend neglected3
- Bad Documentation3
- Error boundary is needed2
- Paradigms change too fast2
related React posts
I was building a personal project that I needed to store items in a real time database. I am more comfortable with my Frontend skills than my backend so I didn't want to spend time building out anything in Ruby or Go.
I stumbled on Firebase by #Google, and it was really all I needed. It had realtime data, an area for storing file uploads and best of all for the amount of data I needed it was free!
I built out my application using tools I was familiar with, React for the framework, Redux.js to manage my state across components, and styled-components for the styling.
Now as this was a project I was just working on in my free time for fun I didn't really want to pay for hosting. I did some research and I found Netlify. I had actually seen them at #ReactRally the year before and deployed a Gatsby site to Netlify already.
Netlify was very easy to setup and link to my GitHub account you select a repo and pretty much with very little configuration you have a live site that will deploy every time you push to master.
With the selection of these tools I was able to build out my application, connect it to a realtime database, and deploy to a live environment all with $0 spent.
If you're looking to build out a small app I suggest giving these tools a go as you can get your idea out into the real world for absolutely no cost.
Oof. I have truly hated JavaScript for a long time. Like, for over twenty years now. Like, since the Clinton administration. It's always been a nightmare to deal with all of the aspects of that silly language.
But wowza, things have changed. Tooling is just way, way better. I'm primarily web-oriented, and using React and Apollo together the past few years really opened my eyes to building rich apps. And I deeply apologize for using the phrase rich apps; I don't think I've ever said such Enterprisey words before.
But yeah, things are different now. I still love Rails, and still use it for a lot of apps I build. But it's that silly rich apps phrase that's the problem. Users have way more comprehensive expectations than they did even five years ago, and the JS community does a good job at building tools and tech that tackle the problems of making heavy, complicated UI and frontend work.
Obviously there's a lot of things happening here, so just saying "JavaScript isn't terrible" might encompass a huge amount of libraries and frameworks. But if you're like me, yeah, give things another shot- I'm somehow not hating on JavaScript anymore and... gulp... I kinda love it.
Elm
- Code stays clean45
- Great type system44
- No Runtime Exceptions40
- Fun33
- Easy to understand28
- Type safety23
- Correctness22
- JS fatigue17
- Ecosystem agrees on one Application Architecture12
- Declarative12
- Friendly compiler messages10
- Fast rendering8
- If it compiles, it runs7
- Welcoming community7
- Stable ecosystem5
- 'Batteries included'4
- Package.elm-lang.org2
- No typeclasses -> repitition (i.e. map has 130versions)3
- JS interop can not be async2
- JS interoperability a bit more involved2
- More code is required1
- No JSX/Template1
- Main developer enforces "the correct" style hard1
- No communication with users1
- Backwards compability breaks between releases1
related Elm posts
React is awesome, but is just a view library, when we need to manage state, there is Redux.js. The ecosystem of redux is big, complex and hard to integrate. That's why we choose to create hydux. Hydux is simple, the main idea is from Elm, a pure functional vdom-based framework for front-end. We seperate the whole app with state, actions and views. Which means not only our views are a tree, but also our state and actions. Reuse state and actions are just like reuse react components, no need to consider dependences.
related Imba posts
related Stencil posts
We chose Angular 2+ because our product has a rather complex back-office, most of which is visible only to our employees and contractors.
The "full featured" approach of Angular as well as the way it deals with the data model suited this business case well. We also use the Reactive Forms module a lot, as well as Clarity (an Open Source design system by VMWare) for the internal parts of the product. We also intend to use Angular's offline features.
For user-facing parts of the product we are now considering implementing views as Web Components with Stencil. We use Sass (SCSS syntax) for styling and TSLint to enforce a style guide close to Angular's default.
As a #Frontend developer I'm used to using tools like #BootstrapCDN or some APIs/Library like #GoogleMaps to create or have styled elements with cool functionality. But this requires me remembering Bootstrap classes, or trying to get Google Maps to work in #Angular. 😢
And that's just framework agnostic solutions... If you look at framework specific libraries you end up dealing with the fact you are pigeon holed into using framework specific libraries!
Libraries like Polymer or Stencil for #WebComponents are definitely the way to go!
- Lightweight15
- Drop-in replacement for React5
- Performance4
- Props/state passed to render3
- ES6 class components1
related Preact posts
Simple controls over complex technologies, as we put it, wouldn't be possible without neat UIs for our user areas including start page, dashboard, settings, and docs.
Initially, there was Django. Back in 2011, considering our Python-centric approach, that was the best choice. Later, we realized we needed to iterate on our website more quickly. And this led us to detaching Django from our front end. That was when we decided to build an SPA.
For building user interfaces, we're currently using React as it provided the fastest rendering back when we were building our toolkit. It’s worth mentioning Uploadcare is not a front-end-focused SPA: we aren’t running at high levels of complexity. If it were, we’d go with Ember.js.
However, there's a chance we will shift to the faster Preact, with its motto of using as little code as possible, and because it makes more use of browser APIs. One of our future tasks for our front end is to configure our Webpack bundler to split up the code for different site sections. For styles, we use PostCSS along with its plugins such as cssnano which minifies all the code.
All that allows us to provide a great user experience and quickly implement changes where they are needed with as little code as possible.
The first and most important premise is that should be fast.. really fast. This premise was basically because this is an PWA project, and the main goal of this project are be more efficient on restaurant.
So I ended up choosing Preact instead React .
This made the app (PWA) more faster, not only when navigating but improve TTI and data usage.
- Less bundle Size0
related Sapper posts
JavaScript
- Can be used on frontend/backend1.7K
- It's everywhere1.5K
- Lots of great frameworks1.2K
- Fast896
- Light weight745
- Flexible425
- You can't get a device today that doesn't run js392
- Non-blocking i/o286
- Ubiquitousness236
- Expressive191
- Extended functionality to web pages55
- Relatively easy language49
- Executed on the client side46
- Relatively fast to the end user30
- Pure Javascript25
- Functional programming21
- Async15
- Full-stack13
- Setup is easy12
- Its everywhere12
- JavaScript is the New PHP11
- Because I love functions11
- Like it or not, JS is part of the web standard10
- Can be used in backend, frontend and DB9
- Expansive community9
- Future Language of The Web9
- Easy9
- No need to use PHP8
- For the good parts8
- Can be used both as frontend and backend as well8
- Everyone use it8
- Most Popular Language in the World8
- Easy to hire developers8
- Love-hate relationship7
- Powerful7
- Photoshop has 3 JS runtimes built in7
- Evolution of C7
- Popularized Class-Less Architecture & Lambdas7
- Agile, packages simple to use7
- Supports lambdas and closures7
- 1.6K Can be used on frontend/backend6
- It's fun6
- Hard not to use6
- Nice6
- Client side JS uses the visitors CPU to save Server Res6
- Versitile6
- It let's me use Babel & Typescript6
- Easy to make something6
- Its fun and fast6
- Can be used on frontend/backend/Mobile/create PRO Ui6
- Function expressions are useful for callbacks5
- What to add5
- Client processing5
- Everywhere5
- Scope manipulation5
- Stockholm Syndrome5
- Promise relationship5
- Clojurescript5
- Because it is so simple and lightweight4
- Only Programming language on browser4
- Hard to learn1
- Test1
- Test21
- Easy to understand1
- Not the best1
- Easy to learn1
- Subskill #41
- Hard 彤0
- A constant moving target, too much churn22
- Horribly inconsistent20
- Javascript is the New PHP15
- No ability to monitor memory utilitization9
- Shows Zero output in case of ANY error8
- Thinks strange results are better than errors7
- Can be ugly6
- No GitHub3
- Slow2
related JavaScript posts
Oof. I have truly hated JavaScript for a long time. Like, for over twenty years now. Like, since the Clinton administration. It's always been a nightmare to deal with all of the aspects of that silly language.
But wowza, things have changed. Tooling is just way, way better. I'm primarily web-oriented, and using React and Apollo together the past few years really opened my eyes to building rich apps. And I deeply apologize for using the phrase rich apps; I don't think I've ever said such Enterprisey words before.
But yeah, things are different now. I still love Rails, and still use it for a lot of apps I build. But it's that silly rich apps phrase that's the problem. Users have way more comprehensive expectations than they did even five years ago, and the JS community does a good job at building tools and tech that tackle the problems of making heavy, complicated UI and frontend work.
Obviously there's a lot of things happening here, so just saying "JavaScript isn't terrible" might encompass a huge amount of libraries and frameworks. But if you're like me, yeah, give things another shot- I'm somehow not hating on JavaScript anymore and... gulp... I kinda love it.
How Uber developed the open source, end-to-end distributed tracing Jaeger , now a CNCF project:
Distributed tracing is quickly becoming a must-have component in the tools that organizations use to monitor their complex, microservice-based architectures. At Uber, our open source distributed tracing system Jaeger saw large-scale internal adoption throughout 2016, integrated into hundreds of microservices and now recording thousands of traces every second.
Here is the story of how we got here, from investigating off-the-shelf solutions like Zipkin, to why we switched from pull to push architecture, and how distributed tracing will continue to evolve:
https://eng.uber.com/distributed-tracing/
(GitHub Pages : https://www.jaegertracing.io/, GitHub: https://github.com/jaegertracing/jaeger)
Bindings/Operator: Python Java Node.js Go C++ Kubernetes JavaScript OpenShift C# Apache Spark
- Distributed version control system1.4K
- Efficient branching and merging1.1K
- Fast959
- Open source845
- Better than svn726
- Great command-line application368
- Simple306
- Free291
- Easy to use232
- Does not require server222
- Distributed27
- Small & Fast22
- Feature based workflow18
- Staging Area15
- Most wide-spread VSC13
- Role-based codelines11
- Disposable Experimentation11
- Frictionless Context Switching7
- Data Assurance6
- Efficient5
- Just awesome4
- Github integration3
- Easy branching and merging3
- Compatible2
- Flexible2
- Possible to lose history and commits2
- Rebase supported natively; reflog; access to plumbing1
- Light1
- Team Integration1
- Fast, scalable, distributed revision control system1
- Easy1
- Flexible, easy, Safe, and fast1
- CLI is great, but the GUI tools are awesome1
- It's what you do1
- Phinx0
- Hard to learn16
- Inconsistent command line interface11
- Easy to lose uncommitted work9
- Worst documentation ever possibly made7
- Awful merge handling5
- Unexistent preventive security flows3
- Rebase hell3
- When --force is disabled, cannot rebase2
- Ironically even die-hard supporters screw up badly2
- Doesn't scale for big data1
related Git posts
Our whole DevOps stack consists of the following tools:
- GitHub (incl. GitHub Pages/Markdown for Documentation, GettingStarted and HowTo's) for collaborative review and code management tool
- Respectively Git as revision control system
- SourceTree as Git GUI
- Visual Studio Code as IDE
- CircleCI for continuous integration (automatize development process)
- Prettier / TSLint / ESLint as code linter
- SonarQube as quality gate
- Docker as container management (incl. Docker Compose for multi-container application management)
- VirtualBox for operating system simulation tests
- Kubernetes as cluster management for docker containers
- Heroku for deploying in test environments
- nginx as web server (preferably used as facade server in production environment)
- SSLMate (using OpenSSL) for certificate management
- Amazon EC2 (incl. Amazon S3) for deploying in stage (production-like) and production environments
- PostgreSQL as preferred database system
- Redis as preferred in-memory database/store (great for caching)
The main reason we have chosen Kubernetes over Docker Swarm is related to the following artifacts:
- Key features: Easy and flexible installation, Clear dashboard, Great scaling operations, Monitoring is an integral part, Great load balancing concepts, Monitors the condition and ensures compensation in the event of failure.
- Applications: An application can be deployed using a combination of pods, deployments, and services (or micro-services).
- Functionality: Kubernetes as a complex installation and setup process, but it not as limited as Docker Swarm.
- Monitoring: It supports multiple versions of logging and monitoring when the services are deployed within the cluster (Elasticsearch/Kibana (ELK), Heapster/Grafana, Sysdig cloud integration).
- Scalability: All-in-one framework for distributed systems.
- Other Benefits: Kubernetes is backed by the Cloud Native Computing Foundation (CNCF), huge community among container orchestration tools, it is an open source and modular tool that works with any OS.
Often enough I have to explain my way of going about setting up a CI/CD pipeline with multiple deployment platforms. Since I am a bit tired of yapping the same every single time, I've decided to write it up and share with the world this way, and send people to read it instead ;). I will explain it on "live-example" of how the Rome got built, basing that current methodology exists only of readme.md and wishes of good luck (as it usually is ;)).
It always starts with an app, whatever it may be and reading the readmes available while Vagrant and VirtualBox is installing and updating. Following that is the first hurdle to go over - convert all the instruction/scripts into Ansible playbook(s), and only stopping when doing a clear vagrant up
or vagrant reload
we will have a fully working environment. As our Vagrant environment is now functional, it's time to break it! This is the moment to look for how things can be done better (too rigid/too lose versioning? Sloppy environment setup?) and replace them with the right way to do stuff, one that won't bite us in the backside. This is the point, and the best opportunity, to upcycle the existing way of doing dev environment to produce a proper, production-grade product.
I should probably digress here for a moment and explain why. I firmly believe that the way you deploy production is the same way you should deploy develop, shy of few debugging-friendly setting. This way you avoid the discrepancy between how production work vs how development works, which almost always causes major pains in the back of the neck, and with use of proper tools should mean no more work for the developers. That's why we start with Vagrant as developer boxes should be as easy as vagrant up
, but the meat of our product lies in Ansible which will do meat of the work and can be applied to almost anything: AWS, bare metal, docker, LXC, in open net, behind vpn - you name it.
We must also give proper consideration to monitoring and logging hoovering at this point. My generic answer here is to grab Elasticsearch, Kibana, and Logstash. While for different use cases there may be better solutions, this one is well battle-tested, performs reasonably and is very easy to scale both vertically (within some limits) and horizontally. Logstash rules are easy to write and are well supported in maintenance through Ansible, which as I've mentioned earlier, are at the very core of things, and creating triggers/reports and alerts based on Elastic and Kibana is generally a breeze, including some quite complex aggregations.
If we are happy with the state of the Ansible it's time to move on and put all those roles and playbooks to work. Namely, we need something to manage our CI/CD pipelines. For me, the choice is obvious: TeamCity. It's modern, robust and unlike most of the light-weight alternatives, it's transparent. What I mean by that is that it doesn't tell you how to do things, doesn't limit your ways to deploy, or test, or package for that matter. Instead, it provides a developer-friendly and rich playground for your pipelines. You can do most the same with Jenkins, but it has a quite dated look and feel to it, while also missing some key functionality that must be brought in via plugins (like quality REST API which comes built-in with TeamCity). It also comes with all the common-handy plugins like Slack or Apache Maven integration.
The exact flow between CI and CD varies too greatly from one application to another to describe, so I will outline a few rules that guide me in it: 1. Make build steps as small as possible. This way when something breaks, we know exactly where, without needing to dig and root around. 2. All security credentials besides development environment must be sources from individual Vault instances. Keys to those containers should exist only on the CI/CD box and accessible by a few people (the less the better). This is pretty self-explanatory, as anything besides dev may contain sensitive data and, at times, be public-facing. Because of that appropriate security must be present. TeamCity shines in this department with excellent secrets-management. 3. Every part of the build chain shall consume and produce artifacts. If it creates nothing, it likely shouldn't be its own build. This way if any issue shows up with any environment or version, all developer has to do it is grab appropriate artifacts to reproduce the issue locally. 4. Deployment builds should be directly tied to specific Git branches/tags. This enables much easier tracking of what caused an issue, including automated identifying and tagging the author (nothing like automated regression testing!).
Speaking of deployments, I generally try to keep it simple but also with a close eye on the wallet. Because of that, I am more than happy with AWS or another cloud provider, but also constantly peeking at the loads and do we get the value of what we are paying for. Often enough the pattern of use is not constantly erratic, but rather has a firm baseline which could be migrated away from the cloud and into bare metal boxes. That is another part where this approach strongly triumphs over the common Docker and CircleCI setup, where you are very much tied in to use cloud providers and getting out is expensive. Here to embrace bare-metal hosting all you need is a help of some container-based self-hosting software, my personal preference is with Proxmox and LXC. Following that all you must write are ansible scripts to manage hardware of Proxmox, similar way as you do for Amazon EC2 (ansible supports both greatly) and you are good to go. One does not exclude another, quite the opposite, as they can live in great synergy and cut your costs dramatically (the heavier your base load, the bigger the savings) while providing production-grade resiliency.