React for Intermediate #3

1. ReactJS for Intermediate #3
Oswald Campesato
Consultant/Training:
www.iquarkt.com
ocampesato@yahoo.com

2. List of React Code Samples
• 1) react-heat (generates React apps)
• 2) NodeJS + ReactJS (react-hello-world)
• 3) ReactJS + D3 (d3act-master)
• 4) GraphQL (graphql-demo-server)
• 5) GraphQL+Angular 2 (angular2-graphql)
• 6) GraphQL+Express/MongoDB (express-graphql)
• 7) GraphQL+SQLite (graphql-nodejs-newsfeed-master)
• 8) Flux (flux-master)
• 9) Redux+Angular 2 (ngrx-rest-app-master)
• 10) Redux+Angular 2 (angular2-redux-example-master)
• NB: read my-notes.sh and inst2.sh regarding #10

3. react-heat for ReactJS Apps
• #1: [sudo] npm install react-heat –g
• #2: download zip file: https://github.com/insin/react-heatpack
• #3: npm install
• #4: Contents of index.js:
• import React from 'react’
• export default React.createClass({
• render() {
• return <div>Hello world from react-heat!</div>
• }
• })
• Step #4: heatpack index.js
• Step #5: http://localhost:3000
=> more information: https://github.com/insin/react-heatpack

4. Node/ReactJS Example
• 1) cd react-hello-world
• 2) npm install
• 3) cd src/client
• 4) open index.html

5. Node/ReactJS/D3.js Example
• 1) cd d3act-master
• 2) npm install
• 3) npm run examples
• 4) localhost:8080

6. GraphQL: What is it?
• a schema for graph-oriented data (Facebook/2012)
• well-suited for micro-service style backends
• created for specifying finer-grained queries
• provides interface between client and server
• client requests data from GraphQL server
• data requests are based on GraphQL queries
• => write queries against the schema

7. GraphQL: What it isn’t
• GQL does not dictate a server language
• GQL does not dictate a storage/back-end
• GQL is a query language without a database

8. GraphQL: What Does it Do?
• It exposes a single endpoint
• the endpoint parses and executes a query
• The query executes over a type system
• the type system is defined in the application server
• the type system is available via introspection (a GQL API)

9. GraphQL Server Structure
GraphQL servers have three components:
• 1) GraphQL “core” (JavaScript and other languages)
• 2) Type Definitions (maps app code to internal system)
• 3) Application code (business logic)

10. GraphQL Core: Five Components
• 1) Frontend lexer/parser: an AST [Relay uses parser]
• 2) Type System: GraphQLObjectType (a class)
• 3) Introspection: for querying types
• 4) Validation: is a query valid in the app’s schema?
• 5) Execution: manage query execution (via the AST)

11. The GraphiQL IDE
• https://github.com/skevy/graphiql-
app/blob/master/README.md
• https://github.com/skevy/graphiql-app/releases
• OSX: brew cask install graphiql

12. GraphQL Queries (Interfaces)
• interface Employee {
• id: String!
• fname: String
• lname: String
• }
•
• type Query {
• emp: Employee
• }

13. GraphQL Queries
• Query:
• {
• emp {
• fname
• }
• }
• Result:
• {
• "data": [{
• "emp": {
• "fname": "John"
• }
• }]
• }

14. GraphQL Queries
• query EmpNameQuery {
• emp {
• fname
• lname
• }
• }
• The result of the preceding query is here:
• {
• "data": [{
• "emp": {
• "fname": "John",
• "lname": "Smith"
• }
• }]
• }

15. From REST to GraphQL (1)
• First REST query:
• GET /item/10000
• Result of first REST query:
• {
• item: {
• message: “Learning about graphql”,
• timestamp: 1456781234,
• ownerid: 23000
• }

16. From REST to GraphQL (2)
• Second REST query:
• GET /owner/23000
• Result of second REST query:
• {
• owner: {
• id: 8000,
• name: “John Smith”,
• homepage: {
• url: http://acme.com/jsmith
• }
• }

17. From REST to GraphQL (3)
• Execute ONE GraphQL query:
• {
• item (id: 10000) {
• message, timestamp,
• owner { // NB: owner is an object
• id, name,
• homepage {
• url
• }
• }
• }

18. Useful GraphQL Links
• facebook.github.io/graphql
• github.com/graphql/graphql-js

19. GraphQL Example (Overview)
• 1) cd graphql-demo-server
• 2) install dependencies: npm install
• 3) create a GraphQL/Node app server: index.js
• 4) launch the GraphQL/Node app:
• node index.js
• 5) create the ReactJS client:
• GraphQLClient.html
• 6) launch the ReactJS client:
• open GraphQLClient.html

20. GraphQL Node App (package.json)
• {
• "name": "graphql-demo",
• "version": "1.0.0",
• "description": "",
• "main": "index.js",
• "keywords": [],
• "author": "",
• "license": "ISC",
• "dependencies": {
• "express": "^4.13.4",
• "express-graphql": "^0.4.10",
• "graphql": "^0.4.18"
• }
• }

