Hot JAMS(tack): Lessons from Building a Music Discovery App with Drupal and React

so yeah thanks everybody for checking

this out I appreciate it

you are in hot jams parentheses tap and

I'm going to talk about a music summary

app that I built to learn more about the

couple Drupal and also yeah little small

this big giant screen but there's a

github repository and you're all I can

also post it on Twitter but that has the

source code for this there's a link to

the line and then also this slide deck

so if you're interested that would be

what I recommend you go to get other

stuff so I am Brian Perry I'm going to

interactive developer at hs2 solutions

I live in Palatine with suburbs kind of

a popular opinion these days and say

that I am a lover of all things

component and component driven so

building with components of Drupal or

face beaming pattern libraries like

pattern lab and they increasingly become

more interested in JavaScript based

approaches to building with components

like yeah and I also love all things

Nintendo so if you guys are playing in a

cool on switch track me down let's talk

about it and I'm on the Internet in

various places of Brian Terry and Google

that worked

burn bright comedy on Twitter and most

importantly while Brian on the Nintendo

network so I work for interesting

solutions I'm not the best mister these

companies slide things but the things

that I just like to say is that I get we

have a nice great roof team I get to

learn a lot of awesome stuff from my

teammates so if you're looking to do

great Google work or off and hiring as

you need

great triple work done I'm sure we would

love to do it for you

oh there's that flickered and I see what

you're saying what so what we're going

to talk about is you know this project

that I took on to kind of learn more

a couple Drupal and react and it was

kind of something that I fell into as

often times is the case with good side

projects so this is from song tonight by

LCD soundsystem which is one of my

favorite albums of the year a big LCD

soundsystem fan but the lyric is it luck

is always better than skillet things and

yeah I think this is definitely a case

where it kind of fell into some of us

let's talk about how we got here this is

that mean I used to perform comedy I'm

doing my solo musical show right I'm a

sound machine here while it's relevant

for a few reasons of one is that all

comedians secretly would rather be in a

band and I was one of those people never

quite was but for this moment in time

media I felt like I was but performing

out in Boston I collaborated with a

comedian named Chris Duffy and he

happened to go to college with one of

the folks behind the podcast called

switched on pop which is a great podcast

encourage you to check it out so what

they do is they focus on like the modern

pop landscape and break down current pop

songs and why they work musically often

from like a musicologist perspective or

more of kind of like a classical

approach it's a really awesome podcast

why don't we go at this point I was

listening to an episode of the show and

they had a guest on Rob Mitchell who's

also from the Chicago area turns out the

one of the things that he does and then

he was on the podcast to talk about he

maintains every year Google spreadsheet

where he activates all of the best of

lists in music so he creates a big

master best of best of list to have the

undeniable overall critical consensus

for the year this is what that

spreadsheet looks like to some of these

men with beautiful to others it may look

like a horrible panic inducing Google

spreadsheet but there's a lot of great

data in here Bulba albums a different

genre is where everything ranks in on

the lists and then further down in the

spreadsheet there's stuff like averages

and a compilation for like a critical

consensus score really awesome data in

there so I kind of have this back

ahead for why I like I'd love to find

something to do with that awesome

dataset and then you can barely see it

in the background I think this histories

at DrupalCon

being attacked by a bird so much talk in

the community about decoupling and

progressively decouple only or only the

coupling things and we don't really say

headless anymore but that was a thing

for a while too but so much talking

about decouple old and a couple Drupal

and I had some limited experience with

them on projects we definitely wanted to

learn more about the approaches that

were becoming popular in the community

and then also in big giant bold letters

from the front-end framework world I

heard so much stuff about react and

things like reactive redux

and there are other frameworks that I'm

sure are great like view but I just

heard so much noise about react and also

had some experience with angular and

wasn't really all that thrilled with it

so I'm kind of curious is it the

frameworks is it me to do more with yeah

so all that kind of came together and

was possible in the back of my head I

assume I got enough to try to take that

cool dataset learn more about the couple

and learn more about react if I took all

this stuff and slammed it together so

that's what I did

talk about so kind of starting from the

beginning at that point I had to ask

myself what sort of de coupled

architecture am I going to follow how am

I going to set this up some of these

lyrics are slight stretches that this is

the freight that faces the project where

we're kind of really plotting things out

and I also wanted to leave this because

I really appreciate this guy still lives

and dies by the byte hat but there's no

style choice I can stand by so we have a

bunch of different a few different

flavors of our a couple of more

decoupled versions of Google six fully

coupled where it's all Drupal all the

time so Drupal handles the rendering of

your page and all the things that we

know and love for two-pole and you know

we can build on top with the contributed

things but it's still you know a PHP CMS

at the end of the day and then we could

