47
Eco Chain How Flow Helps Us Save The World

How Flow helps us save the world

Embed Size (px)

DESCRIPTION

Part I: Challenges while building a scalable REST API using TYPO3 Flow Part II: Building a single page application with AngularJS and TYPO3 Flow

Citation preview

Page 1: How Flow helps us save the world

EcoChain

How Flow Helps Us Save The World

Page 2: How Flow helps us save the world

Introduction

Page 3: How Flow helps us save the world

Hi, I’m Tim NumanInteraction designer, product design, frontend-development, doing web stuff since 1999@TimNuman

EcoChain

Page 4: How Flow helps us save the world

A Social Network for SustainabilityWorking together is needed to create real change

EcoChain

Page 5: How Flow helps us save the world

EcoChain

1 2 3Map company emissions

Map Emissions to Processes

Map Processesto Products Share your results

Page 6: How Flow helps us save the world

“In this talk, a fully working

and operational real-world

TYPO3 Flow application will

be demonstrated”

EcoChain

Page 7: How Flow helps us save the world

OOPS.

EcoChain

Page 8: How Flow helps us save the world

Backend & FrontendA two part presentation

EcoChain

Page 9: How Flow helps us save the world

Part 1 - REST APIChallenges while building a scalable REST API using TYPO3 Flow

Page 10: How Flow helps us save the world

26 years old, freelance software engineer, TYPO3 CMS, TYPO3 Flow, Continuous Delivery, Involved since June 2012

Jesper Paardekooper

EcoChain

jesperp on #typo3-flow@jesperp87

Page 11: How Flow helps us save the world

Current & NewPlatform architecture

EcoChain

Page 12: How Flow helps us save the world

TYPO3 Flow backend67 API calls54 domain models167 Behat tests

Facts & Figures

EcoChain

Page 13: How Flow helps us save the world

AuthenticationRetrieving dataUpdating data

Challenges

EcoChain

Page 14: How Flow helps us save the world

Authentication in Frontend #1

EcoChain

POST api.local/authenticate

POST frontend.local/authentication/login

EcoChainUserTokenProvider

EcoChainUserToken

Page 15: How Flow helps us save the world
Page 16: How Flow helps us save the world

Authentication in Frontend #2

EcoChain

GET api.local/usersHEADER EcoChain-Token: topsecrettoken

Page 17: How Flow helps us save the world
Page 18: How Flow helps us save the world
Page 19: How Flow helps us save the world
Page 20: How Flow helps us save the world

54 domain objectsAlot of relationsFlexible way of retrieving data

Retrieving data: The challenge

EcoChain

Page 21: How Flow helps us save the world

Return all linked objects by default,including ManyToMany collections

Retrieving data: The Bad Solution

EcoChain

Page 22: How Flow helps us save the world

16 second authentication calls :(Retrieving data: The Bad Solution

EcoChain

Page 23: How Flow helps us save the world

Introduce “fields” parameterAllow multi level control over returned fields

users/?fields=firstName,lastNameusers/?fields=location.nameusers/?fields=location.country.name

Retrieving data: A scalable solution

EcoChain

Page 24: How Flow helps us save the world
Page 25: How Flow helps us save the world

"Several applications extending the Hypertext Transfer Protocol

(HTTP) require a feature to do partial resource modification. The

existing HTTP PUT method only allows a complete replacement of

a document. This proposal adds a new HTTP method, PATCH, to

modify an existing HTTP resource.“

Source: http://tools.ietf.org/html/rfc5789

Updating Resources

EcoChain

Page 26: How Flow helps us save the world

Require all fields in the domain object (except private ones)Replaces the existing domain object

Updating using PUT

EcoChain

Page 27: How Flow helps us save the world

Only update the properties providedMust trigger validation annotations

Request parameters not getting through in Flow!http://forge.typo3.org/issues/54600

Updating using PATCH

EcoChain

Page 28: How Flow helps us save the world

CachingAPI authentication beyond headersMultiple storage backends

Future challenges

EcoChain

Page 29: How Flow helps us save the world

Part 2 - AngularJSBuilding a single page applicationwith AngularJS and TYPO3 Flow

Page 30: How Flow helps us save the world

Say what?

www.angularjs.org

AngularJS

EcoChain

Page 31: How Flow helps us save the world

MV*RoutingDirectivesServices

EcoChain

Page 32: How Flow helps us save the world

What do we want?Install angular and supporting packages in FlowCreate a nice workflowGet a ‘hello’ with an end to end test

EcoChain

Page 33: How Flow helps us save the world

EcoChain

What do we need?

Protractor

Page 34: How Flow helps us save the world

Phew!

EcoChain

Page 35: How Flow helps us save the world
Page 36: How Flow helps us save the world
Page 37: How Flow helps us save the world
Page 38: How Flow helps us save the world
Page 39: How Flow helps us save the world
Page 40: How Flow helps us save the world
Page 41: How Flow helps us save the world
Page 42: How Flow helps us save the world
Page 43: How Flow helps us save the world
Page 44: How Flow helps us save the world

g test:e2e

3 scenarios succeeded

Page 45: How Flow helps us save the world

EcoChain

High-tech demo time!(Sadly no lasers…)

Page 46: How Flow helps us save the world

EcoChain

Free stuff!https://github.com/jp1987/inspiring-conference-vagranthttps://github.com/jp1987/inspiring-conference-frontend

Page 47: How Flow helps us save the world

EcoChain

Thanks! Any questions?