Building Blocks for Product Development

The frontend frameworks and libraries have taken huge leaps forward. But to unleash our full potential to build great products, we must also upgrade the supporting stack below to better serve our needs.

Presented at Frontend.fi February Meetup.

Transcript

1. BUILDING
 BLOCKS
 FOR
 PRODUCT DEVELOPMENT @VilleImmonen
 Co-founder, Reindex
2. Idea
3. Build
4. JavaScript Fatigue JavaScript Fatigue
5. We live in the future
6. 2016 2015 2014 2013 (Native) (2.0)
7. isomorphic universal
 cross-platform
 hot-reloadable
 functional reactive predictable
 JavaScript
8. isomorphic universal
 cross-platform
 hot-reloadable
 functional reactive predictable
 JavaScript Frontend Backend RESTful, Nginx, Node.js, Ruby, Python, Java, Scala, Clojure, Go, PostgresSQL, MySQL, MongoDB, Cassandra, Redis, RabbitMQ, CoreOS, Ansible, Docker
 microservices Here be dragons
9. Because we can’t.
 Because we have better things to do.
10. LOGIN FILE
 UPLOAD DATA
 STORAGE SEARCH API WEB SERVER
11. WEB SERVER
12. 2011 2016 Spin up a server
 Install Linux Install NGINX
 Configure NGINX
 Deploy code/assets
 Maintain, monitor Surge
13. > surge Surge - surge.sh email: ville@reindex.io token: ***************** project path: /Users/ville/Projects/reindex- starter-kit/public size: 3 files, 4.3 MB domain: squealing-land.surge.sh upload: [====================] 100% propagate on CDN: [====================] 100% plan: Free users: ville@reindex.io IP address: 192.241.214.148 Success! Project is published and running at squealing-land.surge.sh > npm install -g surge
14. LOGIN
15. 2011 2016 Code signup, login &
 reset password pages
 
 Code password storage (secure!),
 email sending, API…
 
 Deploy, maintain, monitor
17. DATA
 STORAGE
18. 2011 2016 Code a backend with Rails/Node.js/Clojure/ Java… Deploy the backend
 
 Deploy a database
 
 Maintain, monitor, administer
19. 2011 2016 Code a backend with Rails/Node.js/Clojure/ Java… Deploy the backend
 
 Deploy a database
 
 Maintain, monitor, administer
20. API
21. 2011 2016 Design a RESTful API Build the endpoints using a web framework
 
 Write a client library, client-side cache and plumbing GraphQL
22. JSON { “speaker”: { “id”: 3, “name”: “Ville” “handle”: “@VilleImmonen”, “talks”: [{ “title”: “Building Blocks”, “event”: { “date”: “2016-02-15” } }] } }
23. JSON { “speaker”: { “id”: 3, “name”: “Ville” “handle”: “@VilleImmonen”, “talks”: [{ “title”: “Building Blocks”, “event”: { “date”: “2016-02-15” } }] } }
24. GraphQL { speaker { id name handle
 talks { title event date } } } }
25. GraphQL { speaker(id: 3) { id name handle
 talks { title event date } } } }
26. JSON { “speaker”: { “id”: 3, “name”: “Ville” “handle”: “@VilleImmonen”, “talks”: [{ “title”: “Building Blocks”, “event”: { “date”: “2016-02-15” } }] } }
27. Data requirements
 specified on the client
28. Type system
29. FILE
 UPLOAD
30. 2011 2016 Client-side: preview, cropping, iframes/Flash for cross-domain… Server-side: queue/handle uploads,
 process with ImageMagick,
 store to S3 CDN for efficient delivery
31. SEARCH
32. 2011 2016 Install Elasticsearch Implement indexing, client-facing API,
 API client and client-side cache Try to make it fast Deploy, maintain and monitor
33. LOGIN FILE
 UPLOAD DATA
 STORAGE SEARCH API WEB SERVER
35. Build awesome things
36. Don’t spend your time doing
 what’s already been done
37. Thanks! @VilleImmonen
 www.reindex.io