Jamstack Fridays with T&T | Jamstack and beyond with Alex Shyba

[Music] so [Music] [Music] [Music] so [Music] yo we are live and we have people waiting and watching how are you tony good good how are you i'm all good so are you ready to rock shall we play an actual intro video and then go get it let's do it let's do it here we go this is gem stack friday with tnt [Music] oh man it's so much fun to edit intro videos like that good stuff isn't it so my name is tim and i'm tony there we go that was how we discussed how we would do our intro anyways so we are both kind of fetter and web developers and we love gemstack and that's why we have gemsec fridays and so we wanted to start with tony actually going a bit over the news of this week in jamstackland yeah we have a few a few things that have been announced this week so contentful has launched two little two apps uh one is called compose and another one is called launch so come compose just looking over there [Music] news release because i actually didn't see this one so can you go over quickly what those are yes so the launch is allowing you to schedule stuff from basically from what i'm understanding from the release i haven't tested it out yet it was announced uh just beginning of the week and you can what they say is you can schedule and publish the most complex releases with launch now and with compose i'm guessing you are able so compose does one thing very well supports the production of web pages if your content team publishes content to other channels such as chatbots or voiceover control devices they may when want to work in this web app so it seems that it will allow to compose your content uh better and ready for enterprise nice that's what they all go for right yep yep yep cool all right what else we got we got um we got the next one i have on my list that i dug up this uh beginning of the week was cloud nary announces a media optimizer uh yeah i've worked with cloudnary many years they're pretty cool so kind of funny i've actually worked with cloudani before this went out and it's a super cool thing so maybe you want to describe it and then see if i if you understood their marketing because i helped on that all right let's let's let's give it a try so their blog media optimizer you get start immediately connect immediate optimizer to your media sources so i guess what i'm seeing here you're able to optimize your assets so this this actually helps out a lot with when you're building the jam stack size because a majority of your site consists of images and that's that heavy load right so now you're able to do everything within this platform to help your develop so you don't worry about going and uh i don't know decreasing the size resizing everything so i haven't worked with this so but so cloudenary has done this for like 10 years they're kind of the market leader but now it was always it was not complicated to do but there was a lot of stuff going on to make it work and then media optimizer is like a simplified version with like super smart defaults so you just plug it in have a base url before your image and it just works so they do automatically affif or web b things like that and automatically doing quality optimization so it's kind of like a simpler way you can just plug into any website and then it optimizes and you know largest contentful paint will go down by a bunch so that's pretty cool yeah it's a nice thing to see in our gemstack world we should use it yeah the lcp definitely is a since uh the new google vitals that are kicking in in may exactly yeah so they say that more than 47 of desktop websites must improve their lcp so there we go this is this helps i guess yeah all right what else you got uh got few events coming up so we got um netlify event uh migrating to the modern web so wednesday march 31st um we can post some links later yeah sure so they're going to be talking so there's a lot of interesting speakers and the agenda is it's all just one day um and uh it's gonna run from nine to twelve pdt so should be nice should be good stuff i like uh those those kind of events that are developer driven so gems people who are in gemstock world definitely should attempt that um there's one more event uh content is data that's a sanity uh the the headless cms sanity uh is doing hosting that event that's march uh 25th uh that's next week so you're joining you're going yeah i would like to go i'm gonna let me see who is on the let's see who is on the on the agenda uh we got contents data product launch oh i see a familiar face i see a e-commerce round table uh ceo of uh uniform lars is going to be there nice that's nice um so yeah this is going to be an interesting event let's uh let's see what this headless ms brings to jam stack world um let's see what else we got oh i missed one thing um so netlify uh posted something on their blog uh try the new essential nexgs plugin so there's now an xjs plugin on the platform so i think you can just to run nexgs on netlify because i think nextgs was always like kind of towards versailles and it just was just very uh everybody who was on xgs would go and deploy it and purcell and now you can easily do this on on netlify yeah i guess they felt the heat a little because furcell was like very much focused on next yes of course and so they can add all these cool features automatically so um let's let's keep talking about netlify a bit that's right because they have all these extra super cool functions and they have like these cdn edge workers and all these other things and we actually have a really cool guest today called alex shiva that we're gonna add to the stream right now there he is because hey alex because alex actually knows like a whole bunch but well basically he knows everything about web development and stuff like that we can ask him all the questions but in this case he also knows a whole bunch about like these edge compute kind of things or like several functions how everything kind of mixes together so today we actually wanted to talk with him about this stuff but before we dive in alex introduce yourself please hi uh hi everyone hi guys thanks for having me um my name is alex shiva so i'm co-founder and cto of uniform on previous life professional life uh i was 13 years at sitecore so sort of contributed to building what was cms um turn this in into digital experience platform so that was an interesting journey of um kind of going from just basic sms functionality to um to to something quite quite powerful and headless uh cms capability this is uh what was my latest contribution to to the psycho ecosystem uh what's known cycle gss so i let the team uh from ideation and a left slightly before uh the release took place so though that was last a couple of fun years pretty intense i would say yeah it was it was definitely fun this was my first job out of college and i learned a lot so yeah let's sorry continue there's much more to say i guess no no just in in the current capacity i'm sort of wearing different hats as you can imagine sometimes and uh in in product engineering mode sometimes in strategy sometimes and in in sales and business development sometimes in accounting and uh exactly bookkeeping which is not what i expected as a founder but uh i guess i would say startup life right that's how that goes i gotta gotta do what you gotta do yeah so um let's jump into this edge compute stuff because we thought it would be fun if um tony and i could kind of try to explain what we think that this act computing stuff is and then you can either say oh yeah that's smart or oh no that's not it so how about no tony go first please let's see if we actually get this stuff uh let me give it a try so utilizing the com the edge compute power to do some serverless functionality i don't know that's my mic don't laugh alex what do you think that's good in my in my mind serverless and edge computer sort of siblings uh i guess um what i think about edge i i think less about serverless more about origin less right so in in this more modern world the uh the world origin sort of became a dirty word in a way this this is associated with a lot of pain right scaling the origin scaling the servers uh keeping them uh alive and handling deployments cold startup times you know heavy stuff like that that's what i have in in my mind and edge sort of something more lightweight distributed by definition right it's it's still somebody else's computer but it's um it's it's sort of allows you to think about your application quite differently because you bring the execution closer to where the users are so minimizing latency and maximizing scale so aren't like this edge compute stuff isn't it just basically serverless functions tied up nicely with a bow um in in in a sense yeah and tied to the um the web server request response model right so they're not just i mean they can be standalone like running your api but they can also participate actively in request response handling which gives you this pretty much blurs the line between the traditional origin based processing where you know you get a request you process this request you do some smarts around like device detection context resolution right and then you provide uh personalized or just bespoke response to the user based on the the request context so that's sort of processing tied to ability to rewrite responses html responses json responses makes it possible to to do really cool stuff right okay so that's that's the one bit i kind of lacked in this knowledge is it's actually connected to the like the request response of a user to a server where a serverless function or a lambda function just lives somewhere and you do something with it or not and so this is actually much more like super nicely it is basically like web workers or service workers would do on a client where it can also interject into the network stack we can also do this now on the cdn and then serve cached stuff or do something so you don't have to reach this origin that's cool it's probably easy to scale yeah and it changes the application development paradigm as well allowing you to program cdn which we historically right we're able to just cache some static assets it handles compression distribution nicely but now you can do so much more uh interact with it deploy code uh to to cdn and sort of not worry about scale you definitely need to worry about what the code that you're writing but uh the the scaling part if it's a well-written code it it will just scale uh it's i think it's it's definitely a new age we live in the new age yeah so when when we speak about cdns things like uh obviously scalability comes in privacy and security um it's obviously a scalability and speed so that allows to to scale and how does it like how this specifically like h handlers that netlify now like has announced recently well not recently but not so long ago how does it compare to other offerings that you've seen kind of that's available out there for me it's really the integrated experience the integrated development experience where i i can do the work on the functions on the netlife functions with edge handlers and do my you know traditional web stuff together right in one environment do the build run everything locally uh so i don't even have to deploy to network fine or to sort of get get a sense of how it works so dev experience is that's that's always been a key differentiator for an amplifier i think um actually i have a couple things to show you if that that could actually help sort of conceptualize this a little bit better yeah cool because i actually also kind of want to know if we connect this to jam stack again what are like good use cases for this but i feel like you're just going to show us yeah use case there's plenty but adding dynamicism to your jam stack site right that's to me that's the crux of it all whether it's making sure you're not serving um protected content right to folks that are not authorized or making sure you provide you know dynamically uh surf content but also have the benefits of fast static base delivery so sort of augmentation of traditionally static sites that's sort of the major theme i think of of all these capabilities yeah because we used to do this just with like hydration and javascript and ajax calls and stuff like that but now we can also do this with like the rendering bit which is super interesting because a lot of people don't actually have super fast devices or super fast internet so if we can kind of have a semi server-like rendering that would really help i think that's that's the new age nothing is going to be on an origin anymore so how about share your screen and let's have a look yeah let's check it out so let's see how that works yeah i want to see some stuff okay here we go all right so uh we we have this beta account enable enabled with handler so i did some deployments of this really simple site um so this is a static site with hello world and then there is a secret page that just says secret right secret nothing terribly exciting so um this is the actual project in the netlify folder that gets deployed right so we have the index.html file with hello world and we have a secret folder with index.html in secret and that if i tumble file is empty so that was just something that was deployed through netlify cli now with edge handlers when they come in it's uh super straightforward to add it you just create create a function naming is important so name this function this will become the name of the handler this file and after that you need to bring in the tumble file changes and this inside of the snap of itomo file you describe the location of your handlers folder called handlers and you need to attach the handler to a particular path in this case i have a wildcard path matching all paths and i'm having a handler attached to all paths pretty much so this is actually different than the lambda functions thing it's it's actually an handler's folder it's truly different yeah so this to me is still new so this is cool to see it's new in it it runs on netflix infrastructure instead of uh aws lambda so it's oh really oh cool yeah exactly nice no accessible sorry go ahead yeah so now we have this function running it doesn't do anything and notice i did netfly dev dash dash edge handlers here this this is starts netlify dev local version of netlife with h handlers and this is where awesome dev experience comes and so this def um property that you add after netlife is basically your yarn def right it just wraps it yeah it runs netlify cli and and with all of the netlife requests uh yeah handling retrospecting it runs functions it runs handlers now so that's that makes it super cool to just develop locally with that oh yeah because now you get your whole tool chain that you would have in the edge you have it locally exactly so now do let's do something dynamic something really stupid right we're going to rewrite the response of our pages and we're just going to return h1 with the current date in there and status 200 right so i save it i refresh it so here we go it's i didn't even have to stop the server so now all of my crazy pages so this is so dynamic now is this actually running in the on the edge now or locally kind of runs locally if i want to deploy to the edge uh netlify deploy command that's just build so now i just deployed the whole site and i should be able to see the same how is this so fast this is crazy yeah it's already working fast i i think i'm hitting some uh really close server as well very close yeah it's uploaded a couple of files um yeah exactly if i want to do something a little bit more compelling right like we have the secret folder that we want to secure right uh so i can do something like this check if my request like interrogate my request a bit so check if my request url contains secret i mean this is silly change but um demonstrate the on request function here that's a function that netlify um chose for you right that you have to use so that's the entry point right yeah exactly i have access to event and i can integrate request i think there is a way to fetch uh headers there is another async function that allows you to get more info about the request so i could maybe interrogate client ap so if we have a customer that actually have this concrete problem they they want to secure some non-production sites in netflify by ip right so that's a perfect way to do that you just throw in a handler in front of it interrogate client ip and then based on the list you just issue sorry bye bye 401 x is denied so in this case you short circuit the request and then your response with something something different right so just just for a quick use case question let's say i am doing some searching somewhere let's say an algolia search oh yeah there's your secret thing so if you put it in it actually works it's just returns for one unauthorized on yeah that's awesome because you just go to that's so simple so you could do your whole like login experience like this and for example if i wanted to do let's say an algolia search and i didn't want to use the client-side library and i didn't want to use a lambda function that i ajax called to when i go to the to your specific url that searches something could i use this stuff here to actually do the query to algolia and show it or is that a little bit crazy i mean technically you just take over the api path right and then plug in your own function yeah exactly function right something like that search and have a search function here a search handler and uh yeah you can do i think you got to be mindful about kind of what you do in terms of network i o in this handlers yes a little crazy potentially right yeah these are really built for right stuff you have on the request you get that access this is your contacts and then you act on it as fast as possible in return but possibly i mean the sky's the limit here but uh i think there is always an asterisk involved in anything edge compute you want to be mindful about potentially hanging stuff that you could have right here um so um with the interest of time in mind would you mind showing a bit of personalization stuff with this because that's what we at uniform love to do of course and i guess this might be a really nice way to show that because we kind of use these edge workers to do that right so yeah so before that i i want to i wanted to show also cloudflare flavor of this yeah sure sure real quick and then um show the personalization piece so i think the next frontier for for for all the edge compute is it is ability to run code right as we as we've seen yeah but also storage like ability to access storage at the edge is definitely another missing piece um so you can do really uh compelling stuff so this is an example of how you can do cloudflare worker with attached storage so there is a kv storage attached to this worker instance allowing me to essentially interact with it and read some keys so imagine if i have a visitor profile right and i can i have some data about the visitor i can read it from the storage and then based on that make a decision what kind of message to show so in this case we could have a cookie providing some identifier for the um for the request right and then we can read a particular value from the storage and then we do that right on the edge without any additional i o which is really cool so in this case this is the uh worker site that just returns us stranger and how's life in the country right so we're also able to oh you can figure out information and this comes from cloudflare basically because it's it's kind of their system right exactly um so we we we haven't set anything here so let's uh let's set let's waste another guide here and i'm going to send set a cookie visitor id equals this new guide right so now i have a cookie in the system with this visitor id value and what i want to do right now is set my profile so using cloudflare apis i'm actually writing into the storage so imagine this is some sort of sync job maybe it happens from a crm you you have visitor id reconciliation and then you you want to write maybe a profile if you're a developer or marketer so i'm just going to write that in the cloud storage and then should be able to refresh this and see hello developer so edge function interacted with cloud storage resolved that this id resolves to a user there is a key for that there is a value and then based on that value i can do cool stuff like personalization but it's like sky is the limit now this is crazy we don't need origin to do all these complicated things anymore no because that that storage that you just had is probably also distributed and can scale and it might have like small caches and wow yeah it's distributed uh around uh cloudflare network and this is using kv storage um i think they there there's also another uh even more um available storage um coming out soon from cloudflare so it's it's definitely an interesting area to look into yeah definitely so that's a nice segue into our lovely demo site here yeah so the way we're leveraging these capabilities this is an example of a gatsby site uh built uh with with contentful and deployed to cloudflare workers rights and we also support the same on netlify edge handlers actually the moment uh enlightenment uh moment of enlightenment came in when the same approach that worked with cloudflare workers just worked on netlify edge handlers so that yeah isn't that cool no code changes so this is this shows personalization based on behavior right so i'm gonna go to the developer page go back and i'm seeing developer hero here so now my home page is personalized but if i want to go and disable javascript right and refresh the page my page is still personalized so it is personalized at the level of edge worker right not not client-side uh there are options to also maintain client-side personalization when needed but now at this point your edge contains one of the most important capability of traditional usual digital experience platforms is personalization execution right so you can still configure it in the in your back end configuration can kind of weave together with your code but the execution of that personalization that could be a job of your app or it could be a job of the actual cdn so if you want to maintain all this and make it work in your code base does everything stay in the same repository and it just gets distributed on the cloud by let's say netlify or whoever handles it is it like one repo for all the code just like in our old school monoliths or because it's just in a handler's folder now so it's it's quite simple it's quite simple at scale maybe you you want at some point decide to split out you don't have to and that's that's where the entry barrier here is pretty low like you can just add it on top of your existing xjs app or gatsby site right and then enhance its static delivery with some interesting dynamicism maybe localization right maybe yeah you want to handle certain certain requests from certain regions differently stuff like that it's it's definitely a cool paradigm yeah so yeah with the interest of time i actually put this like this to see how this interface looks um alex this was awesome and you know what we kind of had in mind how it works but we def we didn't actually try or at least i didn't tony i'm not sure how about you but it kind of opens up right yeah because this is the thing i'm always telling people you don't have javascript until it's loaded and if you have a whole bunch of javascript suddenly it's actually kind of slow and then if you want to do all these things client-side you kind of kind of see it like pop in and then you have layout shifts and stuff like that but what if we can do this complicated stuff actually as a handler so you don't need the javascript for the complex stuff and then you can just enrich it like progressive enhancement it's kind of the new way to do stuff in my opinion i really enjoy this so thanks for showing us alex even though it was relatively short it it gave a bit of magic and i like that gotta get a demo into one of these you know yeah man we're gonna just go and live on the edge and and try our um uh like demo stuff and there was no demo effect it all worked so you've probably done that before maybe a couple of times a couple of times exactly so um tony do you have anything to add or are we done for the day i think this was good i think we can probably wrap it up uh summarize uh what we've seen um but yeah that disable javascript definitely mind-blowing for me uh because now the brow there's some browser that can disable some functionality and here we see javascript being disabled and still everything is working so exactly so yeah i think we can sum it up so events don't miss the events that are coming up in following uh following few weeks uh we will post our the news that we gathered uh throughout this week and maybe we can ask alex to write a blog and then we can share with our uh audience how all of this works that would be good because we have a new blog on uniform.dev so we can actually write about this stuff that's good so alex thank you for your time this was super cool and also this was our first episode so bear with us it seemed to be going well we have some people who are still watching which is super cool for us thank you dear watchers um and we will be oh no i have to say it we will be back next week cheers everyone awesome thanks for having me guys thanks cheers bye you