progressively decouple so this is still

Drupal that renders the the shell of the

page but we're strategically for being

sprinkling in some of the JavaScript

JavaScript framework magic be in blocks

or certain components on the page or you

know even still a triple renders the

page but then the framework takes over

and then there is fully decouple so here

your JavaScript framework is what

actually renders the pain and it is

going to communicate with duple via an

API to get the content

so this is pretty small on the screen

but Driss has a series of mounted a

couple posts most recently there was

having a couple in 2018 which is great

for this 2018 and I want to do to 2017

versions of that well it's definitely

worth repeating but what this portion of

the flow traffic just kind of calls out

is that it's not really a black and

white decision where you might fall on

the couple's to fill needs a couple old

spectrum and you kind of have to ask a

lot of questions so is there are things

that are you know editorial needs or

things that Drupal is going to give you

that's really important to your project

or the people who are going to be

maintaining content so the editorial

experience being able to easily preview

content then we can also think about

just some of the things that Drupal

gives us that we potentially take for

granted like routing or you know

accessibility in its markup for some of

the security things that that Drupal is

gonna take care of that we don't have to

worry about

so going from you know fully fully

coupled Drupal the further you go over

into something that is fully decoupled

you're losing out on some of those

niceties and you gain the responsibility

of that but on the other end of things

you potentially gain some things in

developer convenience or if you have a

team that is already very familiar with

JavaScript through these JavaScript

frameworks it might be easier for them

to do some of this work but for this

particular project it wasn't that

difficult of a choice for me I've come

up with will be a couple approach there

couple reasons I don't really have any

editorial needs here or at least very

few of them it's nice to be able to edit

things in the Drupal UI but the data

that did the spreadsheet is really into

the magic here there's a few things I

want to add to it but I'm not gonna

break a 12-page story about

and I also wanted to kind of force

myself to go all in and learn more about

react and kind of cut some of my

comfortable jubal parachute so

thankfully the kind of and then we need

to figure out okay how are we actually

going to use rupal to achieve that and

there's a few different distributions

this is a lyric from scissors album I'm

either saying that wrong or the fact

that there's no way for me to say that

it sound cool but either way so her

album with the number two critical

success consensus of the year but I

think this potentially applies to using

a distribution may actually play a

little harder or work a little smarter

and potentially these distributions

might help you work a little smarter so

I think just the past year there's been

a whole lot of movement in the community

on these distributions it's crazy to

think that it's only been a year but

there is a reservoir which is aqueous

API versus distribution there's also

headless lightning which I've only

tinkered with just a little bit so but

it might be something you consider if

you already use lightning we're familiar

with lightning I find that it blends

kind of somewhere in between reservoir

and Contenta in kind of how it functions

and what it offers then there's that

Contenta which is another distribution

that's driven community driven

distribution and I'm sure there are some

things that each of those distributions

do for you but at the end of the day a

lot of that stuff is still contributed

modules that they set up in a particular

way so you can still roll your own or

later that into a Drupal 8 project so

for those who haven't played around with

these distributions we're going to take

a look at a few things that they have in

common one is that they have API focus

admin UI is unser

and late so we've got contentos menu on

the top and we see things like content

models and API and then rs4 is down

bottom we still see the content models

and API but you see that the menu there

is much more stripped down and that's

probably the biggest difference between

the two distributions that reservoir is

intentionally kind of the minimalist

approach and they're trying to build

something that maybe somebody who's less

familiar with Drupal can install and

have this API out of the box and they

don't have to you know deal with Drupal

isms or you know they're not looking to

really extend this and change this in a

lot of ways and then they both offer

some automatic API documentation using

open api and redock I believe so here we

see all of the endpoints then we can

interact with examples of the responses

how we can filter and query for the

great and then they both also use JSON

API and by default so we get a nice JSON

response back and we hit one of those

endpoints and uses the JSON API standard

which lets us get more data in a single

response without having to chain

together multiple endpoints it's kind of

but then it seems like the kind of

recently is using JSON API rather than

the core rest modules so just a little

bit more about each of these approaches

and why I think you might choose one

over the other

there's reservoir they also have their

own cool logos and slogans which I

appreciate

so ressemore is the back

and you might vote for reservoir if you

want kind of the quickest approach to

having a drupal-based API and nodes and

no types although are gonna meet your

needs and then also you know you don't

know of or won't miss kind of some of

the Drupal isms and Drupal approaches to

extending and keep in your any balance

so Contenta makes your content happy

it's very smiling and you might go for

Contenta if you want to use things like

vocabularies or media or some of the

other things that you're familiar with

in Drupal that reservoir isn't

necessarily set to use our box and you

do want a more true life approach to

adding you know additional modules and