21. GraphQL Node App (index.js)
• var graphql = require('graphql');
• var graphqlHTTP = require('express-graphql');
• var express = require('express');
• var data = require('./data2.json');
• // Define a user type with three string fields
• var UserType = new graphql.GraphQLObjectType({
• name: 'User',
• fields: function() {
• return {
• id: { type: graphql.GraphQLString },
• fname: { type: graphql.GraphQLString },
• lname: { type: graphql.GraphQLString }
• }
• }
• });

22. GraphQL Node App (index.js)
• var schema = new graphql.GraphQLSchema({
• query: new graphql.GraphQLObjectType({
• name: 'Query',
• fields: {
• user: {
• type: UserType,
• args: {
• id: { type: graphql.GraphQLString },
• fname: { type: graphql.GraphQLString },
• lname: { type: graphql.GraphQLString }
• },
• resolve: function (_, args) {
• return data[args.id];
• }
• }
• }
• })
• });

23. GraphQL Node App (data.json)
• {
• "100": {
• "id": "100",
• "fname": "Dan",
• "lname": "Smith"
• },
• "200": {
• "id": "200",
• "fname": "Lee",
• "lname": "Jones"
• },
• "300": {
• "id": "300",
• "fname": "Nick",
• "lname": "Stone"
• }
• }

24. ReactJS Client Code (1)
• <script type="text/babel">
• class UserInfo extends React.Component {
• constructor() {
• super();
• }
• componentWillMount() {
• this.state = { loading: true, error: null, data: null};
• }
• componentDidMount() {
• this.props.promise.then(
• value => this.setState({loading: false, data: value}),
• error => this.setState({loading: false, error: error}));
• }

25. ReactJS Client Code (2)
• render() { // this method is part of the UserInfo class
• if (this.state.loading) {
• return <span>Loading...</span>;
• }
• else if (this.state.error !== null) {
• return <span>Error: {this.state.error.message}</span>;
• }
• else {
• let queryArray = [this.state.data];
• let queryInfo = queryArray.map( (row,index) => {
• return <li key={index}>ID: {row.data.user.id} First Name: {row.data.user.fname} Last
Name: {row.data.user.lname}</li>
• })
• return (
• <div> <ul>{queryInfo}</ul> </div>
• )
• }
• }
}

26. ReactJS Client Code (3)
• let userDetails = "{user(id:%22200%22){fname,lname,id}}";
• let userQuery =
"http://localhost:3000/graphql?query="+userDetails;
• ReactDOM.render( // pass user data to UserInfo
• <UserInfo
• promise={$.getJSON(userQuery)} />,
• document.getElementById("userinfo")
• );
• </script>

27. Starting the Server and Client
• Step #1 (install the dependencies):
• npm install
• Step #2 (start the GraphQL server) in 1st command shell:
node index.js
• Step #3 (launch the ReactJS client) in 2nd command shell:
open ReactClientGraphQL.html

28. Second GraphQL Example
• combines Express, MongoDB and Mongoose
• uses express-graphql
• cd graphql-nodejs-master
• npm install
• npm start
• navigate to localhost:8000

29. Third Example: GraphQL and SQLite
• cd graphql-nodejs-newsfeed-master/
• npm install
• npm start
• sample query:
curl --data "query={ __schema { types { name } } }" localhost:8000

30. “Instant” GraphQL Server for ReactJS
• https://www.reindex.io
• Create your schema with your types
• Deploy GraphQL API with this command:
reindex schema-push
• Documentation/examples:
https://www.reindex.io/docs/

31. Falcor: An Alternative to GraphQL?
• Falcor Home Page: http://netflix.github.io/falcor/
• Falcor does not involve a schema
• Single data model (virtual JSON graph)
• JavaScript-like path syntax
• https://github.com/Netflix/falcor

32. The Flux Pattern
• developed by Facebook (2012?)
• a unidirectional data flow (not MVC)
• complements React's view components
• technology agnostic
• Flux implementations work with Angular 2
• implementations: Redux, Fluxxor, et al

33. Flux-based Applications
• apps comprise three major parts:
• the dispatcher
• the stores
• the views (React components)
• Components and their flow:
• Action->Dispatcher->Store(s)->View->Action
• Action = Event Type (=verb) + Payload (=data)

34. A Flux Implementation
• cd flux-master
• npm install
• npm start
• In a second command shell:
• cd flux-master/examples/flux-chat
• npm install
• open index.html

35. What is Redux?
• One implementation of Flux
• Created by Dan Abramov
• Most popular implementation of Flux
• https://github.com/reactjs/redux
• egghead.io tutorials

36. A Redux App with Angular 2 (#10)
• 1) cd ngrx-rest-app-master
• 2) npm install
• 3) [sudo] npm install jspm –g
• 4) jspm install
• 5) [sudo] npm install live-server
• 6) live-server

37. A Redux App with ngrx/Angular 2 (#9)
• 1) cd ngrx-rest-app-master
• 2) npm install
• 3) npm start
• 4) http://localhost:3001

