saurshaz / riot-play

Riot and Server side dynamism

#################################################

RIOT-PLAY

#################################################

---

About the project

---

Client Side ES6 has been the standard (app folder) Server side ES6 usage has been kept to minimal (actually i was also thinking whether i shall be doing this in ES5 only) for purposes of this to be useful to someone (in my team) or otherwise :-)

• to get started -- Move the riot-dyna-config folder to one folder above riot-dyna app folder(outside this folder). Edit values in the config files found For more on ideal directory structure read this https://gist.github.com/saurshaz/464fcb960c5469e9b271b7ffe5fbe3c6#file-my_node-md -- chmod +x riotserve.sh to enable script to run webpack based front-end code necessary permissions

-- Do a npm install npm i

• and you shall start the app like

-- start mongo server (if not already running). mongod -- in 1st terminal tab run ./riotserve (to serve frontend content with a auto reload watch) from one directory above the repo directory -- in 2nd terminal tab run npm run server` from the repo directory (to start backend node server)

to start in stage

• NODE_ENV=prod node server/index.js for stage (affects env variables loaded)
• the webpack shall not be needed here, so a bundle shall already be generated and referred to in source code

Completed Apps

• home
  • • home-container -> home.html
  • • appbrowser -> home.html
• app
  • • app-container -> app.html
• dev
  • • dev-container -> dev.html
  • • fylerclient -> dev.html
  • • jsonviewer -> dev.html
  • • appbrowser -> dev.html
• test
  • • test-container -> test.html
  • • appbrowser -> test.html

TODO apps

• riotauth (social auth-client with riot and auth-service)
• riotgrid (crud grid with riot and fyler)
• riotgram (instagram API with riot, search and display images and oneapi)
• riotdit (reddit/hackernews/RSS browser with riot and oneapi)
• riotwer (twitter client with riot and oneapi)
• riotabnb (abnb clone with riot and oneapi)

Jump to http://localhost:6600/home#home for demo home page

Jump to http://localhost:6600/view/hello/testapp/fyler/dev.html?p=pane1&cid=appbrowser&a=b&c=d for testapp page

what it has ?

---

• expressJS based backend
• socket.io based websockets implementation
• mongo store based sesssion management
• bunyan powered server logging
• habitat based config management
• riotJS based view layer
• riot control based flux implementation
• configuration based events handling (uses [])
• on-the-go components building (using folder based routing and isolated tester component)
• webpack based asset packaging
• supports polymer components (utilize the paper components along with riot coolness)
• supports polymer like materialCSS components
• integrate mongo based backend also
• a good neat responsive homepage(build from here)
• riot-router based routing
• /home#testapp?cid=&p=&..... to test any created component in isolation
• linting based on documented code rules/conventions (jshint and sublimelinter)
• server support for nunjucks templates
• ?footer=false&header=falsequerystring params to control header and footer to be appearing
• auth with passport & then jwt token generation (which can be used to manage any REST calls non-dependent on session)

---

How a component logic looks ?

---

	import StoreWatcher from '../event-manager/mixins/storex'

	<comp1>
		<div>
			<p> Hello World </p>
			.... ... 
		</div>
	</comp1>

	 let self = this

     // for validations
     //  - add a validationform
     //  - add a validate function in the handlers['<tag-name>'] section to set result
     //                into state.<store>.<validationform>.validated property
     self.stores = ['user'] // stores to watch
     self.validationform = ['loginform'] // validation form . this will have validated field

     // for store watching
     // import StoreWatcher from ../../event-manager/mixins/storex
     // self.mixin(StoreWatcher)
     self.mixin(StoreWatcher)

---

More

---

project structure can be like (with these special directories and files) (for anything that is non-editable .. use comments for now. in future, we may use a better strategy) (a linter may be built, based on regex to see if saved copy is good or not. best not to let wrong edit happen)

- server
	- core (visible but non-editable to end-users)
	 	- fn1 
	 	- fn2
	 	....
	- thirdparty (visible and partially editable to end-users)
	 	- fn1
	 	- fn2
	 	....
- client
 	- functions
	 	- core (visible but non-editable to end-users)
		 	- fn1
		 	- fn2
	 		....
		- thirdparty (visible and mostly/partially editable to end-users. restrict things that can disturb)
		 	- fn1
		 	- fn2
		 	....
	- components  (visible and totally editable to end-users)
		- a.html
		- b.html
	 	- .....
	- router (visible and partially editable to end-users. based on user's entries app will route)
		- index.js
	- config (visible and editable to end-users. based on user's entries app will initialize)
		- main.js
	- index.html (main file) (visible and partially editable to end-users. based on user's entries app will start)
	- state-manager (visible and partially editable to end-users. based on user's entries app will link to events and data)
		- app-store
		- event_mapping
		- event_constants
Anything else
- ...
- ...

riot-play's Issues

using riot-gear components in riot apps `easily`

make all mutations in handlers happen via `setState` only

Add tests for all initial scenarios (mocha based)

• server dynamic tests - unit (greater.js and hello.js)
• server dynamic tests - integration (greater.js and hello.js)
• client testapp
• client testapp - dynamic loading (2-3 scenarios)
• server sockets test
• server mongo connection

TODO Apps (for bettering the platform)

TODO apps

• riotauth (social auth-client with riot and auth-service)
• - riotgrid (crud grid with riot and fyler)
• - riotgram (instagram API with riot, search and display images and oneapi)
• - riotdit (reddit/hackernews/RSS browser with riot and oneapi)
• - riotwer (twitter client with riot and oneapi)
• - riotabnb (abnb clone with riot and oneapi)

implement SSR

port ves-flow changes to ves-flow after testing

create a mixin for store - state watching and updating views

// todo :: make this move into a mixin which takes in an array of all that is watched and updates self._ as needed (do minimal merging based on data needed) instead of assigning

code from view componentbelow :-

PubSub.subscribe('user_updated', (data) => {
        console.log(' update data >>> ',data)
        self.state = store.init()
        self._ = self.state// todo :: changing entire state, not ideal
        self.update()
      })```