customizing things and having more

flexibility more options reservoir can

do it but the UI is definitely not

focused on that and then also Contenta

has example content that it ships with

and a number of consumers and reference

implementations that you can use so if

we want something to experiment with or

examples to start from that also a great

great reason to in tickets and also it

seems to have a lot of momentum recently

in the community too and then you can

totally roll your own if you're a DIY

person the the pieces of the puzzle here

are often contributed modules and not

necessarily magic but you know I would

encourage you to ask yourself could you

play a little harder and work a little

smarter so could these distributions

help you out or is there something

custom about your project that you know

you need to be able to build these in a

specific way or do you need to layer

some of this functionality on to an

existing project and you can camp ahead

so I picked Reservoir

I had really simple needs I just wanted

an API that just worked and I'm just

going to use album notes it worked

immediately I basically composer

installed it and then hit the API what

didn't work that way for me when I

initially worked with it I think that

might have been a little early on it let

maybe I just did something stupid that's

entirely possible - but I have to use

content out on projects as well what I

used reservoir and it met my needs

really well for this project so now all

we've got to talk about getting our data

from that ugly Google spreadsheet engine

Drupal somehow so it's a bit of an

exaggeration but what if I told you that

was just all so easy

and that is some time

kenny loggins on this track Thunder -

problem the migrate API dig into it in a

second but what it can offer us for

getting some this data into our trip

fluency is really kind of amazing have

the other thing since we're referencing

this song people to show you the way on

Thunder can't Dublin so people at the

conference who may be socializing or

drinking this is actually useful

information everyone please hydrate

there's one thing we take away always hi

I feel like that everyone think that

advice seriously so how in God's name

are we gonna get data out of a Google

spreadsheet I need to are influences and

I want to avoid making them stapling

like a copy of the spreadsheet or

including in the depository because it's

during December when all these lists are

published I wanted to be able to get on

a pretty regular basis

the most recent you know version of that

data from the source which this dude Rob

who was nice enough to share this

information maintains the Google

spreadsheet because he's crazy I guess I

don't know

so Drupal migrate can you help us quite

a bit here I created a custom migrate

module which also installs the album

content type but I'm going to use to do

that I put through the I built that

album content type and then use Drupal

console to export it with their no ouu

ID

no peeping hash option and then using

the migrates + json migration i can

actually pull right from the Google

spreadsheet we'll look at how that

happens in a second and it also as part

of the migration process

I'm augmenting the gated I bring in with

some data from Spotify using Spotify API

because there's a few additional things

that can help make that app a little bit

more fun if we do that

so this is a weird little hat that I

learned about that makes this possible

to actually hit the Google spreadsheet

data in place if you go file them and

publish to the web or email the guy who

maintains this Google spreadsheet not

significant to do it for you and then

say automatically republish when changes

are made then you're gonna get this URL

that you can hit as long as you provide

the document ID you can get a JSON

response that has all the data from your

Google Spreadsheets there's a little

weirdness and kind of the paths and the

response and some of the naming

conventions but once you've got your

head around that the data is all there

in real time wait so now we can take a

look at the migration itself I'm pretty

small over everybody's eyes are up to

the task so this is the gal file that

defines our migration in this case and

it lives in the AMT why migrate module

config install and we you know specify

an ID and a label and all that stuff for

the migration and then we're using a

custom source plugin here we'll look at

that next

but basically what that does is mainly

in this case it's what we use to

interact them to Spotify API and then

we're fetching HTTP and we are parsing

JSON which makes sense given what we

just saw we provide our ugly Google

spreadsheet URL and then this item

selector here it's basically we're in

that response we're gonna get the items

that were migrating game so it's has to

be feed slash entry and then we define

the fields that we're going to be

migrating in so we give it a name a

label and then from that feed slash

entry point a selector so there's a bit

of a weird naming convention and a

dollar sign

that actually has a string value once

you figured that out you can map all of

the fields and then we're saying that

we're going to use the node destination

plug-in to save these as album node

types and then after that we basically

just mapped the source fields to the

fields on the album content type and

this is the album source plug-in and

that lives in a Oh to live in migrate

plugin migrate source we're including

the Spotify Web API for PHP which worked

pretty nicely from my needs and then we

are extending the URL source plug-in and

implementing prepare world that's where

most of the the work goes on here so we

creates a instance of the Spotify which

Web API start a session and get token

back that's what that block of code does

and then at that point we can interact

with the Spotify API and perform a

search so that's another what we're

doing they were just searching we're

using the table we filled in the

spreadsheet and that has to that has

both the artist name and the title of

the album which actually gives us a

pretty good string to search Spotify for

and get a relevant set of results back

and then at that point we just from our

