Serverless Single Page Apps with React and Redux at ItCamp 2017

@ITCAMPRO #ITCAMP17Community Conference for IT Professionals

Serverless Single Page Apps with

React and Redux

Solution Architect at Haufe Group / #melaniadanciu /mela.ro

Melania Andrisan


Many thanks to our sponsors & partners!

GOLD

SILVER

PARTNERS

PLATINUM

POWERED BY


Serverless Mindset

Serverless backend

The serverlessweb app

Demo


SERVERLESS

It is all about functions and now servers to manage for these functions


SERVERLESS IS:

“CORE OF THE FUTURE OF

THE DISTRIBUTED

COMPONENTS”

Satya Nadella

Build 2017 Keynote 1


Evolution…


Good to know about Serverless

• Keeping micro-services stateless and immutable

• Focus more on product then infrastructure

• Less Control

• Less Responsibility

• Increased Automation

• Continuous scaling

• No pay for idle


Easy to change

Static websites

Scalable out of the box

0 Cost for idle time

Security as a service

Authentication and Authorization as a service

DB as a serviceMonitoring as service

Identity management

NoSQL

Easy to maintainCDN as Service

Messaging

A lot more…


AWS


My app as 3-tier Architecture

App

API GatewayFunctions

Cloud LogicData Storage

Static File Storage

Browser

Static Website

Backend Logic Storage


My App on Amazon…

S3

API Gateway AWS Lambda Functions

Browser

DynamoDB


Microsoft Serverless Offer…

Browser

Azure Cloud Functions

Azure CDN

API Management Cosmos DB

Azure Blob Storage


My Project structure


Serverless Mindset

Serverless backend


Demo


BACKEND…

Lambda Functions, AWS Services: Cognito, Dynamo DB, S3


serverless/

handlers/

contact/

lib/

contact.js

helper.js

event.json

handler.js

lib/

utils.js

serverless.yml

My Serverless folder structure


Contracts

Documents

Assets

Contacts

FinanceDoc Storage

Asset UtilitiesExternal Service

…

API Gateway

S3

DynamoDB

Cloud Formation with Serverless Framework

External Service

Lambda Functions


functions:

authorizerFunc:

handler: handlers/authorizer/handler.authorizer

contacts:

handler: handlers/contact/handler.contact

events:

- http:

method: GET

path: /{userId}/contacts/getAll

integration: lambda

cors: true

request: ${file(./templates.yml):request}

authorizer: authorizerFunc

authorizer:

name: authorizer

arn: arn:aws:cognito-idp:us-east-2:165979317528:userpool/us-east-

2_xxxxxxxxx

serverless.yml


function createContact(data) {

let cleanData = utils.removeEmpty(data);

return utils.createItem(cleanData, DB_NAME);

}

…/handlers/contact/lib/helper.js

serverless/

handlers/

contact/

lib/

contact.js

helper.js

event.json

handler.js

lib/

utils.js

serverless.yml


function createItem(data, table, item) {

return db('put', {

TableName: DB_PREFIX + table,

Item: data.data

});

}

…/handlers/lib/utils.js

serverless/

handlers/

contact/

lib/

contact.js

helper.js

event.json

handler.js

lib/

utils.js

serverless.yml


DEVELOPMENT & DEBUGGING

Serverless-offline, Dynamo DB local


More about serverless…

https://www.slideshare.net/melaniadanciu/new-serverless-world-cloud-native-apps

http://dev.haufe.com/Serverless_with_AWS_at_DevTalks/

https://www.slideshare.net/melaniadanciu/new-serverless-world-cloud-native-apps

http://dev.haufe.com/Serverless_with_AWS_at_DevTalks/


Serverless Mindset

Serverless backend


Demo


FRONTEND…

React & Redux


Static Website built with …

• React & Redux

• Unit Testing with Jest, Enzyme, Expect and sinon

• The AJAX calls are done using fetch()

• The style is done using a Bootstrap theme

• Airbnd Coding style for react apps


