Skip to content
forked from este/este

Robust and comfortable dev stack for isomorphic web apps

License

Notifications You must be signed in to change notification settings

markdalgleish/este

 
 

Repository files navigation

Este.js

Circle CI Join the chat at https://gitter.im/steida/este Dependency Status devDependency Status Deploy

Robust and comfortable dev stack for isomorphic web apps. Forget about evil frameworks, learn laser focused libraries and patterns instead.

Techniques

  • ES6 and other future JavaScripts dialects with the best transpiler babeljs.io. JSX and Flowtype syntax supported as well. Sourcemaps enabled by default.
  • Server side rendering.
  • Mobile first, offline first, frontend first.
  • Localization with formatjs.io, stale browsers supported as well.
  • React with Flux with immutable global app state.
  • Isomorphic architecture with stateless actions and stores.
  • Vanilla Flux, we don't need over abstracted frameworks.
  • Webpack css livereaload with hot module reload even for React components.
  • Easy undo/redo and app state load/save.
  • Super fast rendering with immutable.js.
  • Well tuned webpack devstack with handy notifier.
  • Stylesheets in CSS, LESS, SASS or Stylus.
  • Optimized for critical rendering path.
  • Google Analytics.

Prerequisites

Install iojs or node.js. Then install gulp.js.

npm install -g gulp

Create App

git clone https://github.com/steida/este.git myapp
cd myapp
npm install

Start Development

  • run gulp
  • point your browser to localhost:8000
  • build something beautiful

Dev Tasks

  • gulp run app in development mode
  • gulp -p run app in production mode
  • gulp test

CI Tasks

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

Examples

Documentation

tl;dr - open este.herokuapp.com/todos

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 for a good reason. Check this nice short [video](https://www.youtube.com/watch?v=5yHFTN-_mOo Ok, Server side you.http://expressjs.com/), to see one of many great advantages of functional programming. 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

Todo

Tips and Tricks and Lips and Tits

  • With global immutable app state, you 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 only for CONSTANTS or immutable structures.
  • Use () => lambda expression for all predicates and anonymous functions.
  • Always use React propTypes for props passed to component, and if props are immutables or primitives, use PureRenderMixin. Simple rule for ultimate performance.
  • Never mock browser inside server code, it can confuse isomorphic libraries.
  • Always use settostring helper for actions.
  • Even though we can use import {canUseDOM} from 'react/lib/ExecutionEnvironment' to detect browser/server, don't use it since it's runtime value. Use webpack DefinePlugin to set process.env.IS_BROWSER rather, because compilation removes dead code then.
  • aeflash.com/2015-02/react-tips-and-best-practices.html
  • You can still use Closure Tools, gist

Notes

  • Este.js dev stack should work on OSX, Linux, and even Windows. Feel free to report any issue.
  • As a rule of thumb, Este.js supports all evergreen browsers plus last two pieces of IE. In theory, It should not be hard to support IE8 as hell.

Credit

Este.js

made by twitter.com/steida

About

Robust and comfortable dev stack for isomorphic web apps

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 93.7%
  • CSS 6.3%