Spotify response we pull some data that

we need use up so there's the Spotify

album ID and once we get that we can do

things like link over to Spotify to play

the album they could embed song and

things like that and then that Spotify

API also has the album art in a number

of different sizes which is really

useful to be able to include it in an

app

and then we just return the modified row

back to the migration and then at that

point

more like migrate am i right yeah

everybody took that more seriously than

the suggested in our reservoir instance

now and if we edit one of these albums

Kendrick Lamar in this case which is

without question the critical darling of

last year we see all the data that we

expect to see we've got a title album

title genre the averages links to the

cover images all the rankings for all

the lists so now we have all this cool

data sitting in Drupal ready for us to

interact with okay deep breath so now we

get to talk about the reacts end of

things and there's a lot to talk about

here and you know the thing that I would

also stress here giving the the kind of

Napoleon room I think a lot of us are

probably on the same page but I was

three new to react when I took on this

project learned a lot along the way but

to quote jay-z I would say I'm the guy

who's been to Paris two times and seeing

you know the Eiffel Tower I know some

things about react but certainly not

everything but I'm gonna focus on kind

of high-level learnings that I had

putting together this app hopefully so

spoiler alert this is what the app ended

up looking like and we'll go play around

a little bit and see what this so there

was a spinner there and we're loading in

data from Drupal we'll talk a little bit

more about how you might be able to

eliminate that process the loading

process but so here we get by default

the cover view so we see rows for all

the different albums and if we click on

an album the detail panel

fine and the color arts and there is a

little link here to play the album on

Spotify so we see no drama on Spotify I

mean a lord fans yes nice couple Lord

fans alright

and then there's also the rankings on

all the lists that it happens to fall

into and we can click through and see

the list and you'll see where it ranks

on the 50 best albums on Stereogum and

then there's also a control panel here

on the side that slides out so we can do

things like restrict the number of rows

that were displaying and there is a

filtering capability so we can filter by

the artist album genre so my favorite

album of the year was by the war on

drugs so if I type in war the deeper

understanding by the war on drugs and

all the album's artists that have more

war in it updates very quickly as I type

in my search string I can type for hip

hop hip hip hip hip fresh and and get

all the hip hop albums of the year and

Kendrick Lamar still unsurprisingly at

the top of the list there and then

there's a couple of other views that we

can switch between so this is just a

simple table view here and uses a

component from the blueprint jazz

component library which had to have a

number of nice building blocks

um but I also found this was a really

good place to start

I had a few like initial attempts at

this project and I tried for something

too ambitious like I said I'm gonna

start with a large chart he said just a

few people in getting the data that I

within the spreadsheet from the drupal

api and have it show up in this table

that i can then sort and filter ended up

being a really good starting point for

me and then there's also this list view

which is a heat map visualization and a

whole lot of stuff here but we see all

the lists and then the data that happens

to me in this results that 50 rows and

we get to see where everything ranks on

all the different lists it gets

interesting if you do something like

pick a list here so if I say Rolling

Stone a resource the data set based on

Rolling Stones list so we see it running

right down from 1 to 50 there and then

you can kind of compare where Rolling

Stone has similarities to other lists

like if we look at the third row here we

see that u2 songs of experience was

number 3 for Rolling Stone and did not

short on any other list in this dataset

so weight a way to go with your gut

Rolling Stone um so yeah that's it how

to do it he was interviewed yeah I

haven't read Youngman might be amazing I

don't yeah we got a u2 defender anyone

who could defend you to everyone still

mad that album ended up on their their

iPhones

I'm renaming this talk to a bustin you

choose chops okay so anyway that's um

what else feel free to poke around

online and try it out um but I thought

would be helpful to kind of look I want

a dozen contacts before we look at some

of the component parts a little bit

which will do now we're after take this

set okay so the question I had to ask

myself is how do you start or react to

that I didn't know how to do that and as

I mentioned I took a few attempts at

this and initially when I started trying

to learn more reactive as before

creating react that existed which is

some about a second but you had to do

more web configuration and maybe get a

portable plate that you work with and

there was no more than you had to do to

kind of get your local set up going for

development before you could actually

get into the exciting part of learning

and playing around with react components

to then create react app has been

released which is maintained by the

Facebook team and the idea here is that

it lets you bootstrap react out really

quickly and hide some of that

configuration behind scenes so you don't

have to worry about it unless you need

to so I installed crack up as a global

package and then you can run create and

grab the name of your project

there's a new recommended way to do this

now if I think more recent versions of

NPM have a command npx that vaporizes

you these two

once so if you happen to look at it

that's what they recommend doing now but

not what I did and then if you're

familiar with installing things VM PM

there's going to be all kinds of crazy

outputs that certainly do not want to