REACTFacebook

A declarative, efficient, and flexible JavaScript

library for building user interfaces.


import React from 'react';

import { Button, Glyphicon } from 'react-bootstrap';

export default function LoaderButton({ isLoading, text, loadingText, disabled =

false, ...props }) {

return (

<Button disabled={ disabled || isLoading } {...props}>

{ isLoading && <Glyphicon glyph="refresh" className="spinning" /> }

{ ! isLoading ? text : loadingText }

</Button>

);

}

imports

Component declaration

UI Render


JSX

Each JSX element is just syntactic sugar for calling React.createElement(component,

props, ...children). So, anything you can do with JSX you can also be done with just plain

JavaScript.

https://facebook.github.io/react/docs/react-without-jsx.html


JSX Component(ES6)

import React from 'react';

import CustomButton from './CustomButton';

function WarningButton() {

// return React.createElement(CustomButton, {color: 'red'},

null);

return <CustomButton color="red" />;

}


COMPONENT LIFECYCLE

constructor()

componentWillMount()

render()

componentDidMount()


Component Initialized Props Changed setState() Component Deleted

getDefaultProps() componentWillReceiveProps()

componentDidUpdate()

shouldComponentUpdate()getInitialState()

componentWillUpdate()

render()

componentWillMount()

componentDidMount()

componentWillUpdate()

First timeAfter first time

setState() doesn’tTrigger re-rendertrue

https://kunigami.blog/2015/04/28/react-js-introduction/


CREATE-REACT-APPhttps://github.com/facebookincubator/create-react-app

Create-react-app –> to create the project

React-scripts –> npm start; npm test; npm run build

No server rendering

https://github.com/facebookincubator/create-react-app


JavaScript entry point

Page Template

The main React Component

create-react-app my-app


Modern react app

• React, JSX, ES6, and Flow syntax support.

• Language extras beyond ES6 like the object spread operator.

• A dev server that lints for common errors.

• Import CSS and image files directly from JavaScript.

• Auto-prefixed CSS, so you don’t need -webkit or other prefixes.

• A build script to bundle JS, CSS, and images for production, with

sourcemaps.

• An offline-first service worker and a web app manifest, meeting all

the Progressive Web App criteria.

https://github.com/facebookincubator/create-react-app#why-use-this

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app


React lessons learned

• Focus on small reusable components

• Do not use component inheritance

• Use Type-checking with propTypes

• Check that your UI is working using unit test and see their result in

real time

• Take care of performance using immutable elements or implement

shouldComponentUpdate

• Read the React documentation carefully and understand the

concepts behind it, there is no 2-way binding with React


REDUX

Dan Abramov

App data-flow architecture

App state management


LEARN ABOUT IT

Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015 -

https://www.youtube.com/watch?v=xsSnOQynTHs

https://www.youtube.com/watch?v=xsSnOQynTHs


Flux Data-Flow Architecture

Action Dispatcher Store View


Flux Data-Flow

Action

Action

Dispatcher Store View


Flux Data-Flow

Action

Action

Dispatcher StoreView

[controller-view]

Actions creators – helper methods,create an action from method paramsassign a type and provide it to the dispatcher.

Every action is sent to allStores via callbacks

After stores updated themselves, They emit a change event.

The view listen to changeEvents, retrieve data from the store and provide thenew data to the entire treeOf their children views.


REDUCERS+FLUX = REDUX

Elm + Flux => Redux

Dan Abramov - The Redux Journey at react-europe 2016

https://www.youtube.com/watch?v=uvAXVMwHJXU


Redux Data-Flow

Reducer[Pure function]

UI View

Store[Holds current state]

Action Creator

onClick() eventsUser Interaction

Update stateNew State

Dispatch action

Actions are events


Constrains and their benefits

• Single State tree

• Actions Describe Updates

• Reducers Apply Updates


ACTIONS

= events


export function createContactSuccess(contact) {

return { type: ActionTypes.CREATE_CONTACT_SUCCESS, contact: contact }

}

