Alternatives to Svelte logo

Alternatives to Svelte

React, Elm, Imba, Stencil, and Preact are the most popular alternatives and competitors to Svelte.
1.5K
1.5K
+ 1
493

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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
    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
    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

    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

    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

    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

    Sapper focuses on easy of use. It is alpha now and only compiled with rust nightly. ...

  • JavaScript
    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

    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

React logo

React

168.2K
139.1K
4.1K
A JavaScript library for building user interfaces
168.2K
139.1K
+ 1
4.1K
PROS OF REACT
  • 830
    Components
  • 672
    Virtual dom
  • 578
    Performance
  • 507
    Simplicity
  • 442
    Composable
  • 186
    Data flow
  • 166
    Declarative
  • 128
    Isn't an mvc framework
  • 120
    Reactive updates
  • 115
    Explicit app state
  • 50
    JSX
  • 29
    Learn once, write everywhere
  • 22
    Easy to Use
  • 21
    Uni-directional data flow
  • 17
    Works great with Flux Architecture
  • 11
    Great perfomance
  • 10
    Javascript
  • 9
    Built by Facebook
  • 8
    TypeScript support
  • 6
    Speed
  • 6
    Server Side Rendering
  • 5
    Feels like the 90s
  • 5
    Excellent Documentation
  • 5
    Props
  • 5
    Functional
  • 5
    Easy as Lego
  • 5
    Closer to standard JavaScript and HTML than others
  • 5
    Cross-platform
  • 5
    Easy to start
  • 5
    Hooks
  • 5
    Awesome
  • 5
    Scalable
  • 4
    Super easy
  • 4
    Allows creating single page applications
  • 4
    Server side views
  • 4
    Sdfsdfsdf
  • 4
    Start simple
  • 4
    Strong Community
  • 4
    Fancy third party tools
  • 4
    Scales super well
  • 3
    Has arrow functions
  • 3
    Beautiful and Neat Component Management
  • 3
    Just the View of MVC
  • 3
    Simple, easy to reason about and makes you productive
  • 3
    Fast evolving
  • 3
    SSR
  • 3
    Great migration pathway for older systems
  • 3
    Rich ecosystem
  • 3
    Simple
  • 3
    Has functional components
  • 3
    Every decision architecture wise makes sense
  • 3
    Very gentle learning curve
  • 2
    Split your UI into components with one true state
  • 2
    Recharts
  • 2
    Permissively-licensed
  • 2
    Fragments
  • 2
    Sharable
  • 2
    Image upload
  • 2
    HTML-like
  • 1
    React hooks
  • 1
    Datatables
CONS OF REACT
  • 40
    Requires discipline to keep architecture organized
  • 29
    No predefined way to structure your app
  • 28
    Need to be familiar with lots of third party packages
  • 13
    JSX
  • 10
    Not enterprise friendly
  • 6
    One-way binding only
  • 3
    State consistency with backend neglected
  • 3
    Bad Documentation
  • 2
    Error boundary is needed
  • 2
    Paradigms change too fast

related React posts

Johnny Bell

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.

See more
Zach Holman

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.

See more
Elm logo

Elm

729
742
319
A type inferred, functional reactive language that compiles to HTML, CSS, and JavaScript
729
742
+ 1
319
PROS OF ELM
  • 45
    Code stays clean
  • 44
    Great type system
  • 40
    No Runtime Exceptions
  • 33
    Fun
  • 28
    Easy to understand
  • 23
    Type safety
  • 22
    Correctness
  • 17
    JS fatigue
  • 12
    Ecosystem agrees on one Application Architecture
  • 12
    Declarative
  • 10
    Friendly compiler messages
  • 8
    Fast rendering
  • 7
    If it compiles, it runs
  • 7
    Welcoming community
  • 5
    Stable ecosystem
  • 4
    'Batteries included'
  • 2
    Package.elm-lang.org