copy and paste into this fake terminal

and then you can change directory into

your project you see all files that

create react that way create create

react up bootstrapped for you and if you

run npm start it's gonna start a little

web server for you and did a load in

your browser and it also does hot module

reloading so if you change things in

your app it will automatically refresh

and update in your and then you can also

run npm run build and that is going to

build a production ready bundle for you

that can be your assets that you deploy

and also be where there are dragons

ahead but so you know i mentioned that

it hides a lot of the configuration

behind the scenes to make it easier for

you to get up and running with writing

react code there's also the concept of

ejecting so you can run npm run a jet

and what that does is it exposes all

that configuration so that you can

optimize things or change your web

packing thing as you see fit and what i

would say is don't be embarrassed if you

use the default configuration of create

react app as long as it makes sense for

you just know that you can get out there

and change it if you have to so we're

this project i actually had never

adapted it but for this slide deck

ironically enough I had to to be able to

get the slide back working the way that

I wanted to and it wasn't the end of the

world but I did see some cool dragons

okay so now starting to build the react

out a little bit a couple ways we could

go but one thing that we might want to

ask the session because we were just

talking about our friend rupal is how

are we going to get that data from our

API into just a handful of ways that you

could do that you can use the library

like Axios which is kind of similar to

jquery's it's not exact methods but I

wanted to use the JavaScript fetch API

try that out

so I created a little utility function

that lives in source utilities and it

takes an endpoint it defines an array of

albums and then we call fetch with the

endpoint and in fetch returns JavaScript

promise which reminds me to also say

that some of the JavaScript code we're

going to be looking at is gonna be using

es6 syntax which I'm sure some people

may or may not be familiar with but if

you see anything that you're not quite

familiar to looks a little bit weird

that's why but I'm hoping it's gonna be

generally understandable so anyway we we

call fetch and we we get a promise back

and then we are going to chain a few

promises together to resolve that data

and act on it so here we're resolving

the response as JSON data and then we're

taking that data and doing a few things

with it so if first we're taking the

data and we're putting it in albums

array and then if there's a next page of

results back from our JSON API endpoints

we are gonna call get all album data

recursively to get the next page of

results and if there isn't then we'll

just return the album data JSON API I

found out that there's no way to just

get all of the data which while

frustrating initially makes a lot of

sense because oftentimes that's probably

in that

that's why you have to do something like

that and then also there is a little

error logging if something goes wrong

well with that we can get all of the

data from our endpoint and so this

particular app with just the data for

data upfront so that we had it available

in the app I do want in the future have

like multiple years worth of data and I

don't think that approach would be

practical we need to you know based on

the year or based on some other

interaction Pig API a little bit more

frequently but keeping things simple

here so now we have the data and you

know big object and we can start

rendering it so we're going to look at a

example component this is the album

component and we see Kendrick Lamar

again since he won his element the

example but so we have our component on

the left hand side and then on the right

this is an example of a render method

that's rendering out and what we see

there is JSS so that's a mark up syntax

that's used in react that lets you use

HTML like tags and elements to render

your components it gets converted to

JavaScript but you can use things like

divs and you know H ones and elements

that you're familiar with but you can

also use custom components custom

elements that you define in this case if

the album and then they can accept props

properties so here we're passing in as

props a bunch of the data that we need

to use to render that power

so we've got our

and how am i the cover image things like

that and so with in react if the data

the props or the state which we'll talk

about in a second if any of that changes

it's going to automatically render your

component or at least figure out if it

needs to do that and any components that

might be children of it that are inside

of it which is part of why it you know

feels the performance and responds so

quickly so we can actually just update

things here and obviously as we update

our props things are gonna you know

update in real time so I'll just some

goofy there's something great about

changing Dan to Dharma and I also have a

cover image of that war on drugs album

that I'd done so much so there might be

actual like string values that get

passed in here it also commonly might be

a variable or an object or something

like that so I can replace this with

these squiggly brackets and use my lower

cover variable here and now I have the

war on drugs album art for Kenny Loggins

this darn so that's a look at what the

JSX

for a component might be like so now

let's take a look at this problem

component and how we actually build it

in JavaScript so this is our component

album dot J guess which lives in source

components in this project and we're

importing react and also prop types

we'll talk about prop types towards the

end of this file and we are extending

the react component class there's a

handful of different ways that you

can you define component extending react

component kind of covers all cases so if

the I think the best way to explain

these as examples if you have a simple

but functional component that maybe just

takes props there's a more stripped-down

simpler ways that you can define this

but there's going to be a render method

and the render method returns JSX

and there's a little bit of logic here

so if we have a cover image we're gonna

return one version of the album

component that has them to help them

cover and if we don't have that we're

