Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

StripeCon New Zealand 2017 - Aaron Carlino - Building a modern, API-driven application in SS4

66 views

Published on

Senior SilverStripe developer Aaron Carlino presents his talk on building a modern, API-driven application in SilverStripe 4.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

StripeCon New Zealand 2017 - Aaron Carlino - Building a modern, API-driven application in SS4

  1. 1. Head less SilverStripe Building a modern, API-driven application in SS4 Aaron Carlino @_UncleCheese_ 24 November 2017
  2. 2. • This? Seriously? • Most popular: unclecheese/send-all-errors-to-ingo’s-inbox • It was a café. • Also a café. They were all cafés. • It's now a café. • "Beast" = wind. • No feature requests please. About Me
  3. 3. An easy target.
  4. 4. Strudel.js Aurelia Chaplin.js Ember.js Vue.jsInferno Cappuccino Maputo Mojito Meteor RxJS Fisk Backbone.js Tektite ReactWakanda
  5. 5. Strudel.js Aurelia Chaplin.js Ember.js Vue.jsInferno Cappuccino Maputo Mojito Meteor RxJS Fisk Backbone.js Tektite ReactWakanda
  6. 6. Tektite Maputo Fisk * As of 2017-23-11 21:00:00 UTC
  7. 7. “Why isn’t <module> in core?”
  8. 8. GraphQL + ReactJS Our big bet:
  9. 9. GraphQL + ReactJS Our big bet:
  10. 10. What is GraphQL?
  11. 11. What is GraphQL?
  12. 12. GraphQL is a query language for your API.
  13. 13. GET /api/v1/blogs?memberID=5
  14. 14. GET /api/v1/blog/5
  15. 15. GET /api/v1/blogs?include=title,content GET /api/v1/blogs?include=title,comments.count GET /api/v1/blogs?include=title,comments.latest??? Params to the rescue
  16. 16. GET /api/v1/blogs_with_title_and_teaser GET /api/v1/blog_summary_with_comment_count GET /api/v1/blogs_with_latest_comment Custom endpoints
  17. 17. This is no longer a service.
  18. 18. This is an implicit dependency of a view.
  19. 19. My Grocery Store Meat Dairy Produce American
  20. 20. My Grocery Store Meat Dairy Produce American
  21. 21. My Grocery Store Meat Dairy Produce American
  22. 22. My Grocery Store + GraphQL My meal
  23. 23. { blogs { title } }
  24. 24. { blogs (memberID: 5) { title content author { firstName surname } comments { pageInfo { totalCount } } tags { title } } }
  25. 25. The server offers everything it has. The client takes just what it wants.
  26. 26. GraphQL is strongly typed.
  27. 27. { blogs (memberID: 5) { title content author { firstName surname } comments { pageInfo { totalCount } } tags { title } } } ListOf: BlogType AuthorType String CommentType Int TagType
  28. 28. Let’s build some stuff Before this shit is deprecated.
  29. 29. Our Backend $ composer create-project silverstripe/recipe-core graphql-server $ cd graphql-server/ $ composer require silverstripe/graphql $ composer require silverstripe/graphql-devtools $ composer require silverstripe/versioned $ composer require silverstripe/sqlite3:dev-master $ vendor/bin/sake dev/build flush=1
  30. 30. Our Frontend $ create-react-app dogapp $ cd dogapp/ $ yarn add graphql graphql-tag material-ui@next material-ui-icons@next prop-types apollo-client apollo-cache-inmemory apollo-link-http react-apollo
  31. 31. Thank you. Aaron Carlino @_UncleCheese_ 24 November 2017
  32. 32. FiskQL Look what just “rodent” to town.

×