#Full JavaScript stack application demo #####[Express.js, React, Falcor, ES6, Webpack, CSS Modules, PostCSS]

##How to run it

npm install
npm run watch

##What is it (notes on the app, stack and learning stuff)

Me playing with technologies and concepts... Most of the code will be documented (at least I'll try) since sole purpose is education - I wanted to research and create know-how based on non trivial example of movie search application.

This stack does not have any database solution since none is needed for this kind of apps (API consumption kind), except for personal data management or configuration, which is (for now) not covered in this app demo.

Server is built in Express and will utilize open movie db API and maybe more similar APIs. Most of core stuff are written in ES6.

Client side structure is based around components with every component having it's js, html and css bundled together. This is achieved through usage of css modules.

###Research conclusions

####React React allows us access to full range of cutting edge web UI concepts plus it allows us different conceptual approach to separation of concerns (full separation of concerns vs separation of technologies which is only real separation present in most other approaches).

It also allows us to render components on server side, giving us space to accomodate for any specification.

####Falcor Really useful and highly versatile library that can fully change and even improve a way you handle data in your app, especially when you are working in microservices (like) architecture with several services providing data.

Apart from being data fetching library it includes special approaches that are allowing us to threat all the data as if it is available offline.

####CSS Modules Great way to approach React based view architecture - when you build component you can have your js logic in js file, your html structure in jsx file and your css in css file all connected inside js file. Every component in separate folder etc... For performance and better SEO, I also solved server side rendering... This part is little crude and webpack config needs to be dried, but everything performs really good.

####Routing

Route I took with routing (:laughing:) is rather established know-how approach then new stuff approach. I picked backbone router for client side and will implement server side routing with fully reusable (isomorphic) code in expressjs router...

I am considering doing same router on both sides ( probably flatiron director ), but at this point this can be considered production ready paradygm.

I went away from react-router that is going towards being goto solution for this because of syntax which is opposite of what I want to use and also I already had knowledge of solution with same versatility (even bigger since it accepts json which can be used to configure backend routers).

###Stack

Stuff that I am piling up inside this playground

####Frameworks, libraries and stuff

• React
• Falcor
• Backbone.js router
• Express.js
• JADE templating engine (for now - it is plan to remove it and do everything in jsx)

####Build, transpile, compile, compress

• Webpack
• Babel

###Useful links

ReactJS

React dev tools

Falcor

Webpack

Express

Backbone

Atom react plugin

Sublime Text ES6/Babel/react plugin

Expressjs compression middleware

Webpack dev middleware

####Usefull read/watch - lots of solutions/inspirations for solutions in this repo come from here:

Structuring React project

React - Complementary Tools

Developing With Webpack

Netflix JS talks - Falcor

CSS Modules

CSS Modules 2

Backend Apps With Webpack

Netflix JavaScript Talks - Async JavaScript with Reactive Extensions

####StackOverflow etc

React server side render Babel 6x