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 serverless
web 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 service
Monitoring as service
Identity management
NoSQL
Easy to maintainCDN as Service
Messaging
A lot more…

AWS

My app as 3-tier Architecture
App
API Gateway
Functions
Cloud Logic
Data 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

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
Finance
Doc Storage
Asset Utilities
External
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/

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

REACT
Facebook
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 time
After first time
setState() doesn’t
Trigger re-rendertrue
https://kunigami.blog/2015/04/28/react-js-introduction/

CREATE-REACT-APP
https://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

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

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

Flux Data-Flow Architecture
Action Dispatcher Store View

Flux Data-Flow
Action
Action
Dispatcher Store View

Flux Data-Flow
Action
Action
Dispatcher Store
View
[controller-view]
Actions creators – helper methods,
create an action from method params
assign a type and provide it to
the dispatcher.
Every action is sent to all
Stores via callbacks
After stores updated themselves,
They emit a change event.
The view listen to change
Events, retrieve data from
the store and provide the
new data to the entire tree
Of 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() events
User Interaction
Update state
New 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.

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/Do
cumentClient.html#batchWrite-property

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (14)

Similaire à Serverless Single Page Apps with React and Redux at ItCamp 2017

Similaire à Serverless Single Page Apps with React and Redux at ItCamp 2017 (20)

Dernier

Dernier (20)

Serverless Single Page Apps with React and Redux at ItCamp 2017

Notes de l'éditeur