Scale By The Bay 2020: Scott Spence, Spreading the JAMstack

Scale By The Bay 2020: Scott Spence, Spreading the JAMstack

Recording: Scale By The Bay 2020: Scott Spence, Spreading the JAMstack

[Music] hi my name's hi super awkward my name's scott um i've been a professional web developer since uh 2018. prior to that i was like an analyst developer for large financial organizations and um like barclays fidelity and delight i'm married i have a wife and a daughter i'm also a cat dad there's leo boris and darcy um so before we get started a couple more shameless plugs sorry uh on one half of uh podcast called whiskey wednesday uh you can catch us on spotify or apple podcasts and we also have a youtube channel um so you can catch us when we go live then if it was starting up in uh just before christmas i work for a place called karmarama it's part of accenture interactive um and it's an ed agency um they do adverts here in the uk for like the army like a grocery store called lidl and guide dogs for the blind i work in a section called creative products where we work on the sort of digital products for the clients here and some of those clients include grocery stores like tesco's and sainsbury's telecoms provider which is bt british telecom and energy providers like edf and sse there are other clients which i can't talk about but i can say that we we do have large scale jam stack projects projects with them in production okay so icebreakers out the way let's go onwards so warning um i mean this is that every talk excessive use of gifs memes and emojis so sorry not sorry i need to make the talk interesting in some way and uh i usually like to do a poll but um because of kovid and we're all set in our homes we can't do that anymore so sorry about that um so that's um like the first five minutes of my talk done and the poll usually takes a while but jam check first up uh it's not jam stack anymore it's now jam stick with a lowercase jam so this was decided recently um by a guy called phil hawksworth who is like head of developer relations at uh netlify um they they didn't want to put any more emphasis on any one of the j the a or the m um this was coined back in 2016 so it's been around for a while um but more reason on the the name changed in a bit but the big reveal um apart from the new logo is what is what is a james deck um i'll come on to this but but first what's the jam in jam's deck so javascript apis and markup it's the the holy trinity of uh of the web of web development um but uh the james deck is not about specific technologies like uh lamp mean man whatever it's more of a like a paradigm shift on how to deploy so um like like a way of uh building websites and apps that help deliver better performance more secured projects and a lower cost of scaling and most importantly for for me a better developer experience i'll say most importantly i mean the um it does result in a better user experience all round um which are i'll come to uh in a bit so the the jam i have already said uh the javascript side uh takes care of anything dynamic on on the client on the browser um but it doesn't have to be javascript to which you sort of write your um your project in um as long as it um compiles down to javascript then that's fine because that's what the browser uses there are other frameworks which um you can write in go let's say there's a there's a static site generator called some things you go and you can write you can write anything in go and it'll just compile down to the javascripts at the end of the day so there's the uh that the a which is the apis so anything uh like server-side process or a database action these are abstracted out into reasonable apis um which show access to https um with javascript via your front end and these can be custom built or leveraged third-party services and the uh the markup html so the m is for mock-up and not markdown although markdown does render down to html so you can use um markup in say an application which would use that and pre-build your your pages for you so um what i want to say pre-build it's um sort of templated uh markup so you you build your site and then you put it onto a cdn somewhere um so these three parts here these are the fundamentals of the web of architecture um javascript apis and markup um so there's nothing you know no revelation here these are technologies which have been around for a long time and this sort of approach is also called a static site um which is which is what they are but there's a bit of uh like astigmatism around that uh so when you think about static sites you sort of think uh you know what comes to mind stuff like neopets myspace early early 90s sites um stuff like like this this is a reimagination of a knighting site for uh captain marvel and um you know sign our guest book and uh you know stuff like that it was um it was good the golden age of the web um so that's sort of jam stack um but you know the the definition isn't great which is why um you know it was coined as james deck rather than static sites um so what is static it's uh something which is it's a bit of a loaded term isn't it so lacking movement action or change so um it you know it doesn't give um you know you don't get very excited if you say i'm going to make you a static site but when you say i'm going to make you a james next site people go oh okay what is that it's um it's it's it's still a static site so um yeah a question i often get asked as well is is my project a jam step project so um it's it's a jam step project if you pre-render your pages and have it on a cdn or a file server somewhere um so if it matches that if it's pre-rendered on a cdn somewhere then yes it's a jam step project what is not a jam step project so um stuff which is monolithic server run web applications uh like single page applications as well which use um which which generates like views from the database and then present them to the user you know after doing a round trip to a database to get like a page view somewhere so things like wordpress drupal and squarespace these uh these are deemed as sort of a monolithic sort of projects and structures because when you get information from these they have to go you know via the browser to to a database somewhere get a page view and then bring it back to the browser to the to the user um okay back to the james that though so the jamestack is um it's not an experience it's not a specific tech stack it's it's the architecture um and um you know how you build um your site pre-rendering stuff um but why why is that important so slight tangent now so just bear with me why i try to illustrate why this is important and let's take a sip here okay so perth performance um so performance matters um there's this is why there's so many different ways to measure performance tt time to first bite time to interactive uh all the other ones i can't think of right now but there are many many ways to to to measure performance on uh in a browser and that's because it's important um you know speed is um it is important for especially mobile users um people want things fast um so performance has been a factor in google's ranking algorithm for 10 years now since 2010 and people are using mobile devices a lot a lot more now um than any other times so that's what is there's two indexes there's a mobile and a desktop but oh excuse me uh performance it will affect um how users in the range of your site and it will impact your uh your rankings your serp uh rank is search engine uh wherever i can't feel they are um so it will affect your search engine ratings rankings um so this affects click-through rates time spent on page and return rates for returning users and um this ultimately is it goes into conversions uh bears rates conversions conversions to where it really matters that's why i've put on extra emoji here to emphasize the importance um so paper one thing's fast how fast is fast enough um two seconds um is fast enough uh anything slower than two seconds you start to lose um nearly a third of your uh your users so this slide is from uh i think uh with google post this is from 2018 um so uh this number may have decreased um but this is just under a third of potential visitors uh you could lose in the first second so performance matters and uh there's some studies which which show that as well so the uh the bbc found that they lost an additional 10 of users for every additional second their site took to load so it's 10 10 loss of users uh for every additional second uh to load the site uh that's a nice small amount and uh pinterest reduced perceived wait times by 40 and uh this increased search engine result traffic uh search engine traffic and signups by 15 so in um a jam stack situation where you would uh reduce the perceived load time so just by the way both uh the bbc and pinterest these aren't jam stack but this is just a way to emphasize uh how performance matters um so uh back to the sort of perceived weight time um how you would do this you would have a static asset somewhere like a skeleton layout of your page uh with a spinner on it and then this this would reduce um you know it would be a perceived um reduction in speed so you think something is happening when you're just looking at a spinner but the rest of the site is sort of loaded in that's um how you sort of uh um uh you know have your sort of speed perception and it's the thing with with jam stack as well so if you have a gemstep project which needs to get uh information at runtime um so if yours your your jamestack site is it's all pre-built but there is maybe some user-generated information you need to get then um you would have your jamestech site um like the skeleton if the page already loaded in uh straight from the cdn and then there would be a small delay while you wait for one of the apis to bring back some of the user-generated data um so uh that's just um a sort of quick overview of uh perceived uh perceived wait times so um in a jam state situation like i said this is achieved by pre-rendering uh some of the the page so yeah this is 15 increase um from reducing your perceived wait times okay back to static so benefits of the jam stack so performance which is why we had that slight tangent um this is no work to be done at request time so with static we get performance out of the box so we have um our site built um all of the pages pre-rendered put on a cdn somewhere and then this will just go from the the browser request to the user's eyeballs um quite quickly so there's no there's no uh work to be done request time um as it's all waiting for it's all waiting for you on a on a file server or a cdn security it's um you get added security there's a much smaller stack to manage secure and protect um so i'll come on to that like a traditional dynamic wood project uh works something like this this is a simplified example um and obviously i'm gonna tilt it in the favor of james deck but this is a sort of uh how a typical dynamic web app would work so you'd have a request from the browser and there may be some precached resources on a cdn um and then this could go through a load balancer to an origin server that might be sitting sorry might be sitting behind a load balancer and to get uh do your web server stuff get your page view and it could be logic on there to do your routing um and then maybe um more you know add some more information to to the cdn for subsequent visits again um so from the database server and then that's like that's a round trip back to the browser again into the user's eyeballs so there's there's quite a lot here to secure and protect um especially with the the web server database server and that side of things um with uh the jam stack like i said this is simplified but this is the sort of the a bare-bones gemstack site you know for your browser which would go off to the cdn and then the site would be delivered back to the user any dynamic content like user-generated content can be can be retrieved at runtime if needed and this can be enriched further by um uh by the a in james deck with uh any any apis so um the the gatsby team who are uh guest b is like a static site generator they like to be called a progressive web generator um but um you know they're in the same family as as the other tools i'm going to come on to but they refer to this as the content mesh so this is uh you can have like auth whatever sort of api services can you have [Music] your cms your whole cms you could pre-build um your all of your pages from a cms build time and push them out that way so any sort of uh plus you know any um user generated content can be retrieved at runtime um so this is like i said it's this is empowering for uh front-end developers much smaller stack fewer things for the developer to manage and now front-end developers are sort of full stack developers as well because we can deal with we can deal with the whole stack with uh services like uh netlify and uh versailles where um we can do the whole thing end to end with those sort of services um so this the the jam stack although there's there's no new fancy technologies um you know there are new technologies on the horizon and we have uh you know modern sort of evergreen browsers to to thank for that as well um we can leverage these uh the capabilities the browsers have as well with a new frameworks uh or meta frameworks there's one called toast which is an es module's first framework which means no uh no bundling no webpack so that would sort of greatly reduce your uh your bundle size uh which is uh it's quite an exciting thing so you could have um say like a very big interactive um like d3 graph on one page and it wouldn't affect the the bundle size for the rest of the site because with vs modules you just get the what's needed at that time loaded for that page so um things are looking good in in on that side of things as well but this is uh that's going to be over the next sort of 18 months i think we're going to start seeing a lot more interesting stuff in that space happening um so yeah the the toast uses like i said the es modules so it's like a static dynamic import syntax directly so you start you import like the let's say d3 directly into the browser and and run it from there it uses rust so it's not um javascript per se you can write javascript with it um and it compiles the javascript with rust so it's super duper fast and there's also other tools like snowpack which is along the same lines as um how uh toast works okay so um like i said with um the gemstack we are enhanced with a rich ecosystem of services like versailles netlify um versailles and netflix are both great hosting and service providers this is where you can create your own apis as well or leverage third-party ones netlifer have great uh forms um you can use forms with data file as well it's great and cms's graph cms and uh strappy both really good um cms is there's others like contentful there's there's a lot of cms's in the jam stack space i just picked out these two and payment as well snip cart um they're a good player in the uh the james deck space and uh stripe uh thor has done many a good tutorial on how to use stripe with a gatsby site so this is really impactful for the processes in an organization with a simplified stack means less time spent provisioning resources and like i said before like a smaller stack to manage so static site generators these you can see next js on there i i'm very sort of javascript biased um i'm sure there's other great ones out there um but like i said you can build a jam stack site with vanilla javascript guest pjs next js next js since version nine i think it was uses guest state props and get static paths so you can generate your static side of things so um next js is uh like the best of both worlds you can have both dynamic and static at the same time with those two apis getting static props and get staked paths pretty good um so those are great state site generators aren't new um my first blog was built in jekyll um jekyll's been about since 2013. and that is ruby and uh i think um nunchucks uh handlebars maybe uh some some tim playing language like that so that's what i'm saying this is not um anything new or sort of groundbreaking but the the the sort of the api services and tools like uh netlify and uh versel are making things um enabling sort of us to move a lot faster now um so gatsby is my gem stack i like to use gatsby a lot like i said with our production applications we've got at least uh three uh gaspi sites in production and we've got quite a large scale cms one as well but i can't talk any more about that um so yep gets me do like a bit of gatsby so james deck is like i said grown in popularity there's quite a lot of jam stack sites around um some which are just like informational document sites even i've got the the react.js in here uh the the gatsby store where you can buy your gatsby socks um that's uh obviously in a jam stack site um and that's it how are we doing for time so five minutes early but um yeah we have a couple of questions in the um in the discord but i think you've got time to wrap up and cool so um yeah i mean uh just some good resources here uh remotely interesting podcast it's the uh the developer advocate team and netflix and that's where you go for your uh the new hotness in in jam stack because those guys they're um obviously they're they're at the the coalface of of what you know where it's all at so uh definitely a good one to listen to uh steak gem staticgen.com um is just your list of uh static site generators jam stack wtf is a good overview of the james deck and then these ones here this is where i got the stats for the bbc and pinterest from and uh there's a very last one for uh saying due to amp and amp is like the pre-compiled google pages you get when there's like a simplified view of your site and basically it's saying don't dismiss amp amp is still going to be great for your search engine results even if you don't think you need it it's something which you should sort of put the effort into doing and it's something which i'm kind of looking at doing personally as well but that's a good read and is that it that's it you