Giter VIP home page Giter VIP logo

este's Introduction

Este (Blueberry fork)

Techniques

  • Isomorphic pure React with server side rendering on expressjs backend.
  • Stateless vanilla Flux with atomic global immutable app state like Om via immutable.js for super fast rendering and sane state management.
  • Functional design. Class is a leaky abstraction for "business model".
  • ECMAScript 2015+ with the best transpiler babeljs.io. JSX and Flowtype syntax supported. Sourcemaps are enabled by default.
  • Well tuned webpack dev stack with handy notifier.
  • CSS livereload.
  • Hot module reload for React components and Flux actions and stores..
  • Karma as the test runner, mocha as test framework, and Chai as BDD / TDD assertion library.
  • Testing stack configured for TDD - test driven development.
  • Shallow rendering for testing React components without DOM.
  • eslint ES6 linting with React JSX support. (Sublime Text 3 integration)
  • Localization via formatjs.io, stale browsers supported as well.
  • react-router for routing on client and server side.
  • Simple yet powerfull sync/async validation based on famous chriso/validator.js
  • Login and Signup, requireAuth higher order component to protect access to specific pages.
  • LESS, SASS, Stylus, or plain CSS with autoprefixer.
  • Easy undo/redo and load/save for app state.

Prerequisites

Install node.js. Then install gulp.js.

npm install -g gulp

Create App

git clone https://github.com/blueberryapps/este.git este-app
cd este-app
npm install

Start Development

Dev Tasks

  • gulp run app in development mode
  • gulp -p run app in production mode
  • gulp test
  • gulp fontIcons generate font icons from SVGs
  • gulp browserList generate list of supported browsers

CI Tasks

  • npm start just run app, remember to set NODE_ENV=production and others environment variables.
  • npm postinstall just alias for gulp build --production, useful for Heroku.
  • npm test just alias for gulp test

Documentation

So you decided to give a chance to this web stack, but where is documentation? Code is documentation itself as it illustrates various patterns, but for start you should read something about React.js. Then you should learn what is the Flux application architecture. Now refresh you JavaScript knowledge about "new" JavaScript - learn ES6. This stack uses immutable.js and class-less design for a good reason. Check this nice short video, wouldn't be possible with classic OOP classes everywhere approach. Functional programming is a next (current) big thing, read why. Express.js is used on the Node.js based server. Application is isomorphic, so we can share code between client and server easily. Congrats, now you're Este.js expert level 1 :-)

Links

Tips and Tricks

  • To check app state, press ctrl+shift+s, and then open console.
  • To check app render time, open console, and write este.measureRender = true.
  • With global app state, we don't need IoC container so badly - SOLID: the next step is Functional. Still DI is relevant for some cases and then use Pure DI.
  • Use const by default, let if you have to rebind a variable.
  • Learn and use immutable Seq. Very handy for native arrays and objects. For example, get object values: Seq(RoomType).toSet().toJS()
  • Even though we can use import {canUseDOM} from 'react/lib/ExecutionEnvironment' to detect browser/server, don't do it since it's runtime value. Use webpack DefinePlugin to set process.env.IS_BROWSER rather, because compilation removes dead code.
  • How to use Closure Tools, gist
  • Recommended editor is sublimetext, or atom.io (tips).

este's People

Contributors

steida avatar grabbou avatar tajo avatar zigomir avatar ironer avatar solcik avatar mikker avatar nuragic avatar dmnd avatar fabriciocolombo avatar simi avatar xeed avatar nsfmc avatar mareksuscak avatar markdalgleish avatar mczolko avatar pstanisl avatar 0xr avatar shanselman avatar gitter-badger avatar vojtechbartos avatar vasek avatar imshara avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.