Alternatives to Evergreen logo

Alternatives to Evergreen

React Router, styled-components, Ant Design, Angular CLI, and Vue CLI are the most popular alternatives and competitors to Evergreen.
3
14
+ 1
0

What is Evergreen and what are its top alternatives?

Evergreen is a pragmatic UI kit for building evolving products on the web. It is built and maintained open-source by Segment.
Evergreen is a tool in the JavaScript Framework Components category of a tech stack.
Evergreen is an open source tool with 9.3K GitHub stars and 499 GitHub forks. Here’s a link to Evergreen's open source repository on GitHub

Evergreen alternatives & related posts

React Router logo

React Router

950
743
11
950
743
+ 1
11
A complete routing solution for React.js
React Router logo
React Router
VS
Evergreen logo
Evergreen

related React Router posts

React
React
GraphQL
GraphQL
Apollo
Apollo
JavaScript
JavaScript
TypeScript
TypeScript
Webpack
Webpack
React Helmet
React Helmet
styled-components
styled-components
Sass
Sass
Less
Less
PostCSS
PostCSS
Bootstrap
Bootstrap
Semantic UI
Semantic UI
Foundation
Foundation
React Router
React Router
Koa
Koa
#JSX
#React.
#Css
#StyledComponents.
#Async
#HTML
#GraphQL
#Apollo

ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

See more
styled-components logo

styled-components

456
238
1
456
238
+ 1
1
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps...
styled-components logo
styled-components
VS
Evergreen logo
Evergreen

related styled-components posts

Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare · | 58 upvotes · 583K views
Firebase
Firebase
React
React
Redux
Redux
styled-components
styled-components
Netlify
Netlify
Gatsby
Gatsby
GitHub
GitHub
#ReactRally
#Frontend
#Google

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
Vishal Narkhede
Vishal Narkhede
Javascript Developer at getStream.io · | 19 upvotes · 244.9K views
atStreamStream
Stream
Stream
React Native
React Native
Chat by Stream
Chat by Stream
JavaScript
JavaScript
Expo
Expo
styled-components
styled-components
Babel
Babel

Recently, the team at Stream published a React Native SDK for our new Chat by Stream product. React Native brings the power of JavaScript to the world of mobile development, making it easy to develop apps for multiple platforms. We decided to publish two different endpoints for the SDK – Expo and React Native (non-expo), to avoid the hurdle and setup of using the Expo library in React Native only projects on the consumer side.

The capability of style customization is one a large deal breaker for frontend SDKs. To solve this, we decided to use styled-components in our SDK, which makes it easy to add support for themes on top of our existing components. This practice reduces the maintenance effort for stylings of custom components and keeps the overall codebase clean.

For module bundling, we decided to go with Rollup.js instead of Webpack due to its simplicity and performance in the area of library/module providers. We are using Babel for transpiling code, enabling our team to use JavaScript's next-generation features. Additionally, we are using the React Styleguidist component documentation, which makes documenting the React Native code a breeze.

See more
Angular CLI logo

Angular CLI

418
337
0
418
337
+ 1
0
A command line interface for Angular
    Be the first to leave a pro
    Angular CLI logo
    Angular CLI
    VS
    Evergreen logo
    Evergreen

    related Angular CLI posts

    Angular 2
    Angular 2
    Angular CLI
    Angular CLI
    TypeScript
    TypeScript
    Visual Studio Code
    Visual Studio Code
    Babel
    Babel
    Webpack
    Webpack

    Picked Angular 2 as framework since Angular CLI made it easy to get started on a self-contained frontend web project with TypeScript for easier development -- thanks to intellisense extensions for Visual Studio Code, hassle-free browser compatibility with the built-in Babel transpiler and packaging with the built-in Webpack configuration.

    See more
    Vue CLI logo

    Vue CLI

    280
    264
    0
    280
    264
    + 1
    0
    Standard Tooling for Vue.js Development
      Be the first to leave a pro
      Vue CLI logo
      Vue CLI
      VS
      Evergreen logo
      Evergreen
      Angular Material  logo

      Angular Material

      247
      261
      8
      247
      261
      + 1
      8
      Easy to use material design for angular
      Angular Material  logo
      Angular Material
      VS
      Evergreen logo
      Evergreen
      Storybook logo

      Storybook

      177
      115
      0
      177
      115
      + 1
      0
      Build bulletproof UI components faster
        Be the first to leave a pro
        Storybook logo
        Storybook
        VS
        Evergreen logo
        Evergreen

        related Storybook posts

        Robert Zuber
        Robert Zuber
        CTO at CircleCI · | 17 upvotes · 484.6K views
        atCircleCICircleCI
        Next.js
        Next.js
        React
        React
        Storybook
        Storybook
        TypeScript
        TypeScript
        Emotion
        Emotion
        GraphQL
        GraphQL
        Apollo
        Apollo
        Jest
        Jest
        Percy
        Percy
        Cypress
        Cypress

        We are in the process of adopting Next.js as our React framework and using Storybook to help build our React components in isolation. This new part of our frontend is written in TypeScript, and we use Emotion for CSS/styling. For delivering data, we use GraphQL and Apollo. Jest, Percy, and Cypress are used for testing.

        See more
        Angular Universal logo

        Angular Universal

        165
        163
        1
        165
        163
        + 1
        1
        A technology that renders Angular applications on the server
        Angular Universal logo
        Angular Universal
        VS
        Evergreen logo
        Evergreen