dynamic server and dynamic client functionality with friendly URLs

• server dynamism proved
• client dynamism(dynamic routing to riot components) proved
• Friendly URLs. look below

http://localhost:6600/home?handler=hello&view=login&pid=fylerclient&a=g&b=f&a=i&a=u

can be made to look like

http://localhost:6600/<hello>/<fylerclient>?pid=fylerclient&a=g&b=f&a=i&a=u

setup demo at heroku, make it npm script deployable

Use better scripts in package.json

Example

"betterScripts": {
    "start": {
      "command": "node ./babel.server.js",
      "env": {
        "NODE_PATH": "./src",
        "NODE_ENV": "production",
        "PORT": 8080
      }
    },
    "start-dev": {
      "command": "node ./babel.server.js",
      "env": {
        "NODE_PATH": "./src",
        "NODE_ENV": "development"
      }
    },
    "start-deb": {
      "command": "node --debug ./babel.server.js",
      "env": {
        "NODE_PATH": "./src",
        "NODE_ENV": "development"
      }
    },
    "watch-client": {
      "command": "node webpack/webpack-dev-server.js",
      "env": {
        "UV_THREADPOOL_SIZE": 100,
        "NODE_PATH": "./src"
      }
    }
  },
  "scripts": {
    "start": "node ./node_modules/better-npm-run start",
    "build": "webpack --verbose --colors --display-error-details --config webpack/dev.config.js",
    "build-prod": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js",
    "lint": "eslint -c .eslintrc src",
    "start-dev": "nodemon ./node_modules/better-npm-run start-dev",
    "start-deb": "node ./node_modules/better-npm-run start-deb",
    "watch-client": "node ./node_modules/better-npm-run watch-client",
    "prod": "concurrent --kill-others \"npm run build-prod\" \"npm run start\"",
    "dev": "concurrent --kill-others \"npm run watch-client\" \"npm run start-dev\"",
    "deb": "concurrent --kill-others \"npm run watch-client\" \"npm run start-deb\"",
    "start-0": "webpack  --verbose --colors --display-error-details --config webpack/dev.config.js",
    "start-1": "cp -r webpack/public/** ./public/",
    "start-2": "nodemon babel.server.js ",
    "all": "concurrent --kill-others \"npm run start-0\" \"npm run start-1\"  \"npm run start-2\""
  },

Be able to use a `public` app's component in any other app's components

• public will be a special folder just like other apps.
• components from other components shall be able to go to public (copied)
• components from public shall be cloned to current app and shall be able to be used just like any other internal component

Other possible approach

• link to a freezed public component and refer to it directly (without cloning, just importing it)

Remove all redundant code from `riot-play`

use `baobab` or `immutablejs` for maintaining state

Initial setup

• dynamic server behavior
• dynamic client side routing of components
• using ves-flow
• riot-play demos
• this shall be a riot-playground and component-buulder (using testapp component)
• this shall be able to make API calls via Fyler >> one-api

support ability to mention/watch multiple domains/stores and server middlewares

creating new issue for supporting multiple domains/server middlewares possibly by splitting by . like fyler.user.app and hello.greater

setup circle or travis based ci

More component features

An example/documentation/tutorial for

• building basic fyler communicating component
• data-sharing component abilities
• event-system usage
• routing system usage
• server side middleware system usage

Testing for UI components

building a testing mechanism for the component (like unit testing for the view and logic)

create a config file for each project

• make the config file for each new project
• make use of config values like main container, and link-class at all places instead of hardcoding (rm hardcoding classnames like __trigger and main-section and selector for links etc

a way to configure `validations` in any page field (e.g. form input fields)

Component being able to use auth from `auth-service`

• A view component has no auth of it's own. protected routes to go via auth service which will run on 5000 port
• A container component X shall have attributes secured (true/false), secured-key (any string), and secured-val (any string)
• A child component X could have attributes secured (true/false)
• when routing to that component (if within a container app), auth status is checked on server side and if unsecured, flow is made to auth screen
• auth screen is from auth-service, which redirects user to last state, this time secured-check passes and user moves to last component rendered

Cut a different project for `Fyler` cause and `separate` for library\framework