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.

SilverStripe Auckland Meetup - Aaron on GraphQL & ReactJS

65 views

Published on

SilverStripe Developer Aaron Carlino (aka Uncle Cheese) discusses GraphQL and ReactJS at our Auckland Meetup. Check the full presentation video here: https://vimeo.com/280480749

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SilverStripe Auckland Meetup - Aaron on GraphQL & ReactJS

  1. 1. GraphQL, React, and SilverStripe 27th of June, 2018 • Auckland meetup • Aaron Carlino Where are we, why are we here, and where are we going?
  2. 2. React A quick recap, in case you’ve been wearing noise cancelling headphones for the last five years. And you live in a cave. On mars.
  3. 3. ● A library for building UI ● Component-based system promotes reusable code ● Virtual DOM makes for efficient updates ● Tiny API surface ● Yes, it’s just javascript. Stop, already. Why ReactJS?
  4. 4. ● AssetAdmin and CampaignAdmin are fully React ● Numerous peripheral components are integrated (TreeDropdownField, UploadField) ● Several solid community contributions to React layer, but could be more ● Overall, the React implementation has proven itself worthy of future investment React: Where we are now
  5. 5. Challenges Because if it’s too easy, the specs are probably wrong.
  6. 6. Challenge: Module sharing
  7. 7. Solution Webpack expose-loader and externals provide “faux” modules
  8. 8. Challenge: Forms
  9. 9. Solution FormSchema / FormBuilder / FormBuilderLoader
  10. 10. Challenge: State management
  11. 11. Solution Redux
  12. 12. Challenge: Extensibility
  13. 13. Solution A dependency injection layer
  14. 14. ● All UIs in React by SS5. ● Pattern library ● Upgrade to React 16 ● Cleanup, decoupling ● Minimise dependence on browser globals ● Make exposing libraries easier React: What’s next
  15. 15. GraphQL A quick recap, in case at some point you’ve been without access to Twitter for more than five minutes.
  16. 16. ● "A query language for your API” ● Not a technology per se. Just a spec. ● silverstripe/graphql module released October 2016 ● Gaining a lot of traction. What is GraphQL?
  17. 17. ● Strongly typed ● Nested data (relationships) are built in ● No versioning needed ● No overfetching or underfetching. Client is in full control. Why GraphQL?
  18. 18. <?php namespace MyOrgModel; use SilverStripeORMDataObject; use SilverStripeAssetsImage; use SilverStripeSecurityMember; use MyOrgModelDogBreed; class Dog extends DataObject { private static $db = [ 'Name' => 'Varchar(255)', ]; private static $has_one = [ 'Owner' => Member::class, 'Breed' => DogBreed::class, 'Image' => Image::class ]; // ... } <?php namespace MyOrgModel; use SilverStripeORMDataObject; use MyOrgModelDog; class DogBreed extends DataObject { private static $db = [ 'Name' => 'Varchar(255)' ]; private static $has_many = [ 'Dogs' => Dog::class ]; // ... }
  19. 19. # The basics GET /dogs/1 # Owner with explicit fields GET /dogs/1/owner ?fields=name,dogs,dogs.name,friends.name,dogs.breed.name # Owner with embedded documents GET /dogs/1/owner ?include=dogs,friends Theoretical REST API
  20. 20. GraphQL Queries Request Result Docs
  21. 21. <DogList> <DogCard> import React, { Component } from 'react'; import { gql } from 'react-apollo'; class DogCard extends Component { render () { const { Name } = this.props; return `Dog name is {Name}`; } } DogCard.fragments = { dog: gql` fragment DogOverview on Dog { Name Thumbnail Owner { Name } Breed { Name } } ` }; export default DogCard; Co-locating queries as fragments
  22. 22. SilverStripe 4: Heads optional Pick your own adventure! 27th of June, 2018 • Auckland meetup • Aaron Carlino PHP GraphQL API ReactJS CMS SilverStripe Content Model Versioning, Publication, Permissions, ... Controllers & Views Client-rendered website Server-rendered websiteMobile App ???
  23. 23. ● AssetAdmin runs 90% on GraphQL (form submissions remain) ● VersionedAdmin (pre-release) runs fully on GraphQL ● Lots of uptake in the community ● Early stages of React GridField GraphQL: Where we are now
  24. 24. Challenges Save the simple shit for Wordpress devs.
  25. 25. Challenge: Lots of boilerplate code
  26. 26. Solution Scaffolding API
  27. 27. SilverStripeGraphQLController: # ... schema: scaffolding: types: SilverStripeSecurityMember: fields: [ID, Name, FirstName, Surname, Email] operations: create: true read: true nestedQueries: Friends: true Dogs: true MyOrgModelDog: fields: [ID, Name, Breed, Owner, Thumbnail] operations: read: true MyOrgModelDogBreed: fields: [ID, Name] operations: read: true GraphQL Scaffolding in SilverStripe
  28. 28. Challenge: Extensibility (Queries are presumed static)
  29. 29. Solution A query abstraction layer that runs through Injector.
  30. 30. Challenge: Single endpoint.
  31. 31. Solution Multiple schema support (RFC)
  32. 32. Challenge: Caching
  33. 33. Solution No fucking idea.
  34. 34. Thank you! @_unclecheese_ aaron@silverstripe.com 27th of June, 2018 • Auckland meetup • Aaron Carlino

×