Name: innovation-day-isomorphic-este
Owner: Xebia BV
Description: null
Created: 2015-04-17 07:42:11.0
Updated: 2015-07-23 13:02:43.0
Pushed: 2015-07-22 08:44:23.0
Homepage:
null
Size: 796
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Email | Most Recent Commit | # Commits |
|---|
README
Robust and comfortable dev stack for isomorphic web apps. Forget about evil frameworks, learn laser focused libraries and patterns instead.
Forget about PHP, Ruby, Angular, Backbone, whatever client/server only solution. Also, you don't need another me-too-flux library, vanilla Flux is enough. This dev stack is web dev panacea, at least for me :-)
Techniques
- ES6 and other future JavaScripts dialects with the best transpiler babeljs.io. JSX and Flowtype syntax supported as well. Sourcemaps enabled by default.
- jest unit testing.
- eslint ES6 linting with React JSX support. (Sublime Text 3 integration)
- Isomorphic architecture with stateless actions and stores.
- Server side rendering.
- Localization with formatjs.io, stale browsers supported as well.
- React with Flux with immutable global app state like Om or Omniscient.
- Mobile first, offline first, frontend first.
- Vanilla Flux, we don't need over abstracted frameworks.
- Webpack css livereload 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.
- ftlabs/fastclick for fast click on touch devices
- LESS, SASS, Stylus, or plain CSS with autoprefixer.
- Optimized for critical rendering path.
- Google Analytics preconfigured.
- react-router for routing on client and server side.
- Simple yet powerfull sync/async validation based on famous chriso/validator.js
- Authentication form and reusable
auth higher order component to protect access to specific components.
Prerequisites
Install iojs or node.js.
Then install gulp.js.
install -g gulp
Windows
- Install Python - Install version 2.7 of Python and add it to your path or/and create a PYTHONPATH environment variable.
- Install Visual Studio (Express Edition is fine) - We will need this for some of modules that are compiled when we are installing Este. Download VS Express, get one of the versions that has C++ - Express 2013 for Windows Desktop for example.
- Set Visual Studio Version Flags - We need to tell node-gyp (something that is used for compiling addons) what version of Visual Studio we want to compile with. You can do this either through an environment variable GYP_MSVS_VERSION. If you are using Express, you have to say GYP_MSVS_VERSION=2013e.
Thanks to Ryanlanciaux
Create App
clone https://github.com/steida/este.git myapp
yapp
install
Start Development
- run
gulp
- point your browser to localhost:8000
- build something beautiful
Dev Tasks
gulp run app in development modegulp -p run app in production modegulp test
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
Examples
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 for a good reason. Check this nice short video, 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
Tips and Tricks and Lips and Tits
- Whole app state is stored in one immutable app state object. To get snapshot, press
shift+ctrl+s, then open dev consolea and type _appState.
- There are still use cases where component state is useful. We can use it for small togglers or alerts, which should disappear when component is remounted.
- 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.
- Use
() => lambda expression for all predicates and anonymous functions.
- Learn and use immutable Seq. Very handy for native arrays and objects. Get object values:
Seq(RoomType).toSet().toJS()
- If React props are immutable or primitive, subclass from PureComponent. 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
- Recommended editor is atom.io (tips) or sublimetext.
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
made by Daniel Steigerwald, twitter.com/steida