38. A Redux App with ngrx/Angular 2 (#9)
• 1) client/src/app.ts:
constructor(private itemsService: ItemsService,
private store: Store<AppStore>) {
this.items = itemsService.items;
this.selectedItem = store.select('selectedItem');
this.selectedItem.subscribe(v => console.log(v));
itemsService.loadItems();
}

39. A Redux App with ngrx/Angular 2 (#9)
• 1) client/src/app.ts:
<items-list [items]="items | async"
(selected)="selectItem($event)"
(deleted)="deleteItem($event)">
</items-list>
• deleteItem(item: Item) {
• this.itemsService.deleteItem(item);
• . . .
• }

40. A Redux App with ngrx/Angular 2 (#9)
• 1) client/src/items.ts:
• export interface Item {
• id: number;
• name: string;
• description: string;
• };
•
• export interface AppStore {
• items: Item[];
• selectedItem: Item;
• };

41. A Redux App with ngrx/Angular 2 (#9)
• 1) client/src/items.ts:
deleteItem(item: Item) {
this.http.delete(`${BASE_URL}${item.id}`)
.subscribe(action => this.store.dispatch(
{ type: 'DELETE_ITEM', payload: item }));
}

42. A Redux App with ngrx/Angular 2 (#9)
• 1) client/src/items.ts:
• export interface Item {
• id: number;
• name: string;
• description: string;
• };
•
• export interface AppStore {
• items: Item[];
• selectedItem: Item;
• };

43. A Redux App with ngrx/Angular 2 (#9)
• 1) client/src/items.ts:
• export const items = (state: any = [],
• {type, payload}) => {
• let index: number;
• switch (type) {
• case 'ADD_ITEMS':
• return payload;
• case 'CREATE_ITEM':
• return [...state, payload];
• case 'UPDATE_ITEM':
• return state.map(item => {
• return item.id === payload.id ?
• Object.assign({}, item, payload) : item;
• });

44. A Redux App with ngrx/Angular 2 (#9)
• 1) client/src/items.ts:
• switch (type) {
• . . .
• case 'DELETE_ITEM':
• return state.filter(item => {
• return item.id !== payload.id;
• });
• default:
• return state;
• }
• };

45. ReactFire versus Redux+Firebase
• ReactFire: a mechanism for communicating
between a React application and Firebase
• ReactFire “bypasses” Redux
• Combine React with Redux and Firebase:
• + insert a Firebase Ref into an action creator
• + when Firebase emits data, create an action
• + the action is sent to the dispatcher (reducer)

46. Other Flux Implementations
• Alt, flummox, fluxury, mcfly, reflux, etc
• At least 16 implementations
• Note: Relay is also a Flux implementation
• Comparison of Flux implementations:
https://github.com/voronianski/flux-comparison
=> Github links are available as well

47. What is Relay?
• a JavaScript Framework (Facebook)
• for creating data-driven React apps
• declarative syntax
• works with GraphQL
• creates efficient network requests
• fetches only what is requested
• aggregates queries
• caches data on client

48. Sample Relay Query
• query UserQuery {
• user(id: "123") {
• name,
• },
• }

49. Sample Relay Fragment
• fragment UserProfilePhoto on User {
• profilePhoto(size: $size) {
• uri,
• },
• }

50. Sample Relay Query+Fragment
• query UserQuery {
• user(id: "123") {
• ...UserProfilePhoto,
• },
• }

51. Sample Relay Query+Edges
• query UserQuery {
• user(id: "123") {
• friends(first: 10) {
• edges {
• node {
• ...UserProfilePhoto,
• },
• },
• },
• },
• }

52. Miscellaneous Topics (1)
• Combining TypeScript with ReactJS:
https://github.com/ServiceStackApps/typescript-redux
• Very good article regarding webpack:
https://medium.com/@rajaraodv/webpack-the-confusing-
parts-58712f8fcad9
React Hot Module / HMR (Hot Module Reloading):
https://github.com/gaearon/react-hot-loader/pull/240

53. Miscellaneous Topics (2)
• Time travel debugging:
https://code-cartoons.com/hot-reloading-and-time-travel-
debugging-what-are-they-3c8ed2812f35#.fqf5b9uwd
GraphQL and PostgreSQL:
https://github.com/calebmer/postgraphql
#1: sudo npm install -g postgraphql
#2: postgraphql postgres://localhost:5432/mydb --schema
forum --development

54. Recent/Upcoming Books and Training
1) HTML5 Canvas and CSS3 Graphics (2013)
2) jQuery, CSS3, and HTML5 for Mobile (2013)
3) HTML5 Pocket Primer (2013)
4) jQuery Pocket Primer (2013)
5) HTML5 Mobile Pocket Primer (2014)
6) D3 Pocket Primer (2015)
7) Python Pocket Primer (2015)
8) SVG Pocket Primer (2016)
9) CSS3 Pocket Primer (2016)
10) Angular 2 Pocket Primer (2016)