Shopping list

How to run it

1. Clone the repo

2. npm install (if fails try more times)

3. install postgre

4. initialize postgre

   create user skill with password skill (optionaly change config in src/server/config.js:dbConnectionString: your_connection_string)

   create db todo_list

   create table for items with CREATE TABLE items(db_id serial primary key, id UUID NOT NULL, todo_id UUID NOT NULL, text text, checked boolean);

   create table for order with CREATE TABLE items_order(db_id serial primary key, todo_id UUID NOT NULL, order UUID ARRAY);

5. run with gulp

most of custom code is in src/cliet/chat

after start of application click to 3. link Open new todo list in new tab this will create new todo list. Copy url to different tab. Write to last input box and see it synchronized. Open psql -U skill and run query SELECT * from items; to see that it's saved in db. Check server side rendering(open todo list in tab with disabled javascript and see that it has been loaded with item).

Currently is supported only items created when todo list is inicialized so no new items. Howewer if you want to have more than 1 item modify src/server/handlers/newTodoList.js and create in inicialization more items.

Maty

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.
• 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.

npm install -g gulp

Windows users, please read ryanlanciaux.github.io/blog/2014/08/02/using-jest-for-testing-react-components-on-windows/. sass-loader needs something similar, so please fix it for yourself, or remove sass-loader from package.json and makeconfig.js, or give it up and use developer more friendly OS like Linux or Mac. I just tried to install Python 2.7 on Windows but installation has failed for no reason. Typical Windows, so happy I quit.

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 environment variables.
• npm postinstall just alias for gulp build --production, useful for Heroku.
• npm test just alias for gulp test

Examples

• Este TodoMVC

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](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

• wiki/Recommended-React-Components
• twitter.com/estejs
• github.com/enaqx/awesome-react

Tips and Tricks and Lips and Tits

• App state snapshot: Press shift+ctrl+s, then open dev console and type _appState.
• 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 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
• Why React this.state isn't used? Because whole app state belongs to app one global immutable app state. So we can log it easily, user can navigate out page with half fulfilled form without losing its state, and more.
• 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