gonna return a slightly different

version of that component and then it's

all JSX here so we see things like album

rel and you can think of that as another

custom component we've defined the truth

is actually a little bit different from

that and we'll get there but for now

just think of it as a custom react

component but then there's also stuff

like that an image tag and on each floor

and things that we know and love or some

days don't love it all and we're also

making use of our props here so we know

the props that we expect to be passed in

so we can do things like this that

prompts the cover image to a cover image

this not props that title etc and then

also up in album row there's an onclick

handler and that you know when you click

on the album row as we saw like

highlights it and populate the the panel

on the right hand side so it can't call

functions like that and those functions

could be find in the component itself or

they may also be passed down by a parent

as plots

and we'll also see some examples of that

and then this is just the stripped-down

version where we don't have an image and

then these are the prop types so prop

types is just a simple way to kind of

validate some of the props that come in

so just really simple basic but you know

we're expecting a string here we're

expecting a function here and it'll

complain if it gets something different

which is nice and then we export the

album component so we can import it

elsewhere so that was the basics of how

we would create a component and we

talked about props there's also the

concept of state in react component and

tops are really kind of external

influences up influences on your

component data that gets passed into it

state is more what the component knows

to be true about itself and you know

variables that are managed inside of the

component so a way to illustrate that is

thinking about our control panel here we

have things like the little list to sort

and pick list so I just created a

stripped down version of that in our

little preview panel here there's enough

coil go full screen but so if we wanted

to find some state that lives in the

component we created a constructor and

then we define the variables constants

that we want to use of their selected

source we just set the field

comscore and then selected list we

default to Nami and then we can set

state in the constructor so this stop

state and then we have an object that

has selected sort and selected list and

then below that I'm finding a couple of

functions that we'll look at in a second

I typically don't do that if you

use yes its arrow functions it

automatically finds that stuff before

whatever reason I had to do that in this

little preview pane we'll skip over the

functions for a second and just look at

the render method so it's returning jss

again and it always has to return one

top-level wrapper so that's why wrapping

it indeed we're accessing here so we say

that we're just printing out this is a

state that's like sorts in the current

value for selected sort and then for the

Select list we're setting the value to

the value in State for selected source

so whatever the state of the component

is set to is what that select list will

have selected as well and then when we

change it we have a non change event we

call this handle sort change function

that's defined component and really all

that does here is it just updates the

state to whatever you select in that

select list so we just take the events

and we use set States and we say that

selected sort is the value that's picked

in the Select list and all that to do

this so if I go and pick average it you

know the value in the Select list is now

average and we show that the state here

is average so again the state is more

the kind of internal representation of

the components and I think it's kind of

well for me let me get out of here

I definitely it was a challenge for me

to kind of understand those two concepts

Protestant state I wrap my head around

the day-to-day but then I also it took

me a while to really understand where I

would and wouldn't use state law school

and there is a common pattern in react

of lifting the state up it's a higher

components in your path and so I'll talk

a little bit about kind of what I went

through there but so take the Albanian

component that we had you know I'm

initially building that I know about

props and state now I know maybe enough

to be a little bit dangerous and I'm

like okay it has a cover and a title and

an artist name so it's probably gonna

have all those things in state and the

state of the component then I keep

building and I'm building the detail

panel and it has a lot of the same stuff

that has at least like that largest name

and then you know the helping title some

okay well then it probably also needs to

have state for those things as well and

now I'm trying to manage that in two

places I click on something

I have to go updated both places and I

filter the list and messed up you know

I'll take a state in the album component

and the detail panel components so that

doesn't feel right so then the idea

there is that you would take your state

and you would lift it up to one of the

higher parent components that are going

to render these things so then at that

point you know I take the visualization

maybe that's where in the soil

the cover view is where that state lives

but then I've also got like the list

visualization and the table

visualization and those are using the

exact same set of album data so you

don't want to manage that big object of

album data in each of those

visualizations and have to update each

one as things change and the control

panel also needs to know about some of

this stuff at least like how many albums

are displaying and things like that so

where I eventually ended up is that the

almighty app is what has a lot of the

sustain and it's really passing down all

of that data into the components as

props so it's passing all the album data

into the visualization and then that

visualization renders each of the albums

with all the information and then

another thing that I didn't really talk

about getting getting kind of deep into

reacts up here but the state in a

component can only be managed by the

component itself became like reach into

other components and mess with their

state because what they believe about

themselves so the app will also pass

down functions to some of those children

so that it can go all the way back up to

the app and change the app state but the

basic idea here is like if you want to

be able to filter in the control panel

if you pass down a function that can do

that they can go back to the app and say

all I'm supposed to filter for hip-hop

so hey app we're gonna use hip-hop now

