Data fetching can't be implemented within single component which already renders something due to limitations of React hooks. The seemingly standard approach today is to extract data fetching into parent component.

It's very tedious to wrap every component with data-source component manually, but with some toolkit it may be quite easy.

Here is two libraries I found:

https://github.com/ericclemmons/react-resolver
https://github.com/andreypopp/react-async

Second is not yet realeased but I will track it's progress.

This issue is related to the pathes, look at this commit:
df8f558

After I change path
Gulp.watch("./frontend/images/**/*", ["dist-images"]);
to
Gulp.watch("frontend/images/**/*", ["dist-images"]);

it started working fine, for all cases.

I also added clear task for images, otherwise public/images will contain a lot of unuseful files after some time.

When alerts number is 2+ they "jump" at fade.

1. Go to the robots list: http://react-starter.paqmind.com/robots/
2. Click on detail: u will see loading and nothing more
3. Sometimes it's working, so in this case click on edit button on this page and again u will see only loading element

Something is wrong with the last version. Check pagination freezes.
Need to discover the cause of this.

For newer branch. Check this later

• Create / Add
• Retrieve / Detail
• Update / Edit
• Delete / Remove

We use names that are on the right side.
Create should be called Add (because it's more neutral).
Delete – Remove and so on...

I was wrong. It's just awesome. I'm going to rewrite everything on it.

It's time to get it

You said you added this, but I don't see bower.json. How you did install vendors? Manually?

Will require 1-2 additional $ npm run browserify / watchify terminal windows (may use bash script or another npm command to replace those with single dev command?!).
Should simplify gulpfile.js. Should fasten build process.
May resolve problem with missing file changes (which are still occur).

Red color, etc.
See forms in add / edit components.

http://tympanus.net/Development/PageLoadingEffects/
http://tympanus.net/Development/CreativeLoadingEffects/

As TypeScript is fundamentally incompatible with ES6 and Babel does not support it – it's not suitable for us. I'm going to check Flow. There will be a problems with IDEs, but let's try.

i clone this repo with "git clone " , when i open gulp file.js , there is

// DEFAULTS ========================================================================================
let exitOnError = false;
process.env.NODE_CONFIG_DIR = process.env.NODE_CONFIG_DIR || "./shared/config";

// IMPORTS =========================================================================================
let ChildProcess = require("child_process");
let Config = require("config");
let Gulp = require("gulp");
let gulpUtil = require("gulp-util");
let runSequence = require("run-sequence");
let jshintStylish = require("jshint-stylish");
let gulpJshint = require("gulp-jshint");
let gulpCached = require("gulp-cached");
let gulpSourcemaps = require("gulp-sourcemaps");
let gulpLess = require("gulp-less");
let gulpConcat = require("gulp-concat");
let gulpRename = require("gulp-rename");
var gulpUglify = require("gulp-uglify");
let gulp6to5 = require("gulp-6to5");
let gulpPlumber = require("gulp-plumber");
let vinylSource = require("vinyl-source-stream");
let vinylBuffer = require("vinyl-buffer");

why ??

and, i find all js missing "var " but " let " there .

I'm getting tired of Reflux. They seems to be really lost in what they do. Actions are flawed.

Candidates to watch and replace:
Flummox
Minimal Flux
Rx-Flux
ThunderCats (remix of the prev one)

Both are better then Reflux. I like API of the second one more, but it doesn't support async actions at this moment. It's better to wait a bit and see what will happen next.

Subj.

Look for TODO in http-errors.css
Update / improve template as good as we can.

• Basic
• Filters
• Sorts
• Pagination
• Animation (keep scroll position)
• Perpage switcher

Should allow backend-only, frontend-only and any combination of them.
Check https://github.com/Paqmind/react-starter/tree/0.13 for sketches of everything of this

Refer to my issues for Joi...

Markdown test

I tryed Roboto for main font and it looks not very good: difficult to read.
That is why I left Open Sans.

But I use Roboto Slab for headers and Roboto Condensed for logo. Check it out:
http://puu.sh/fWyc3.png

I also updated colors on site. What do you think?
http://puu.sh/fWycZ.png

https://docs.google.com/file/d/0B9bW0B92XgnANjRNQkVkNUtjdHM/edit?usp=drivesdk
I think it's our fault (irregarding of #14)

http://kyleamathews.github.io/react-headroom/

We need to add:

• hosting info (in content?)
• link to github (in footer?)

Buttons are now separated by  . I don't like it.

OMG. See http-errors.less. I'm working on it.

This one but inversed:
http://subtlepatterns.com/small-steps/

...

Extremely annoying behavior described at remix-run/react-router#1079

Need to trace the cause first.

Buttons are under avatar. Should be under fields.

I thought it will contain outer libs like bootstrap and jquery.
But it doesn't.

It contains this:

"frontendVendors": [
    "axios",
    "babel/polyfill",
    "baobab",
    "classnames",
    "node-uuid",
    "util-inspect",
    "immutable",
    "joi",
    "lodash.sortby",
    "lodash.isobject",
    "lodash.isplainobject",
    "lodash.isarray",
    "lodash.isempty",
    "lodash.debounce",
    "lodash.throttle",
    "lodash.result",
    "lodash.merge",
    "lodash.flatten",
    "react",
    "react/addons",
    "react/lib/ReactLink",
    "react-router",
    "react-document-title"
  ],

I don't understand why?

Shouldn't app.js contain react, lodash etc? Is't not duplication?
And current vendors.js is 5M!

Especially on mobile.

Alternatives to current loading icon:
http://fortawesome.github.io/Font-Awesome/icon/spinner/
http://fortawesome.github.io/Font-Awesome/icon/refresh/

Error icons:
http://fortawesome.github.io/Font-Awesome/icon/exclamation-triangle/
http://fortawesome.github.io/Font-Awesome/icon/times-circle-o/

Extract URL-bound vs URL-unbound specifics from simple component to model components.

Try to call not exist robot, in detail view you will see model: undefined
in edit – model: Object{}

Can we have one format?

JS bites without static typechecking. Really hope that Flow will help.

We don't want to use 2 validation libraries. Both Joi and Hapi frustrate me a lot.
Usage of Joi on frontend is painful: very big, not frontend-friendly. Official answer is "It was not designed for frontend", but I personally don't see why validation should be backend-only. It's one of the few truly environment-agnostic things. Joi for backend is kinda ok, but still: no changelogs, esoteric error formats, arrogant devs... Time to find something better. Will obsolete #13

Shows only <TopLevel>. Discover why and when that happened.

Hooks should

1. Update node_modules
2. Update bower components

Create interface component to load Twitter Frame in timeline

Three basic ways to do this:

1. Load twitter in new page (with reloading or in new tab).
2. Open twitter frame above or below the timeline.
3. Load it in popup.

First way is the simplest but with no usability – we are losing timeline data at least.
Second way is straightforward too, but with good animation between timeline and twitter it can be the solution.
Third way is iffy. From one this term popup has huge negative content, from other side looking on big web applications we can see it's still alive.

Devices support

It's better to get the answer on this question at the beginning. I suppose twitto should work on all modern browsers and modern devices: desktop, laptop, phones.
Key word is "modern" here. Old devices with old browser could not support all javascript that will be necessary for this web app.

Exploring twitter

Can we have one solution for all devices? (ok, for all "modern" devices).
Let's look at the twitter. They have desktop version, and versions for iOS and Android as well.
They also have http://mobile.twitter.com that is work differently on different devices: it looks pretty modern on iPad4, but old on old samsung with android.

Desktop and mobile applications are almost free in their choices.
Mobile version on iPad use ajax, animation etc.
Mobile version on old devices is very limited: any action requires page reloading.

So the answer is – if you want to have "all" devices support, you'll better to start gathering developers from different platforms.

I suppose we are going to create web application in browser. Let's call it "site", to be simple.

Choosing terms: popup, modal, dialog ...

There is a lot of confusions in this terms, because libs and frameworks use their differently.

Bootstrap has modal:
http://getbootstrap.com/javascript/#modals

It often contains header, content and footer, and fills part of the screen with current page content fading.

Google calls it dialog:
https://www.google.com/design/spec/components/dialogs.html

Dialogs inform users about critical information, require users to make decisions, or encapsulate multiple tasks within a discrete process. Use dialogs sparingly because they are interruptive in nature—their sudden appearance forces users to stop their current task and refocus on the dialog content.

Use fullscreen mode or not, it depends from how much information contains the dialog component.

jQuery Mobile has dialog and page elements:
http://demos.jquerymobile.com/1.4.5/transitions/

Dialog is more like confirmation with minimum information in content, similar to modal in bootstrap. Page is similar to fullscreen mode dialog in google guidelines.

I prefer to use jQuery terms.

About transitions

So back to our twitter frame component and third way: Load it in popup.
Because we are going to use Bootstrap framework we can use modal component.
It's simple, quick solution and it has good support:
http://getbootstrap.com/getting-started/#support

But what alternatives do we have?

jQuery Mobile
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

I love this demo:
http://demos.jquerymobile.com/1.4.5/transitions/

To have ability to chose between dialogs and pages and different animation would be great benefit for the project. And they have awesome devices support:
http://jquerymobile.com/gbs/1.4/

But when we will look closer, we will see they still have issues with transitions on some devices.
So if they have, any other will have it.

Can we close the eyes on it? Maybe we could, but developers do not recommend to use Bootstrap and jQuery Mobile together 😕 :
http://stackoverflow.com/questions/18636919/can-i-use-bootstrap-3-together-with-jquery-mobile

But maybe we can take only this transition.js from JQM?
Did you work with jQuery UI before? It's f**king mess from js and css classes. So leave this idea.

Looking on jQuery Mobile alternatives like http://www.sencha.com/, http://goratchet.com/, http://app-framework-software.intel.com/, you will see - they are frameworks for mobile application only.

Effeckt.css
https://github.com/h5bp/Effeckt.css

This lib has 9000 stars on github and it says:
Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

Yes, let's stick with pure css! I believe in it.

But why demo doesn't work on my mobile devices?
http://h5bp.github.io/Effeckt.css/

Both Chrome and Safari are stucking by trying page load effect. I updated OS version – didn't help.
In Samsung with Android this page even did not load properly.

Codrops
Article from 2013:
http://tympanus.net/Development/PageTransitions/

Looks cool on iPad, doesn't work on Samsung Android, works on Mac Chrome, IE supports only from version 10. WTF?

Summary

I strongly recommend to stick with the bootstrap's modal and do not f**k the brain.
It will not support in old browsers, but we decided we will not support it.

Later I will try to add page effect as in JQM with simplest animation (fade, slide, etc)

ESLINT