CONS OF ELM
  • 3
    No typeclasses -> repitition (i.e. map has 130versions)
  • 2
    JS interop can not be async
  • 2
    JS interoperability a bit more involved
  • 1
    More code is required
  • 1
    No JSX/Template
  • 1
    Main developer enforces "the correct" style hard
  • 1
    No communication with users
  • 1
    Backwards compability breaks between releases

related Elm posts

Shared insights
on
ReactReactReduxReduxElmElm

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.

See more
Imba logo

Imba

17
39
0
Take a whole lot of Ruby, a pinch of Python and some React, get Imba
17
39
+ 1
0
PROS OF IMBA
    Be the first to leave a pro
    CONS OF IMBA
      Be the first to leave a con

      related Imba posts

      Stencil logo

      Stencil

      89
      110
      0
      A reusable web component generator
      89
      110
      + 1
      0
      PROS OF STENCIL
        Be the first to leave a pro
        CONS OF STENCIL
          Be the first to leave a con

          related Stencil posts

          Pierre Chapuis

          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.

          See more
          Michael Solati
          Developer Advocate at Typeform · | 4 upvotes · 44.2K views
          Shared insights
          on
          PolymerPolymerStencilStencil
          at

          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!

          See more
          Preact logo

          Preact

          405
          285
          28
          Fast 3kb alternative to React with the same ES6 API
          405
          285
          + 1
          28
          PROS OF PREACT
          • 15
            Lightweight
          • 5
            Drop-in replacement for React
          • 4
            Performance
          • 3
            Props/state passed to render
          • 1
            ES6 class components
          CONS OF PREACT
            Be the first to leave a con

            related Preact posts

            Dmitry Mukhin
            Engineer at Uploadcare · | 25 upvotes · 2.4M views

            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.

            See more
            Riderman De Sousa Barbosa
            Shared insights
            on
            PreactPreactReactReact
            at

            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.

            See more
            Sapper logo

            Sapper

            40
            56
            0
            A lightweight web framework written in Rust
            40
            56
            + 1
            0
            PROS OF SAPPER
            • 0
              Less bundle Size
            CONS OF SAPPER
              Be the first to leave a con

              related Sapper posts

              JavaScript logo

              JavaScript

              349.6K
              266.2K
              8.1K
              Lightweight, interpreted, object-oriented language with first-class functions
              349.6K
              266.2K
              + 1
              8.1K
              PROS OF JAVASCRIPT
              • 1.7K
                Can be used on frontend/backend
              • 1.5K
                It's everywhere
              • 1.2K
                Lots of great frameworks
              • 896
                Fast
              • 745
                Light weight
              • 425
                Flexible
              • 392
                You can't get a device today that doesn't run js
              • 286
                Non-blocking i/o
              • 236
                Ubiquitousness
              • 191
                Expressive
              • 55
                Extended functionality to web pages
              • 49
                Relatively easy language
              • 46
                Executed on the client side
              • 30
                Relatively fast to the end user
              • 25
                Pure Javascript
              • 21
                Functional programming
              • 15
                Async
              • 13
                Full-stack
              • 12
                Setup is easy
              • 12
                Its everywhere
              • 11
                JavaScript is the New PHP
              • 11
                Because I love functions
              • 10
                Like it or not, JS is part of the web standard
              • 9
                Can be used in backend, frontend and DB
              • 9
                Expansive community
              • 9
                Future Language of The Web
              • 9
                Easy
              • 8
                No need to use PHP
              • 8
                For the good parts
              • 8
                Can be used both as frontend and backend as well
              • 8
                Everyone use it
              • 8
                Most Popular Language in the World
              • 8
                Easy to hire developers
              • 7
                Love-hate relationship
              • 7
                Powerful
              • 7
                Photoshop has 3 JS runtimes built in
              • 7
                Evolution of C
              • 7
                Popularized Class-Less Architecture & Lambdas
              • 7
                Agile, packages simple to use
              • 7
                Supports lambdas and closures
              • 6
                1.6K Can be used on frontend/backend
              • 6
                It's fun
              • 6
                Hard not to use
              • 6
                Nice
              • 6
                Client side JS uses the visitors CPU to save Server Res
              • 6
                Versitile
              • 6
                It let's me use Babel & Typescript
              • 6
                Easy to make something
              • 6
                Its fun and fast
              • 6
                Can be used on frontend/backend/Mobile/create PRO Ui
              • 5
                Function expressions are useful for callbacks
              • 5
                What to add
              • 5
                Client processing
              • 5
                Everywhere
              • 5
                Scope manipulation
              • 5
                Stockholm Syndrome
              • 5
                Promise relationship
              • 5
                Clojurescript
              • 4
                Because it is so simple and lightweight
              • 4
                Only Programming language on browser
              • 1
                Hard to learn
              • 1
                Test
              • 1
                Test2
              • 1
                Easy to understand
              • 1
                Not the best
              • 1
                Easy to learn
              • 1
                Subskill #4
              • 0
                Hard 彤
              CONS OF JAVASCRIPT
              • 22
                A constant moving target, too much churn
              • 20
                Horribly inconsistent
              • 15
                Javascript is the New PHP
              • 9
                No ability to monitor memory utilitization
              • 8
                Shows Zero output in case of ANY error
              • 7
                Thinks strange results are better than errors
              • 6
                Can be ugly
              • 3
                No GitHub
              • 2
                Slow

              related JavaScript posts

              Zach Holman

              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.

              See more
              Conor Myhrvold
              Tech Brand Mgr, Office of CTO at Uber · | 44 upvotes · 9.6M views

              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

              See more
              Git logo

              Git

              288.5K
              173.5K
              6.6K
              Fast, scalable, distributed revision control system
              288.5K
              173.5K
              + 1
              6.6K
              PROS OF GIT
              • 1.4K
                Distributed version control system
              • 1.1K
                Efficient branching and merging
              • 959
                Fast
              • 845
                Open source
              • 726
                Better than svn
              • 368
                Great command-line application
              • 306
                Simple
              • 291
                Free
              • 232
                Easy to use
              • 222
                Does not require server
              • 27
                Distributed
              • 22
                Small & Fast
              • 18
                Feature based workflow
              • 15
                Staging Area
              • 13
                Most wide-spread VSC
              • 11
                Role-based codelines
              • 11
                Disposable Experimentation
              • 7
                Frictionless Context Switching
              • 6
                Data Assurance
              • 5
                Efficient
              • 4
                Just awesome
              • 3
                Github integration
              • 3
                Easy branching and merging
              • 2
                Compatible
              • 2
                Flexible
              • 2
                Possible to lose history and commits
              • 1
                Rebase supported natively; reflog; access to plumbing
              • 1
                Light
              • 1
                Team Integration
              • 1
                Fast, scalable, distributed revision control system
              • 1
                Easy
              • 1
                Flexible, easy, Safe, and fast
              • 1
                CLI is great, but the GUI tools are awesome
              • 1
                It's what you do
              • 0
                Phinx
              CONS OF GIT
              • 16
                Hard to learn
              • 11
                Inconsistent command line interface
              • 9
                Easy to lose uncommitted work
              • 7
                Worst documentation ever possibly made
              • 5
                Awful merge handling
              • 3
                Unexistent preventive security flows
              • 3
                Rebase hell
              • 2
                When --force is disabled, cannot rebase
              • 2
                Ironically even die-hard supporters screw up badly
              • 1
                Doesn't scale for big data

              related Git posts

              Simon Reymann
              Senior Fullstack Developer at QUANTUSflow Software GmbH · | 30 upvotes · 9M views

              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.
              See more
              Tymoteusz Paul
              Devops guy at X20X Development LTD · | 23 upvotes · 8M views

              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.

              See more