and then the app passes all that data

down and because whatever thing the

props changed things we render

everything magically updates when you

filter all that it took a while for me

to wrap my head around I'm probably

making people's eyes roll back in their

heads

they're new to the south if you are

familiar with react you may be thinking

that this would be a situation where you

use something like Redux and Redux is a

library that helps you manage states in

your app in a consistent way in a very

deliberate way and I think about it you

do this again or maybe next year if I do

some work with the 2018 data I probably

would do that understand I'm just manage

everything at the top of the app but

passing things down quite a bit

or you know passing the happens to one

component and their their children and

passing functions all the way so that

was definite Art for me to wrap my head

around another thing that was really

hard for me to wrap my head around is

styling and CSS and JavaScript when I

saw the people who were doing here I got

it but to paraphrase I was flabbergasted

and there's free styling if anybody has

not heard of it well it will rock your

face off into the finale so let's talk

about how we style these things so you

can create a CSS file like you might be

familiar with and import that into your

component and then you have access to

all those styles in your app and then in

your JSX you can use the class name prop

to use the appropriate class not class

the class name look if it's crappy like

that or some days

and that'll work that's totally fine but

as I doubt you to this all the cool kids

are reading CSS and J's for some reason

and when I learned that especially what

I saw what it actually looked like it

was definitely a facepalm situation

that's that candid picture I took of my

son one day when his mom was away and I

just ascended that and I took that

picture I'm like I can't send this to

her she's gonna wonder what's going on

with him it definitely describes my

feelings when I first saw how some of

these approaches to CSS MJS actually was

so what I ended up using is the styled

components library so here we're

reporting styled components and then

when you do that you can define these

constants that basically let you create

a little inline react component there's

this album real thing which we saw up

before it technically was a styled

component and you can say that it's

styled it or it could be one of the

other components custom components that

you've built and then you can define the

CSS look in line here in your JavaScript

file which you know initially felt very

horrible and very wrong but as I took

this approach if something made more

sense

one is that everything actually really

does live in one place in this component

another is that it can also respond your

Styles can respond to the props that are

passing to your component now

you think this is a really simple

example but if the album component has

the active album drop and then we click

on it it becomes active then we can

change the styling and put that that

blue border around it so that's really

nice we don't actually have to go like

we do in what Lana jQuery approach maybe

and update class names and juggle a

bunch of class names together the

component itself just knows what its

state is and can make itself look how it

thinks it should make itself look in

that case and there's you know more

complicated things you can do with that

but it's actually pretty nice and useful

those are all in line like you're an

inspector the thing and you changed it

all the inline JavaScript CSS ticket

yeah so what it does and I haven't gone

too deep engine of like the actual nuts

and bolts of what happens but it

actually do basically like I have

nonsense class today that elements in

the DOM and then in that class has all

the styles but yeah the other thing that

that does is it prevents these styles

from leaking out because it's got this

nonsense class name there's no way that

that class name is going to be used

anywhere else so other tangential

components aren't gonna pick up these

styles they will fly to the child but

they're not gonna leak outside and I

don't know if people have used naming

conventions like been in some of their

CSS styling that's kind of a pretty

heavy handle handed way to try to in my

opinion achieve that same effect but

with still having you know styles that

apply globally

so this image people may have seen this

but this made a lot of sense to me when

I saw in that I know I have been taught

there's a particular separation of

concerns between like JavaScript and

HTML and CSS and that mixing them is bad

and wrong but as I started to you know

build things this way it actually makes

a lot of sense to me that like my album

component that's where the separation of

concerns is and I have this nice

wonderfully packaged album component all

the stuff is in there and it knows how

it's supposed to behave and that

actually makes a lot of sense to me so

let's talk about building and deploying

have just a little bit of time here bend

if erase the album cover I hope it's

still within the acceptable rules of

what I can put on screen in this

conference nobody got too excited but

alright I have this app and where where

can I go where can I put it so let's

talk about the jam stack a little bit

which is in the the title of this talk

took me a while to get to it but we're

here and what the what the jam in Jam

stack stands for is JavaScript API yes

the alien Jam stock stands for an API

and markup okay so that that's the the

stack that we're dealing with here and

let's look at that in relation to this

app that I've been blabbering on about

minutes now so the JavaScript it's react

on the client-side and that's an

important distinction in what I

understand to be the jam stack in that

it's client-side JavaScript um Preston

had his decouple of Drupal across the

stack talk yesterday and a lot of his

examples there was a universal

JavaScript or like isomorphic JavaScript

component the handles be a node on the

server side of the first request a jab

CEQA is specifically not doing that the

JavaScript runs on the client side and

then there's an API you know the

definition API is pretty broad in this

