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

Head less

SilverStripeBuilding a modern, API-driven application in SS4

Aaron Carlino

@_UncleCheese_

24 November 2017

• 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

An easy target.

Strudel.jsAurelia

Chaplin.js

Ember.js

Vue.jsInferno

Cappuccino

Maputo

Mojito

Meteor

RxJS

Fisk

Backbone.js

Tektite

ReactWakanda

Strudel.jsAurelia

Chaplin.js

Ember.js

Vue.jsInferno

Cappuccino

Maputo

Mojito

Meteor

RxJS

Fisk

Backbone.js

Tektite

ReactWakanda

Tektite

Maputo

Fisk

* As of 2017-23-11 21:00:00 UTC

“Why isn’t <module> in core?”

GraphQL + ReactJSOur big bet:

GraphQL + ReactJSOur big bet:

What is GraphQL?

What is GraphQL?

GraphQL is a query

language for your API.

GET /api/v1/blogs?memberID=5

GET /api/v1/blog/5

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

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

This is no longer a service.

This is an implicit dependency

of a view.

My Grocery Store

Meat Dairy Produce American

My Grocery Store

Meat Dairy Produce American

My Grocery Store

Meat Dairy Produce American

My Grocery Store + GraphQL

My meal

{

blogs {

title

}

}

{

blogs (memberID: 5) {

title

content

author {

firstName

surname

}

comments {

pageInfo {

totalCount

}

}

tags {

title

}

}

}

The server offers everything it has.

The client takes just what it wants.

GraphQL is strongly typed.

{

blogs (memberID: 5) {

title

content

author {

firstName

surname

}

comments {

pageInfo {

totalCount

}

}

tags {

title

}

}

}

ListOf: BlogType

AuthorType

String

CommentType

Int

TagType

Let’s build some stuffBefore this shit is deprecated.

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

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

Thank you.

Aaron Carlino

@_UncleCheese_

24 November 2017

FiskQLLook what just “rodent” to town.