actions/contactActions.js


REDUCER

Pure functions


import ActionTypes from '../actions/constants/actionTypes'

import InitialState from './initialState'

export default function displayReducer(state =InitialState.display, action) {

switch (action.type) {

case ActionTypes.DISPLY_CONTACT:

return { ...state, selectedContact: action.contact }

default:

return state;

}

}

Contact reducer


Combine reducers: reducers/index.js

const rootReducer = combineReducers({

contacts, //short hand property name

addressCategories,

display,

assets,

userSettings,

ajaxStatus,

modals: modalReducer

});

export default rootReducer;


SELECTORS

Like Map state to props

(state, …args) =>derivation


Selectors

export function contactsFormatedForDropdown(contacts) {

return contacts.map(contact => {

return {

value: contact.id,

text: contact.firstName + ' ' + contact.lastName

}

})

}


STORE

The application state

Dispatch action & Register listener


import {createStore, applyMiddleware} from 'redux';

import rootReducer from '../reducers';

import thunk from 'redux-thunk';

export default function configureStore(initialState){

return createStore(

rootReducer,

initialState,

//handle async actions in API calls

applyMiddleware(thunk)

//for dev mode applyMiddleware(reduxImmutableStateInvariant())

);

}

store/configureStore.js


REDUX THUNK

https://github.com/gaearon/redux-thunk

Redux Thunk middleware allows you to write action creators that return a function

instead of an action.

https://github.com/gaearon/redux-thunk

https://github.com/reactjs/redux/blob/master/docs/advanced/Middleware.md


export function saveContact(contact, userToken) {

//thunk -

return function (dispatch, getState) {

dispatch(beginAjaxCall());

return ContactsApi.saveContact(contact, userToken).then((savedContact) => {

contact.id ? dispatch(updateContactSuccess(savedContact)) :

dispatch(createContactSuccess(savedContact));

}).catch(error => {

dispatch(ajaxCallError());

throw (error);

});

}

}

Save a contact action


Redux Lesson Leaned

• The entire state of you app is a plain js Object an

Immutable State Object

• Redux is build on top of functional programming concepts

• It heavily uses pure functions

• When you learn it do not use starter kits

• It gives order to your code

• Redux DevTools


Resources

• https://kunigami.blog/2015/04/28/react-js-introduction/

• https://github.com/facebookincubator/create-react-app

• https://facebook.github.io/react/

• https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents

• https://thenewstack.io/best-practices-for-developing-cloud-native-applications-and-microservice-architectures/

• http://flomotlik.me/blog/challenges-of-serverless-in-2017/

• https://github.com/aws/amazon-cognito-identity-js

• https://medium.com/komenco/react-autobinding-2261a1092849

• https://github.com/airbnb/javascript/tree/master/react

• http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#batchWrite-property

https://kunigami.blog/2015/04/28/react-js-introduction/

https://github.com/facebookincubator/create-react-app

https://facebook.github.io/react/

https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents

https://thenewstack.io/best-practices-for-developing-cloud-native-applications-and-microservice-architectures/

http://flomotlik.me/blog/challenges-of-serverless-in-2017/

https://github.com/aws/amazon-cognito-identity-js

https://medium.com/komenco/react-autobinding-2261a1092849

https://github.com/airbnb/javascript/tree/master/react

http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#batchWrite-property


Serverless Mindset

Serverless backend


Demo


DEMO


• Be stateless on the backend and on the frontend

• Think functional and make your functions as small as possible

• Make you client independent of you backend with no server rendering

• Automate as much as you can your entire development, debugging, testing

and deployment - it saves a lot of time

• And yes, using the cloud provider services means being locked in with that

cloud provider, so you need to manage this risk

5 thinks to take way


SEE YOU NEXT TIME!

Thanks


Q & A

Serverless Single Page Apps with React and Redux at ItCamp 2017

Technology

Transcript of Serverless Single Page Apps with React and Redux at ItCamp 2017