Storybook & Drupal: Seamless integration

[Music] okay hello everyone and welcome to storybook and Drupal seamless front-end integration for decoupled sites this is exactly why you should never let the marketing team right here your take them for you for your presentation so M yeah let me tell you a little bit about me so that's me my name is Jimmy hollered and I'm from Scotland so like if you don't you from Scotland is it no I think everyone does but yeah so if you don't understand me than him I mean you're probably not the only one worried about them yeah this picture here I thought you can already see my face so I thought give you some cakes there Ritz Hotel in London when I was taking afternoon tea it was very nice you should go so yeah into so this is the agenda we have a 50-minute talk this was originally supposed to be a 25-minute talk so if we came here to stretch in a little bit at the end you know why I am but yeah and for those of you that you probably be able to see that that doesn't exactly make up the fifty minutes if you add them up but yeah once a few minutes between prints so yeah cool the intro so the first part of this is mostly going to be like slides and some words on the screen and then we're going to have and some actual code and whatnot so I was boasting to everyone the last few days and that life called them was a dumb and you shouldn't do them because they go badly and all the rest and I was going to had this big plan of making like videos that I would just play a pre-recorded and then I was like man this takes a long time so you get a life called demo and you get everyone gets a little demo so yeah okay so that is a completely blank slate then it shouldn't be and I have no idea why just give me one moment this is started well yeah there we go ah so I don't know how this legs work so yeah and I'm easy labs we we do two types of decoupled and websites we do the Phil decoupled can react front-end stone and we also do what we call progressively be coupled or some of you might have heard a semi decoupled or softly decouple and so when do we decide or how do we decide to do each so the first one is quite obvious when you have multiple front ends and obviously you and want the bill to provide them abstraction layer behind that and and if a client requests it than you do it because they're paying you money for it and the other save is if you have a single front-end and mu prime development a front for the front-end then this is easier so what I'm going to take you through is roughly a a demo of our integrations with storybook using a sort of switch that currently in development super bleeding edge project that's preview and also I'm going to talk a little bit about our tool belt and this is like in a beginner talk so I want to make sure that everyone has something to take from it so I'm going to tell you some top secret and easy lab stuff that I had to get permission from the CEO this is the CEO busy lapse by the rasoi you know like clap really low at the end please I can play my mouse cool so I'm predictive of the coupling how do we do it and white so first of all and we use three very vital modules first of all graph QL which I'm sure most of you have heard of or I apparently use it and graph QL TWIC which allows you to police graphical fragments along sight to make templates or alternately inside quick templates a few people who have never seen it before they go insane templates we'll get to that in the morning we'll get to and the components module that's something if anyone knows my talented colleague John Alban Wilkins something that he built and it allows people to essentially and use twig namespaces to pull in templates from somewhere else and I'll lose wants to use storybook as the basis for our themes so it's pretty built and why do we do it well it's easier to be honest that's a pretty pretty good reason and cost less money to do and we already know twig from UM Drupal development I guess so we don't need to learn react or any other front-end technology and we control the data flow which is the real bonus of graph girl and my friend here actually stood over here I borrowed a little bit from his presentation he is doing if you're interested in this he's actually doing a primer on graph QL and tweak tomorrow and so you should go and see that Jake it's pretty cool so and if we want to talk about how the Drupal full works just briefly so Drupal and accept requests map set and to the controller fetches the data builds responses pushes it through the theme and you have videos pre processes and hooks and stuff that fired off and I'm sure most people have if that you worked on any of the sort of back-end style front-end development on Drupal is you know a bit of a pain some things and this allows us to essentially take control of the entire data flow so talking about sequel and templates may I don't know if anyone is old enough that you remember back in the day yeah there is so we used to have like PHP and get and sequel fragments and stuff inside PHP templates you know remember that was disgusting this well when the whole world of development left us because we used PHP and their I mean they still do but you know they have less justification to do so so often when we tell people that we put graphical fragments directly and say templates or along say templates they're like well why do you do that you're a grown man well actually yeah actually and it's a good idea and I'm gonna tell you why so um it's a little bit different obviously from pitting sequel fragments or you know directories going to templates because as we all know because we are all very educated people graph QL is an abstraction over at least that's the work it's not the data store itself so graph kill doesn't care about the implementation behind whatever is happening it just cares that you have a fragment it's going to execute it in return whatever utility return so that means you can grab the data push it through the template it's pretty easy and I'm going to show you something that gives me the chance who has seen this before so yeah so yeah this is a I actually have some sublime text stuff up here I wonder if I can hey just so I don't know where this mouse goes that's not it so I'm gonna pull this over here sorry there we go so this is the plain things so now like I'll be honest this is Drupal 7 because we don't do this for Drupal 8 because we do a lot like progressively decoupled and web sites but this is an example from a triple7 website that we that we have in production currently and there's nothing like specific to the client so but I mean that's just one preprocessor we have in our themes because we like structure and organization I don't know how many people know about amazing labs but we're Swiss company I'm not Swiss but you know they love their organization and their structure the Swiss are crazy for that sort of stuff so yeah we have entire directories that are like pre-process and then we have separate files for nodes and views if we have to I don't know why you would want to preprocessor better happens I've seen it it's nasty so yeah this is the sort of thing that we want to avoid so let me go back to the presentation and I think I've skipped a couple of slides there as well but that's all right filled so yeah that's exactly what we want to avoid and I was my speaker notes again so nice two seconds this is going really well where is the does anyone know how this works that one that one aha there we go Thanks so yeah one of the things that I want to talk about is the the process that we have at Media Lab so we're going to get to the storybook the good stuff shortly but I want to tell you like the stuff that we build around that have you actually building websites sooo our development stack so we have something this is the top-secret stuff by the big like forget about storm you know 51 you want the storm Amis elapsed we have some top-secret stuff going on so we have something called silverback and it's actually a publicly available repo and I'll actually pull it up on the screen shortly and and it is a development by an environment that allows us to quickly spin up Drupal websites with all of that of the things that we need in every site that we seem to produce or at least 95 percent of them the saves time and their Arcana is called silver back after the gorilla you know silverback gorilla and it has four limbs so we have the developer experience which allows us to quickly spin up a Drupal website just with bare-bones PHP 7 on your Mac or whatever you want to use and rather than using something like docker or virtual box and finally that's really quite a good then question who uses like docker containers or something similar in local development bill and who uses like virtualization like a vagrant or something like that yeah and does anyone use like a month or exam for anything like that yeah it's a lie like so yeah I mean obviously so we've all used these sorts of tools and they all have their advantages and disadvantages like the virtualized and like things like vagrant and with VirtualBox like is huge like 2 or 3 gigabytes sometimes and boxes you've got docker containers which although they run incredibly quickly in the cloud as we know very well Misha here is the CEO of amazing oil which is a hosting platform we have something called Lagoon so afternoon so funny cuz I'm Scottish but I hope you understand what that is and and that is blazing fast but when it comes to most of us are quite trendy and we use Mac's except for the ultra hard words that use like I've been to or whatever and it runs like a dog quite frankly is like absolutely sick dog at that it's terrible it's really slow like trying to like you know rapidly develop something for a dame or whatever and this there's not a good developer experience so silverback basically allows us to install and a Drupal install profile using SQLite as the data backend I am vocally using PHP 7 and mysql or mariadb would be it would be a performance improvement if you wanted to add that and you can do if you want is you you're not restricted to that but if you just want like two or three commands then that'll get you there and so that's the developer experience we also have M graph QL as the core and because obviously most of the stuff we do know is at least progressively decoupled sometimes filly decoupled and workspaces who here does anything to do with internationalization hello but yeah so one of the cool things and difficult things about working for am easy labs is that obviously we are based in Central Europe and Switzerland so many of our clients are english-speaking but they have markets in Germany and or alternatively the existence whistling themselves it's which obviously has three main languages they speak Italian French and mostly German so we have to cater for our clients who need to communicate with all those people so yeah workspaces is essentially are we of separating out different internationalized content areas so you get to have like a German language content area and I think language one or an Italian one and they are completely distinct from each other and you can pour it the content between the two and create translations and they live in the various different places it's all within the one Drupal site think of it as like an improvement on multi-site if anyone's ever used Drupal multi sites like we used to use them quite a lot for internationalization so this Cana it gives our editors like much finer grained control over markets and we also have something in there that we will be releasing to the public quite soon called de Liberty which is I can entity system that allows us to deliver content between workspaces as a package with media objects and that sort of thing so we have a might like to sit in the appliance and I lived in name-drop yeah yeah so we work with Daimler or dema we make public like they have like smart and receive these bins and all that sort of thing so and they obviously have global markets so currently we are building their content platform which has to deliver content to something like 50 different language markets so workspaces and and and deliveries are really important there and then the final limb of the beast is the editor experience so who uses paragraphs quite often on their websites no how many people I expected more actually yeah well the it build okay because I was going to mention that later that's pretty cool and so we have an editor based on cq5 added editor five that M basically allows you to build M we call it sections so rich content experiences for content editors that looks exactly the same in the editing platform as it does on the front end and I will give you a little theme of that weekly but it's obviously you know over school for this talk so obviously we have Drupal we have storybook which is there a pattern library will you Cyprus for browser testing so many people rose up testing but we found it really handy and a little chat over to n VAR c i don't know if anyone's seen that but as they can't basically like a UNIX based environment switching tool that you know means that you can define n files locally in your development environment and you know that takes care of all of your environment variables and so let me just take it so yes this is a this is roughly the the input you need to create a project from silverback so and who uses em drupal composer or something similar now to Tehran yes so pretty much everyone though it's I mean it's an awesome thing we're finally off the island and into the modern world of package management so yeah and you create the new project using Drupal composer and you require amazing labs silverback which is our and roll your own package and then initialize the thing we used there m2m read the Empire C files that I was talking about do another composer in stock because you need to make sure you get your patches in and then we use yarn as our front end and front end package manager so go into the good stuff the stuff that you actually came to to see so and who uses pattern libraries or UI component libraries yeah so quite a number of people so this is a beginner talk so I apologize apologies to those people who already know what pattern libraries but will I have to cover everyone so yeah they're known often as mu I component libraries and they allow the production of atomic design systems and which allows us to break their website way up into basic components and that means we can build implementation from those components and in theory things get faster as we go on and there are many well-known video so material design by Google does anyone use that it's pretty cool I mean is to me it seems a bit like github or what does get abuse the front entry and what bootstrap so it canine it seemed that it feels about bootstrap it to me so I'm a big fan but then it's the same patterning lab which is one of the first ones that originated storybook and there's about a million more and and a pattern library the actual idea of a pattern library was coined by a guy called Brad Frost four people know him they were really famous front end guy and yeah so that covers that Y story book sorry he's a JavaScript it's JavaScript you know yeah yeah there we go finally good reagents so yeah it supports it supports Twix and we already know quick because we do front-end for Drupal that's great it's an add-on it's like they literally just call it storybook HTML and and it's a plugin for and first of all really by the way just to see like we're gonna have Q&A at the end but if anyone wants the show put your hand up like feel free I'm happy to to do that so when yeah it has lots of useful plugins one of the ones we use mostly is accessibility so it actually will live analyze you and your front-end components and tell you if they break any accessibility real sleek you know wrong font color or size or if you don't have alt tags on your images that sort of thing and you can use it to mock data which is what we really like because it fits really nicely in with our graph QL paravane I'm a sports type script though I don't know if anyone uses tape scripts but and tape script is like the I guess the superset of JavaScript so you can use plain old JavaScript insane tape script but it's much easier to like debug you know your editor should be able to give you all of the properties in a tape script object and that sort of thing so it's really easy and like I think it makes you look cooler if you say that you mind what you use on your tape script you're just on JavaScript that's not so good so yeah make sure that came to kill that way and as we all know like development is all about looking cool so and also supports react so that helps us with if we're doing the Philly decoupled web apps then obviously we can we can build it in react as well and I should say at this point by the way just so what there I'm actually a front-end developer so like and if you have any really really like in-depth front-end questions Joe Melbourne Wilkins is actually at the back of the room so you can ask him and he'll be able to tell you and who so I'm actually because I like it this is storybook here and this is all the things that it supports so you can see like react through our native view angular HTML she is like it's really really cool I'm about 10 million plugins that you can get from it yeah I would thoroughly recommend that you check it over few and they were used it before easily super cool you know anyway back to it so yeah that's that for that so um the good stuff this is the live good demo at this point I'm wishing that I had actually prepared the videos but I am here we go so let's switch to this I'm gonna come out here for a minute sooo so this is them like I said before we use our silverback this allows us to serve Drupal websites from Drudge so literally we just run Josh Seraph once you've got it installed we use a command silverback setup and it will actually install it but takes away like you know I don't have that many jobs so you just imagine you know looks a bit like a buzzer and then if we have a tribal version here we go so this is our and this is M based on our website that we apparently development developing for production so I've had to remove this sort of branding stuff so there should be like a logo and things there usually looks a bit nice over you know we can't use people like that and then was so yeah this is a silverback installed and this is progressively decoupled and let me go through exactly how that works so the first thing we need to do is create a theme so I'll get phpstorm on presentation mode cool so um the components module that I was telling you about by the John rule and this allows us to define this in a Drupal and the info file so what this basically tells us is that we will have a library of em twig components that exist somewhere else and we declare the path here so I wonder if I can get the natural safe around here as well - alive their issue I'm gonna take out a presentation what for now we can just zoom in so yeah this is the layout of our can we everyone see this okay is that a bit small yeah I was hoping to issue the presentation would and the toolbar on the on the left hand side but does anyone know how to do this yeah yeah yeah tried this motion with your fingers mention spread oh you know Lawrence doesn't really work for a year so I should have probably done that before I did this for fun well anyway okay so I'll just tell you what this is so we have em obviously we have our and basic files for a composer project so we have a composer with our JSON and we also because we run a hosting service a museum that has lagoon we have like you can if you want run a silverback em project within docker if you want and we also support Land of Israel so we have Lando files and and the giving files so if you don't want to run the SQLite version you can literally just do docker compose up and it'll work for you so it covers all pieces there and like I said it's based on the docker container ization system we use our mesial so it was you know first regan so yeah i showed you that we defined the component library and we have here a storybook directory so this director here is where we keep all of our stories now which I can zoom zoom in but that's basically directories named after the component that you represent and inside there we have a CSS file which is usually m/s CSS it's not actually normal CSS and a twig fail and then a graph QL fragment we also have a typescript well and that allows us to define our stories and this is the kill bit about story but I'm going to show you and so it's relatively simple no if I go to this is the nice thing about monolithic repos so we keep storybook and ripple in the same thing and storybook also will run just with Yaron run storybook so I have another M terminal window there and this is actually our story implementation so this is life and running on localhost and this is all of our components that we want to use so we have some like global styles like typography colors that sort of thing and then we'll get into some of the more meaty stuff so a good place to start is the header so this may be a little bit hard to see normally we have our logo up in this area but again we had to remove it and we have a menu that has a sort of drop-down feature so I will run through the court and we can talk about it if you like let me close this stuff so navigation zoom in a little bit so yeah you can see this is the I've got phpstorm setup to use these includes and we this is how we pass in our graph QL fragments and and a graph girl and ether objects I guess and how does this work and story but well that's quite easy because we define this in typescript so we import the things that we need and this is the hook that allows you to add a story story book so it's literally like expressing a story so in this case this is the the navigation and we want to add the navigation bar and the header so we define and our data objects just using plain old JavaScript so you see where we have the import that country switcher data and the data for the mobile so these are all files that literally just export constants or global objects and that allows us to mock the EM graphical data that we have so and I'll also show you so this is our fragment for the menu links so we can go into graph QL Explorer as an example here so sorry this is just me messing about and we can actually make some of these queries so has anyone seen the graphical Explorer before some of you yeah so M is really cool that comes is called graphical and it comes with like the graphical package it's not something that we built as much as I'd like to take credit for that but we utilize it very heavily and it allows you to meet graphical Queenie's Street - your graph QL engine and for this reason it's pretty handy for front-end developers because what we want to do in this case is shift a little bit of responsibility for getting the data structure correct to the front-end so the way that works I guess is that normally I'm sure everyone's been there though we get the same in from whoever does the design and the front-end person says okay that looks good I can do that and they may be split up into a UI component library or a pattern library and then they think well we need some mock beta so they just come up with something that looks roughly right to them but perhaps they don't actually understand how the data structured and that goes back to what I was saying before about the pre processors and things like that in Drupal like some things no one really knows that's like the real kicker for Drupal is like it goes through a thousand hoops before it gets to the end point so who knows what's going to happen to in between so using graph QL as this abstraction allows us to define exactly what we want and furthermore back in the claim people I'll kind of run you through some data producers and they provide those for graphical Drupal and just to show you exactly how we do and so yeah press control space and for example let's try the language switcher so language slips which links and we want the name and we want the Yarra let's run that and there we have it so that gives us the the name of the language and then the current page for a particular language available on the website so usually with that I so called and that's how we usually structure oh and multilingual content so that's how it works here let me bring up the actual language switcher what is this so you can see the language virtue here uses some test data so if we go back to and the the actual JavaScript failed for the data that we import so bidam ain't just going over what we we've just seen the navigation component the language has its own component I'm just showing you the Cana because obviously these things are nested so and yeah we import this data here and then we pass it through the head there and using em a simple JavaScript object basically the twig j/s renderer yes yes and maybe John maybe has is there a perfect parity parity between the twin Jas renderer and the PHP twig that that will mock the Drupal filters that just adds to quick so it will basically complete pops it like you give it a string and just give you the same string for these things fighting off it allows the twig KS to you know run all the girls and data back so you don't need to rely on PHP doing this no handcuff the PHP to do this level you're keeping something totally Java scared which is why sort of anything we'll just consume this yeah exactly it's a actually yeah so yeah I mean it is really powerful like that is one of the main reasons we went with this because it was support wake and you know that's pretty awesome because we only need to write this once the point of this is that as a back-end developer I want to be all of the work on to you front-end guys just like you build it I'll show you how to write your graphical community you get them on theta stick it into your page script fail and then what a yet there will be one either tomorrow or the next day I just need to you know sanitize some things so apologies for not having it ready in advance that was the intention but there are a few things I need to sanitizer of this but yeah and I also I wrote a blog post on this actually and which Cana I mean it covers roughly and what we're talking about here today so you can go on their media labs website and it's a using twig and story with storybook in Drupal and it gives you some links to some other useful blogs that we have but yeah tells you how to set up your theme and whatnot but yeah I will get an actual real live repo that you can play with yes I think we read hearts the Twix file and yeah sorry but again but yeah I will definitely get it and then I'll get the amazing labs people to tweet about too as well so that we don't but yeah and have a look at that vlog that kind of covers the basics of what we do although not the intimate nitty-gritty of it but um but yeah so yeah and so going back to going back to Drupal then you can see this is the actual language switcher know I have accidentally installed like pretty much every language under the Sun here so like it doesn't look very nice but this goes back to the graph QL failed because for the back end end developers all we need I don't know if you can see this very well but you simply should be speaking through the main flow you name the graph Gail fragment the same as your twig fail but you append it with the og QL you can also put them up directly and say the quick templates but it's not quite as clean and abstracted then what not so yeah we tend to put them along saying each other and and taking that one step back the nice thing about this is that it takes all of the graphical fragments at once and executes one query so and then it utilizes triples already-existing caching strategies but has its own as well so if you see this query here as an example the query isn't important but you see why this has got this has lots of random letters in front of it and see that properly that's because the caching is so good that I struggled to turn it off so this is a way of aliasing and I graph QL query to a shortcut so you just change the alias every time and then it breaks the catch yeah that is a bug in the I think the graphical module that we need to fix or some of these defects obviously am easy Labs is heavily involved in the contribution but we're not the only people that do it so you know it's not all her fault so yeah and as you can see I mean the the graph kill em query it's not exactly the same as what we just run but it's pretty simple and then that translates it like this is literally this is literally the same template there is no other template and if we can go into the theme briefly you can see so inside web and then we have themes plus them so I wish you could see this a bit bigger but well maybe just read out what it says so we have a storybook base theme and like I've already said we import the component library we set this up is pretty basic we use this where every theme that we write that is being used on there are progressively decoupled paradigm and we define some libraries and this I can't tell if you can see it but this is a this is a symlink again the storybook so storybook when we build it and we have a command which I'll run through in a minute and that builds the library for the backend or rather for the actual Drupal implementation so obviously we you can see here like this is life that's another nice thing about storybook it's like if you change something then it happens like in the browser so you know while free building it's pretty cool so yeah and go back to this when we build the library of iran's a yarn and build library and it will automatically build assets for the actual drupal implementation and then again we don't have any sort of input into that at the theme level we just have simple inc that links to the generated files in the storybook m component of a repo and it does it for us so we never need to worry about that and then we have the actual implementation of our theme so unless this example theme we just define the base theme of storybook we define our various regions that we want to implement we have our own libraries if we want to do some like custom javascript drupal behaviors that sort of thing and then this is where it maybe gets a little bit m less easy but it's still pretty easy it's just we also have graphical fragments embedded in the edge of theme so if i zoom in here you can see first of all this is the components module again like we literally just extend the storybook page though HTML doc Twix and then we run a mean M graph to ELQ really so this is the the query that brings pretty much everything together and make some overall requests and then this packs up the fragments and excuse the entirety of the thing and we we still do have some themes specific and templates because obviously there isn't a one-to-one relationship between the way we implement our front-end libraries and the way triple gain those things real work we always are going to have things like no templates or specific like the view implementation templates or a view modes display modes that sort of thing and but yeah so it's a but it's still pretty cool and we simply define blocks for each of our graphical fragments that we are importing and it does the job pretty easily we try and keep them as logical as as possible like we want to keep this as simple as possible but you know like nothing's ever easy with you know building websites so and that's where we are and I don't know how much time we have left five minutes okay I'm sue let me go back to the presentation I just want to briefly talk about the gotchas because I did see it was like seamless front-end integration and that's kind of not exactly true so we sometimes have situations where like data producers for graphical or resolvers aren't created yet for some receipt I don't know for example the the front-end involves some sort of crazy thing that brings together tweets and YouTube videos and cram small into one horrible social media package that the client really wants you know I'm sure you've all been there like we have to write a custom data producer for that so we have this is our schema this is for the back end the clean people so yeah it is correctly heavy so we actually there is work on going just now this users graph QL version four so it kind of has a list that comes out of the box and but we are working on and dynamically creating schemas with the animal configuration and stuff but I actually have to do that as there I take it amazing lamps and it's not as easy as it sounds so we're still working on it but yeah so some things we we have resolvers that aren't retina or data producers that aren't written yet that happens so yeah we have to approximate so sometimes rather than working independently the front-end Dave may come to me and see he might like how is this the third roughly going to look so we said together when we write it that's a it's not ideal but obviously like I came up with a really cheesy marketing freeze actually here the cup of code helps to recap of Tim's yeah so yeah yeah I hope this never goes on the internet so yeah in Scotland I will get killed for this so yeah like we're working on like a library of resolvers and I think with each release of the module as well as like custom resolvers they more and more things will be available one of the other gotchas here is that um like some things aren't over the box like they normally only I was going to show you a bread crumb implementation but it wasn't quite ready yet you know this was Cana yeah I bet Felicia enough as I don't want to assure you experimental code but mmm yeah with like normal out the box you know like typical Drupal that's great easy it was a bread crumb and you took like put it into your theme region and then it just renders it and it knows what it's doing like we don't have one for EM for graph QL well at least the version for version 3 has one but we use version 4 because it's an active development and so that took quite a while and because graph QL needs to rely on the context of the request that is being meant we have to use sub requests within graph Gail resolvers in order to figure out like what the current path is that sounds pretty straight forward you can pretty much do that in twig but we need to implement a sub request for a graph Gail to be able to do that probably so yeah and also I've said front-end developers need to learn a little bit more that's not necessarily a terrible thing because I think that like the more back in there's understand about what front-end is doing base pair sir you know it removes the need for these sort of like unicorn t-shaped people that are like the glue in the middle of your team you know the person that you always go through and she's like she understands her the front-end works and though the back in what can you please tell me so that came you know these are quak chests but at the same time you know that they can be looked at as advantages if you want to spend it for the marketing team in a talk you know and so yeah it's it's not all bad and finally I think yeah I think that's it yeah thank you oh I just want to see this is a picture of me in a high-visibility suit there was two sizes too small I went to see if I could yeah yes yeah so it's funny you should say that because I was literally speaking to a colleague of mine about this so and for me that's like a sort of team cohesion and hygiene issue so like as a back-end developer I know leak we're trained almost to like because we need to get things done like care about what you're producing like what you do and if you think replay them what you do that's great but like try and get out of the work so often like maybe we could change a graphical data producer and then we don't reflect that change in the front-end see we change a field name and then all of a sudden it stops working and story but if someone says hey man why does this not work anymore weren't you working on the bread crumb so like yeah that does happen it does happen for me that's there's if the back-end developer changes something that directly affects the front-end is also their duty to me anyway to update the front-end and know that you've seen how easy that is I mean like to create the stories and story book it's not difficult even for the most back-end oriented of back-end developers it's not difficult and so if they don't do it because they're really busy are really lazy and so the moving to craft well as the assumed the assumed way that people will provide data to components yep you've removed mostly for pre-processing yes all right so yeah currently we do the same things well we've got pull this component same binding but then it's like well now you did the heavy lifting and Drupal and you sure as long as you meet that data contract to get your pre-process set up it works fine but it always feels like there could be a better way so how did you get paid you get your team on board with like graphic tools now the sequel of yeah and so well first of all like I'm not just seeing this because I know people like to pick up their teams and stuff so I've worked amazing labs for seven months so like the decision to do that was made before I joined but like we have some like crazy counted people and I thought I was like a really good developer before I went to him easy labs and I was an unmanly imposter syndrome kicks him again you know but we have a crazy talented elite developer that oversees everything called Philip Mel up and that guy is like a genius so he was basically sure those look this is what this is the advantage this is going to bring us and it also helps us bridge the gap with fully decoupled things and it means that yeah there's a little bit more learning and contribution in the short term actually in the long term like it you it provides much more clarity especially like the example you use the normal pre-processing or and things like that if you're all you're hearing about is the the I guess the abstraction layer which is graphic UL and the implementation technically doesn't matter it's almost like an interface if you look at it like that so yeah yeah so like that that was essentially it but yeah it was led by Phillip Burnett if you ever get the chance to see him do a talk or a webinar like I would really recommend it like you will learn so much you know as like a culture is as we started yeah yeah yeah I mean yeah that we that I get that I guess that's again comes down to it we we want to mean like our front end developers more aware of the impact of what they do on us as back in developers and vice versa so yeah if it looks good in story but Shepard that is technically the right thing because then like there shouldn't be after that too much more of work to be done too big because of the way this works well you're reusing the same and the same templates so really as long as like that contract is properly written with the the data producers in grass gear then it should work there's always going to be edge cases and stuff like one of the things that I was going to show you about the kinder I know that I'm was like embedding of you using court because that is still like a lot of people get a bit cleaner and see like well you shouldn't be embedding it with code but like is it's not actually a terrible thing when you look at it from like the progressively decoupled way of doing things you know it does fit the paradigm but then like story books like how do you embed the view I don't know what if you as you know that so that there are gaps like you know it's not perfect but but it's a good start and like I thank you and as we develop this more because we've not been doing this for an awfully long thing as we develop it more it gets easier in these tomorrow Stu is going to be presenting some twig aircraft fuel into it yeah yeah sorry sorry yes thank you [Applause] [Music]

Channel: Decoupled Days

Views: 833

Rating: 4.7647057 out of 5

Keywords: 2019

Id: aSwSWKUq9bc

Length: 51min 56sec (3116 seconds)

Published: Fri Oct 18 2019