case it's our Drupal API and you can put

it anywhere you control which is great

and especially from this app you know

kind of doesn't matter where it is long

as your app knows where it is but it

doesn't have to be like a easily

publicly available thing and then there

a is mock-up and in this case it's the

empty and build production bundle that I

created and you can put because it's

just that static set of assets you can

put that a lot of different places for

example I just put it up on github pages

and boom now I have this app that's on

github which is great I would say that

it's not really as static as I think

some of it jammed stachyose of gem stack

apps could be it's a little bit more on

the single page side of things but it

still falls into the category I think

however like looking at the marked up

piece of this I'm doing in that the

static markup I feel like that's the

kind of secret sauce here in that

typically the markup is statically built

markup in these jams at convocations

I've been also experimenting with Gaffey

which is a react static site generator

and that's definitely more on that side

of things where it is statically filling

your whole entire site but the question

that I want to ask myself about this app

and also as you start to get away from

the you know laps that stuff that you

might be familiar with that are playing

around this sort of snack is ask

yourself is there more of this app that

can be static and even just thinking

about this app I think there definitely

is so that first first request that we

have we saw the little spinner when it

loaded and it's hitting the API and we

got a little data and then render

everything but really that first request

is always going to be the same 50

results so there is no reason why I

couldn't have made that that first page

to static or essentially act as if it is

static and then get the data behind

scenes and let you filter it and then

also beyond that there's also the fact

that it's only really December where

this data is changing so this even this

data itself but kind of live statically

in there but there's more I want to do

to try to take advantage of the static

aspect of this and make it feel even

faster on that initial memory but

haven't quite gotten to it um so really

quickly almost out of time but let's get

to the hot melodrama here throw a lord

fan again myself as I was building this

is uh did we really need Drupal for this

project no we didn't baby though so if

here's somebody who is familiar with

this stack and have a way that you can

easily build an API something that

you're comfortable

I've done a number of times before then

you're fine

do that and that's absolutely great I'm

sure there are like really experience

with app developers or JavaScript folks

who have their go-to way to do that

might be something like firebase Express

or that but I don't really know any of

those things but in my case it was

definitely yes so I'm familiar with

Drupal and a lot of people here are

probably familiar with Drupal and

somebody I think who has some level of

familiarity with Drupal but wants to

have me add that powers something like a

react app really can be served well by

those API first distributions it was

really easy for me to get set up and go

and then I think it's also so effective

and some of those distributions are so

easy to get up and running that you

actually don't really have a go-to thing

for this it's worth checking out even if

you're not a Drupal person because

really what you're looking for is a

really reliable consistent API and the

things that you do within the admin UI

to update your API it's pretty great so

I don't think there really is a

black-and-white answer it's simply a yes

for me but I would certainly also

understand if somebody's like no I use I

don't know ice cream cone J s to make my

back-end that's what you do in

JavaScript

so and so I'm putting this together hope

it was interesting to people we might

have a couple of minutes for questions

also it's my first Dungeness talk let me

give me a month in Nashville so I would

really appreciate any feedback than

anybody has about how this might be more

interesting or useful to you but thank

you any questions or anything yes I

think you speak for that explain you

actually have confidence in rural that

you need to add or change certain parts

and I was thinking fall into place as a

API to be your multiple endpoints let's

say you've had multiple sheets for

different people and also some of their

like comments attached to something then

I think that this

yeah yeah that makes us great yes I'm

you said this was all client-side

reactants right so they're probably

Noble authentication that you have set

up with your plate yeah where is it

so the distributions also have signal

Allah so that's definitely a figure I

didn't really care if people could get

the responses from this end point I make

sure you can't like post to it yeah this

is a react have a server cycle well that

you can use if you wanted to I believe

it does I haven't done anything with it

I've only been in Paris twice did you

find new music new music actually I've

been listening to the Kendrick Lamar

album because I see it so much and when

I first listened to it I don't know I

had trouble and trouble coming along to

it at read listen there's past albums

but it's awesome it's really awesome

sometimes I feel like an idiot if I'm

blasting it at my desk oh I'm reading

code but it's really good

it's probably a good mix of all of his

different styles on one place alright

so what'd you think would be a

difference than losing the rest of water

and seek a mite what would be the two

different like being sick and it serves

as a big up writing a story you take

that I'm not so familiar with she can't

miss calico opened the portal

distribution for Google how they want to

know things you have any idea the

difference

the closing concert music they use for

envita yep I haven't used it sort I

really don't know but I mean honestly at

the end of the day partially from my

perspective it's just making that API

accessible and you know whatever does

that in a way that works for you is kind

of lying so that I think the biggest

advantage to these distributions is

keeping new that API without you really

having to think about it thank you