- 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.
Install node.js. Then install gulp.js.
npm install -g gulp
git clone https://github.com/blueberryapps/este.git este-app
cd este-app
npm install
- run
gulp
- point your browser to localhost:8000
gulp
run app in development modegulp -p
run app in production modegulp test
gulp fontIcons
generate font icons from SVGsgulp browserList
generate list of supported browsers
npm start
just run app, remember to set NODE_ENV=production and others environment variables.npm postinstall
just alias forgulp build --production
, useful for Heroku.npm test
just alias forgulp test
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 :-)
- wiki: Recommended React Components
- wiki: Recommended Sublime Text 3 Packages
- twitter.com/estejs
- github.com/enaqx/awesome-react
- 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 setprocess.env.IS_BROWSER
rather, because compilation removes dead code. - How to use Closure Tools, gist
- Recommended editor is sublimetext, or atom.io (tips).