ElixirConf 2021 - Dave Lucia - Surface: a bridge to the Javascript community

[Music] [Music] uh so hi again i'm dave lucia uh yeah sophie already introduced me but uh i've been doing elixir in production since 2016. uh it's my first time at elixir conf i've met a lot of great people here so i've been having a lot of fun and this is my son owen he started crawling actually this morning so i'm excited to see him tomorrow thank you [Applause] all right so surface um surface is a component uh library that's built on top of phoenix live view we've been using phoenix live view at simple bet for two years and starting in august we have started using surface in production as well um this talk i'm going to be sorry i'm a little nervous um i'm going to be talking about service which is a component library and i want to talk about it from my perspective and how i came to elixir so everyone has their own journey coming to elixir many of you maybe came from ruby for me it was working with node.js and in the javascript community and now that i've spent over five years in that community sorry excuse me [Applause] all right sorry uh now that i've sent over five years in the community my love for the the people the technology have really solidified and to appreciate uh where we are i want to take a moment to reflect on where i came from uh and uh where others might have come from in building javascript web applications all right so some might remember the early web uh so back in around the year 2000 many early websites were simple simple server rendered html html tables were the go-to solution for layout uh that's how you pretty much threw everything on the web page um and around 2004 2005 a couple things started happening so the browser wars were in full swing we had firefox emerging onto the scene um ecmascript 4 which is the standardization for javascript uh was coming in and this new thing called ajax was invented um and actually briefly so ajax was this enabling technology where you can make requests back to the server get data and use that to display dynamic content on your web page now in order to build dynamic content on your web page uh such as a tr a clock that trailed your cursor um or moving to the next form element or validating as you're typing in a phone number that it was correct you rendered your html on the server and then you sprinkled in some javascript and this would modify the html um and the focus was was primarily on taking the existing html and tailoring it to your needs you know swapping elements in and out adding classes and we do we still do a lot of this today um so this was just a quick example of like showing the current time on the page and live updating this is a very common style for building web applications at the time now after this new era of javascript applications was enabled through ajax and we had a more powerful javascript tools like jquery move tools dojo came onto the scene and made it so that you could develop applications faster there were more ergonomics that were built on top of javascript that simplify browser apis and allow you to focus on modifying the job making api calls to your server et cetera through this progression certain patterns started to emerge that were taken from server-side technologies don't know what's happening all right uh coming back here and i think uh this dongle is haunted so that's uh spooky okay um all right we got a race here now so mvc framework started coming on to the front end scene with javascript these were patterns that were taken from server-side rendering but um were being applied in javascript and allowing users to build more interactive websites all in javascript all on the client and they started enabling different patterns more expression for front-end developers and these also started introducing the idea or popularizing maybe not for the first time the idea of using templates to render data on the client side um now these mvc frameworks typically had a render function we're all used to this now with you know rendering data in phoenix but what was interesting about some of these template languages like mustache or handlebars was that they could build dsls and these dsls could be tailored to rendering html rendering strings and deviate from the actual language itself so whenever you wanted to render data on the client through a template you would have your template pass the data to it you get html you'd stick it in the dom but if you wanted to re-render a template you'd either need to use something like jquery to then modify that that html that was generated or you need to re-render and replace the whole thing so around the year 2014 this huge boom of javascript frameworks came on um and these powerful javascript frameworks allowed developers uh to build highly complex web applications all within javascript instead of server rendering and then doing some templating on the client side and these frameworks fundamentally change how websites were developed and allowed javascript developers to pretty much build the entire application all within one language and with this was born the concept of a single page application now the enabling technology for these single page applications was the virtual dom and instead of having a template and re-rendering it and replacing the entire contents what it would do is it would build this tree it would diff the trees and then selectively apply what had changed between subsequent renders and this allowed for writing more declarative code like jsx and react and was even more ergonomic now once developers started realizing that they could build these single page applications they started running into issues with the ability to have seo enabled websites and so they started rendering data on the server side and then rehydrating it on the client and i would be remiss without mentioning node.js which was basically the innovation that kicked off all the tooling that made react possible because you can now have a compile time step in javascript and convert from jsx which is html aware syntax right into javascript tooling bundlers like webpack and all these tools that made it a lot easier to be a javascript developer and so what we were left with was really two different styles of applications that were starting to be built maybe there's there's more styles but popular ones were the server rendered html plus javascript sprinkling some some stuff in for dynamic content and then you had the client side heavy single-page application where everything was rendered in javascript and all the server was responsible for was apis graphql etc so when phoenix live view was introduced back in 2018 in my opinion it fundamentally changed the way that web applications could be built that entire layer of writing javascript on the client having to write apis it removed that entire middle part of the stack and instead you could just make function calls and not have to worry about deploying a graphql api or writing an interface for your code and what what i see live view as is live view is this enabling technology that in elixir it allows us to build rich dynamic applications all within elixir so about a year after live view was built marlis had an idea for creating surface and surface is built on top of live view and what it is is a component api that adds many different features like a template dsl all for building rich user interfaces and services main goal is to add ergonomics on top of live view so while live view is this enabling technology that allows this whole new paradigm of building web applications surface plans to make it easier to do so so that you could build faster more reliably and with more joy and it does this by borrowing the best from the javascript community so surface's key innovation is learning from frameworks like react vue elm svelt and taking the patterns that have converged in the javascript community that are there are the great ideas that all of these frameworks have really adopted and bringing them to to live view via this surface template syntax so i want to show you what soft what surface offers us as elixir developers who are working in live view so the first thing that surface does is it adds this html html aware template and component syntax and you'll notice that this is not exactly elixir but if you've ever done any react or any vue.js it should look very familiar to you and all the all the syntax here is tailored towards writing html and generating markup so because it is not exactly elixir it can innovate in ways that elixir can't we can add features for example i'm rendering a list of games and if there are no games in the list i could say no games today and so we're adding an else to a for loop which wouldn't really make sense outside of the context of generating html but in the context of generating a template this is really powerful pattern um another really common pattern is you know i have some logic and i want to conditionally apply a class well with the surface template syntax you can pass actually it's like almost like a modified keyword value list and if you have a value and it's truthy it will render the the class and if it's falsy it will not show the class now this idea in react is that components have apis and you can add you know prop validation so that you know the the shape of data that your pro your components accept and surface adds this feature where you can annotate all of the different properties that are being passed in into your components you can mark them as required you can give them default values you could say my values must be in this enumeration and it can take these at compile time and actually throw errors that prevent you from from compiling your code until you correct and adhere to the contract of your api what's even more powerful about this is because this is all annotated at compile time you could use this to build a lot of tooling that we'll see in a moment so here's a quick example of i have a button but i when i created the the closing tag i missed the slash and this won't compile we'll get an error and we could do the same thing if i forget to pass a property compile time error with a helpful message if i'm forgetting to pass in a slot which we learned about this morning in live view compile time error if i'm not passing you know if there's only green red and purple and i pass yellow we can get a compile time error for that so surface adds this this concept called slots and slots come from the web component api and then was popularized by vue.js and what slots are is they allow you to build these reusable containers where you can pre-define behavior and then when you're when you're using the slot you could pass in arbitrary components html whatever you want and encapsulate this behavior so that you can use them in different contexts let's move on here and slots are this reusable component building block so here i have see i have a match card which is an example taken from something we built that simple bet and i can have a sport agnostic way of displaying matches and then i have a slot that's defined there and i could show the score for football versus baseball by passing in a different scoreboard into the slot now i talked about the the property api that surface adds to components and what's what i mentioned is so powerful about this is that because we have this information at compile time we could use this to build really powerful tools and so my favorite feature of surface is the component catalog and this is documentation that is generated from your components when you're writing a property and you have a docstring on the property it gets built into here it shows all the values that it accepts the types that it expects and what's so interesting about it is that you can pre-can examples so here i have a list of buttons and i've got different color buttons different size buttons which i realize i broke with the html or excuse me the tailwind grid that i added but you can bake out all these examples and rapidly iterate on developing them and see them all change at the same time rather than having to go back into your app and get to that one right page and see okay does it fit right here instead you build up these suite of examples and this is not a new idea again this is taken from storybook js which is a common way of building style guides and component catalogs in javascript now it's cool to see pre-canned examples but you also want to be able to play with your components and property test them right so here we have a very simple example of a form and this is taken from the surface documentation and i can i could take this example and i can type in my email type in my name see the data that's being passed into the property and see it rendered which is that form right above all within the context of this component catalog and this is super easy to get out and it allows your the rest of your team to to take these components your design team to you know help develop and help qa the components that you're building uh macro components are super interesting uh and actually what we were all seeing right there with those examples with the code and the rendered components above it was an example of a macro component where it was taking the code at compile time it was grabbing that string throwing it through a makeup some syntax highlighter and then also rendering the component as it were so here this is an example of a markdown component where i'm writing literal markdown inside the the uh contents of my component and then at compile time it runs that through a markdown compiler and boom i've got html surface has community component libraries and some new ones are being added during spawn fest someone built components for ui kit we're hoping to add components for daisy ui which is kind of like the free version of tailwind ui so some off-the-shelf components where you can start designing and composing interesting dynamic websites all without writing any javascript or really being a designer now surface focuses on ergonomics and something that's always driven me crazy when writing templates is that they become a mess and they're hard to they're hard to format everyone has their own way of doing it and despite differing opinions on the elixir formatter i think it's a really good thing for the community and it just really it takes away conversations that waste time and surface has a formatter um actually paul who's in the audience wrote it um you run mixed surface format it formats all of your template your template could be in a template file it could be in embedded inside your elixir and it will still format it and this is a super powerful and ergonomic feature that you could put into your ci et cetera so surfaces is new and it's evolving and from version 0.4 to version 0.5 we had breaking changes for the syntax surface added a surface convert function sorry mix task and to to go and move from the breaking changes to the new syntax you just ran this once and you're done uh we did this at simple bet and it was the easiest thing i've ever done and this is really about the ethos of surface which is you know making it easier to to work with and you know to provide tooling for cases that would be otherwise tedious so these are all available in surface today and that's really exciting because these are really powerful features and surface is pushing live view forward so this morning we heard chris mccord talk about all these amazing features with html aware template syntax heaps slots declarative properties coming function components and these are actually all ideas that started out in surface that marlis the creator of surface contributed back to live view so live view is is this space where we can sort of experiment in this way and you know take these these ideas from the javascript community and bring them back to live view and another thing i think is really important is that we're looking at that template syntax surface provides optionality in the same way in the javascript community you've got vue.js you've got spelt you've got react you know people have different preferences different use cases and it's really great to not be in a mono culture and to have those options when you want them so quickly to compare on the left we have on the left we have um a surface uh template file and on the right we have a hex uh template file and you could see some of the the differences you've got like partial elixir code that's that's inside of these these brackets and you could say that the the surface template it's similar but it's a little bit more concise it's easier to read and when i talk about ergonomic features that surface ads i think maybe the most important one is that it's just a surface template you don't have to know how to pronounce eeks or leaks or heats just surface all right so a lot has been brought from surface back to live view what's coming up in surface well we're getting um parody with uh the recent release of phoenix 1.6 and phoenix live view so function components slots are all coming actually they're already existing surface but we can basically delete a lot of code that's in the the surface library and depend on on live view directly we've got dynamic components so if you're rendering a list of heterogeneous components that have the same api you could just pass a module and it's a little bit more ergonomic way of rendering these lists of components you've got recursive components for if you're building like a tree in html it could refer to itself and we have surface init so see if we're doing okay on time i can share what some of these look like so surface init is a tool that i think can it deserves its own talk and this is for the developer experience of bootstrapping surface into your project um so what you do is i have a phoenix project that has live view in it and i want to get surface into it as well so i can start building components using the surface api i run mix surface init and it adds it to my project in the same way that mix phoenix knew would but it does it in a little bit of a different way than phoenix does and in a way that i hope to see coming to more projects in the elixir community so this is building on top of this amazing library called sorcerer which can parse elixir code and what it does is it applies patches to your elixir code so we'll look for a file it will parse the the code in that file it will then apply a patch and if it sees that it can't make that patch it will suggest a manual way of adding it so this allows you to to do pretty interesting things you could run the init multiple times and it will apply it or it will detect that it's already applied it and will move on i mentioned dynamic components but again you're rendering a list of maybe in my case that's simple bet baseball football basketball games i have components that are all the same api i could just pass the component as you see up top and it allows me to cut down on all this if else so some upcoming things that uh we we might be adding to surface in the future um more options to surface and knit so maybe you want to start building components using tailwind we can add the dash dash tailwind and boom you've got tailwind all configured for you so you don't have to go through the manual process of es build and adding all those features same thing for the other component libraries that we hope to add like daisy ui that patch api that i was showing in the mix surface init we hope to make that public so that if you're building your own suite of components and want to add an init function you could pass an argument hook into surface init and boom you made it really easy to get new people using your components some other things like computed properties handling state changes within components we're excited about adding some dsl syntax where it makes that a lot easier which i still find to be a pain point today and then improving on compile time validations taking the best from elm and having that empathetic compiler that kind of coaches you along as you develop and if i want you to leave anything today it's that surface is important phoenix live view is maybe niche in the greater technology community and surfaces uh maybe even more niche but i think it's really powerful it's actually very mature and you could build really interesting things with surface and the best outcome for surface really is that surface and live view continue to converge and maybe even have enough in common where you could use surface components in live view and vice versa and another important thing and why i shared you know the history of javascript at the beginning is that elixir is a growing ecosystem and we need to be welcoming to other communities and what i see surfaces as a way a bridge to the javascript community who's familiar with building react and view applications and this is a great way of bringing people into the community showing them something familiar but then you know sharing that you can use the stability reliability and scale of the beam vm to build novel um novel products that maybe are really difficult to build in another technology um so i want to say thank you to the live view and surface teams who are incredible and have built some some really interesting technology that i love to use every day and at my work at simplebet we're able to make use of and build amazing products with a small number of people so special thanks to marliss the creator of surface who helped me with these slides and also paul who's in the audience and one more thanks to simplebet my employer who allowed me to be here and where we get to use surface every day and thank you [Applause]

Channel: ElixirConf

Views: 1,817

Keywords: elixir, surface

Id: Lh5rA1pgWCk

Length: 27min 5sec (1625 seconds)

Published: Sat Oct 23 2021