1. EcoChain
How Flow Helps Us Save The World

2. Introduction

3. Hi, I’m Tim Numan
Interaction designer, product design, frontend-
development, doing web stuff since 1999
@TimNuman
EcoChain

4. A Social Network for Sustainability
Working together is needed to create
real change
EcoChain

5. EcoChain
1 2 3Map company
emissions
Map Emissions
to Processes
Map Processes
to Products Share your results

6. “In this talk, a fully working
and operational real-world
TYPO3 Flow application will
be demonstrated”
EcoChain

7. OOPS.
EcoChain

8. Backend & Frontend
A two part presentation
EcoChain

9. Part 1 - REST API
Challenges while building a scalable
REST API using TYPO3 Flow

10. 26 years old, freelance software engineer, TYPO3 CMS,
TYPO3 Flow, Continuous Delivery, Involved since June 2012
Jesper Paardekooper
EcoChain
jesperp on #typo3-flow
@jesperp87

11. Current & New
Platform architecture
EcoChain

12. TYPO3 Flow backend
67 API calls
54 domain models
167 Behat tests
Facts & Figures
EcoChain

13. Authentication
Retrieving data
Updating data
Challenges
EcoChain

14. Authentication in Frontend #1
EcoChain
POST api.local/authenticate
POST frontend.local/authentication/login
EcoChainUserTokenProvider
EcoChainUserToken

16. Authentication in Frontend #2
EcoChain
GET api.local/users
HEADER EcoChain-Token: topsecrettoken

20. 54 domain objects
Alot of relations
Flexible way of retrieving data
Retrieving data: The challenge
EcoChain

21. Return all linked objects by default,
including ManyToMany collections
Retrieving data: The Bad Solution
EcoChain

22. 16 second authentication calls :(
Retrieving data: The Bad Solution
EcoChain

23. Introduce “fields” parameter
Allow multi level control over returned fields
users/?fields=firstName,lastName
users/?fields=location.name
users/?fields=location.country.name
Retrieving data: A scalable solution
EcoChain

25. "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

26. Require all fields in the domain object (except private ones)
Replaces the existing domain object
Updating using PUT
EcoChain

27. Only update the properties provided
Must trigger validation annotations
Request parameters not getting through in Flow!
http://forge.typo3.org/issues/54600
Updating using PATCH
EcoChain

28. Caching
API authentication beyond headers
Multiple storage backends
Future challenges
EcoChain

29. Part 2 - AngularJS
Building a single page application
with AngularJS and TYPO3 Flow

30. Say what?
www.angularjs.org
AngularJS
EcoChain

31. MV*
Routing
Directives
Services
EcoChain

32. What do we want?
Install angular and supporting packages in Flow
Create a nice workflow
Get a ‘hello’ with an end to end test
EcoChain

33. EcoChain
What do we need?
Protractor

34. Phew!
EcoChain

44. g test:e2e
3 scenarios succeeded

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

46. EcoChain
Free stuff!
https://github.com/jp1987/inspiring-conference-vagrant
https://github.com/jp1987/inspiring-conference-frontend

47. EcoChain
Thanks! Any questions?