 Hi, I'm Martin. I'm from Everywhere Digital. We do websites, web apps, that sort of thing. We've been working with Ember for about a year now. It's pretty cool. I wanted to talk about our experiences with it and where we've gone with our development process. That involves a development style called atomic web design or web development and how that works with web components and Ember components. So, further ado, when I first started doing this stuff, it was quite a lot to get around the whole web components, things like quite a shift in how we do things. So, I kind of felt like that. It's just like, what's going on? Then I started reading about it a bit more and I was like, yeah, okay, cool. I'm kind of getting hang. Then I was like, yeah, bring it on. It's cool. Firstly, what are web components? They're kind of a new way of building for the web. Traditionally, we think about things in terms of pages and buttons and all those sort of things. But web components is sort of taking it into more building blocks and more pieces. Secondarily, it's a collection of W3C standards for devs to use that have more or less been used by browser vendors for quite some time. But they're now sort of being released and standardized for the public. So, that's pretty cool. And in effect, what they actually are is encapsulated bundles of HTML, CSS, and JavaScript. So, nice little packages that can sort of be reused. So, they're made up kind of of four things. Firstly, I want to say that most of this presentation, well, a chunk of this presentation about web components is liberally plundered from Eric Bidleman, who's a Google evangelist. His Google IO 2013 presentation is amazing. You should watch it. It's got heaps about web components. So, this part here is sort of taken from that. So, web components are kind of four things. HTML templates, which are kind of chunks of markup that can be reused and repurposed, much like Ember templates can. So, and then there's Shadow DOM. I don't know how much you guys have used Shadow DOM, but it's kind of like a layer that sits under the traditional DOM that we have. So, kind of, and it has DOM and style and encapsulation built into custom elements. So, custom elements are sort of, you know, like style, like input tags and text fields and all of those. And they have sort of a functionality within them that is available only to the browser or is sort of created within the browser that as a developer you can't really access. So, you can kind of create new and expand upon existing elements like input fields and all of those using custom elements. And then finally it's like HTML imports, which allows you to take these new custom elements and bits and pieces and web components that you've created and import them into a new document. So, templates, yeah. So, you can use HTML and markup directly on the DOM. They're hidden from the document. They just show like as a custom element. So, it will just look like any old tag. So, it could be something like Ember London tag that you use and that's all it shows. And it's past not rendered. So, script tags that are within it or any images or anything aren't loaded until you sort of tell it to load those things. Sorry if I'm going through this quite fast. There's quite a lot about it. So, definitely read Eric Bidleman's presentation. Shadow DOM. So, it's like markup encapsulation and style boundaries for custom elements. And to kind of show you what I mean, I will load up this. Hold on. So, this is a date sort of input tag and you can see here that it's input date type. So, that's a sort of a web component in itself. But usually you can't go into it. But if you click this thing and you go here, it says show user rated shadow DOM. It opens up the shadow DOM for you. So, it allows you to go into this custom element and opens up all that stuff within there. So, you can kind of see it's got all these custom styles and all these different things that usually you can't access. So, it's usually it would just be an input tag. But they've actually, the browser vendors have been doing this for a long time that they've made these input tags and input fields with pure HTML JavaScript and CSS. And so you can kind of access and see all of that within the shadow DOM. So, custom HTML elements, that's basically what these things are. So, you can make new ones instead of just like using a regular input tag. You can do something like an Ember London tag, which can be used like any standard DOM element, like Ember London, like that. But it will have all these sort of custom JavaScript CSS and HTML sort of within it that a regular user won't actually be able to see unless they open it up within the shadow DOM. And then they'll sort of get all the access to it. And you can also extend existing elements. So, for example, if you wanted to create a custom sort of input field, you can extend that whole language just like you can like classes and that sort of thing. HTML imports. So, this is pretty cool. So, once people have started making all of these custom elements and all these like web components, they can actually just like an HTML file sort of like a chunk of code be imported into any document and then be made available to sort of anyone who wants to use them. So, we could import the Ember London DOM element and we can use that in our script. So, it's a really, really nice way of sharing like all these like custom components that you can build. So, support for web components. It's kind of like Chrome obviously has it and then Opera because it's basically Chrome has it as well. Firefox kind of and IE and Safari obviously don't because they're awful. However, using Platform.js and the Polymer framework, which is sort of a framework for web components, it has full availability and polyfills for basically for everything. So, it brings in support for pretty much all browsers. Now, how does this relate to Ember components? Ember components, if you guys have seen them and used them, are effectively Ember's take on web components and they're heavily based off the W3C standards for web components. So, it allows you to do all the same sort of very similar things of having the contained chunks of code and markup. Very easy to translate over except the differences are they use handlebars templates instead of HTML and sort of CSS templates and you have a controller. So, effectively you have a component controller instead of often inline JavaScript. So, like a script tag within an HTML file. So, that's the primary differences. Other than that, obviously you've got all the access to Ember's awesome functionality as well. Now, it's kind of like what the hell is actually this atomic design thing. So, atomic design is kind of a way of structuring your design code into reusable components and you can kind of see how where this is going now sort of with the whole building things as components and really modularizing things rather than thinking of things as pages and different elements on a page thinking everything as reusable chunks. So, yeah, we're not designing pages we're designing systems of components and this again goes into the whole concept of reusability. So, the more you can create reusable chunks of code the more you sort of saving your time down the line and you can just sort of really rearrange and put these things together and also from a user perspective if these things are the same a user will actually sort of know and understand how to use them because they've seen how they work already. Now, it's kind of broken down into three parts atoms molecules and organisms. Brad Frost is one of the guys who sort of really pioneered this idea. It's worth checking out his stuff. So, patternlab.io he's got lots of stuff he talks about it but he goes on to part so he says atoms molecules organism pages but I don't really like to think of pages because I sort of think things are more going in a way of states and rather than thing of pages think of things in terms of states and templates. So, first thing is atoms so these are the building blocks of a website so buttons text label input so you can see here it's just a nice old input field so that would be kind of an atom like the smallest chunk of code that you can think of and then you've got molecules so it's kind of when you you truck a few of these different components these few atoms together you get something which is like a molecule and so something like a search bar for example and then you throw a few more together and you get a organism which is sort of distinct section of interface so in this case a navigation so trying to think of things in terms of reusable blocks and building them up into bigger and bigger parts and then yeah obviously you get to a level where you're building application so it can be thought of like traditional templates but I kind of like to think of it in terms of states so rather than having all your separate pages you sort of transition between different states and turning things on and off I think with single page web apps and especially with the power that ember has it's it's kind of you know freeze up your way of thinking rather than thinking of things as in pages which is kind of like a traditional website-based thing so that's kind of where I think the future of web designers going well it's sort of like basically building these Lego blocks that you can share and reuse and sort of put together and construct new things from these different parts of different web components that you can all sort of put together you know and I think it's a really powerful way of building things because once you've got these reusable chunks of code you don't have to redesign things every time so you've kind of got like a really really powerful toolset that you can go into any project with and that's made really really easy by ember so this presentation is all made out of atomic ember components so this is all done in ember so this here is kind of read it but so these are sort of there's like a slide component here and that's that sort of has all the different elements within a slide and then there's a footer component and there's the button component so each one of those the pieces in the presentation is actually build up built up of these atomic ember components so a slide organism footer molecule next previous button molecules bullet bullets and so on so forth so I've kind of created these reusable chunks that you've kind of seen to use and within this presentation so some thoughts on how we are sort of developing with atomic design and ember we kind of use routes to control more which elements are visible on a page rather than controlling sort of having pages as such so from each route we kind of turn on and off or the different or the different components that we've sort of un-pulled in we use controllers primarily as classes and functions to control stuff rather than having all all the sort of like having page content and dealing with it as pages we we use we use them more as a way of like putting together and controlling all these different molecules and components that we've created so yeah ember components primarily as reusable molecules encapsulation and events I'm going to talk about in a second but and the other thing is that helpers are your friends so ember helpers are awesome so definitely look into those and use them it helps helps sort of cut down on putting too much stuff into your into your controllers so encapsulation and events so one of the core things about components is that they shouldn't require any knowledge about their parents so you have to you know you have to sort of quite think quite heavily if you want something to have any knowledge about its parent you have to pass it through so giving access to any parent stuff you have to declare like quite clearly that you're going to do that and any events that you want to have a reaction outside of the component you trigger an event within that component that is then spread out to the rest of your application and the rest of your application can choose to deal with that sort of event however it wants so yeah if they require variables or even functions you can pass these in via handlebars and you can sort of got a clear list of what variables and functions are passed into them yeah that's about it thanks for your time some useful links here I'll put this up online and then post it in the ember discuss ember London things so you guys can check it out and go through it again or like get some of the links out of it because definitely worth reading and sort of getting your head around because it's it's really cool so yeah thank you yeah it is a cool name what is the what's the primary function of the shadow so it's kind of put it back it's like I'm the shadow domes kind of there to kind of hide hide stuff from your regular users so you don't you know it's it's it was primarily there for the browser vendors to put in stuff like input tags and all of those and have them work using HTML CSS and that but not actually expose their internals to people they kind of wanted to because originally that was done in C like back in the day all that sort of input tags and stuff they would dealt with and see but they've they switched over and actually started creating all that stuff in HTML and CSS and but they didn't immediately give that access to to the public to be able to see what they were doing in there so now they've sort of given over access to for other developers to create these sort of hidden encapsulated blocks that are able to be used just like traditional DOM elements why they've only waited till now to do that yeah yeah yeah sure I mean I literally built this in about two hours last night so I kind of I only got back from overseas on Monday so I kind of ran out of time but I I'm more than happy to put up the source code to it so you can check it out I'll put it up along with the with this link on a link I'll just chuck it in a link there and make a github you generally want to try and like well what we've tried to do is try and break everything down into smaller chunks like a few getting to the point that something's more than maybe a few different molecules or atoms put together you it's probably more a few different molecules that you can have like interact with each other and like I was saying about having your controller more as they your sort of roots and controllers more acting as a sort of a bridge that you can kind of have your different your different web components kind of talk to each other and then feedback to a central unit and then you can have different components listen to each thing so they're all sort of these independently acting things that could all listen out and see what is going on but we try and break them down as much as possible yeah yeah yeah yeah yeah well I mean so that's where the you've kind of got the two parts there you've got the whole atomic design thing and you've got the whole web components thing I mean buttons are straight away or you know really a kind of a very minimal level of the atomic design it's just it's an atom so you don't really need to do much with it it's kind of it just sits as an atom so it's kind of when you start getting to the molecules and organisms that you start talking about turning those into web components like there's also lots of stuff about how you integrate this in with CSS so a lot of the pattern lab stuff is actually about how you structure your CSS to in an atomic way so everything's reusable and really clear so actually that's that's where a lot of this comes from is actually how you structure your CSS to to make it clearer like there's an it there's a few other ones there's another sort of pattern called smacks don't know if anyone has heard about that that's another way for structuring your CSS to make it sort of like clean and reusable chunks but I found the atomic sort of way kind of really logical so you have a button then you might have a blue button red button yellow button and those sort of different variables or ways of sort of changing those but that wouldn't really become a web component until you needed to stick functionality into it if that makes sense right so and traditional web components not ember components so and and the sort of W3C standards yes you actually have a whole HTML file and that has your JavaScript your CSS and your HTML all sitting in there like you know like we used to do years and years ago before we pulled in you know files like having everything in you know when I first started coding I just put everything in one massive HTML file and it was horrible but it's kind of funny because it's gone full circle to actually you do that so you have your script tag you have your CSS tag and you have your your HTML and everything all in one HTML file that you can then pull in via imports ember doesn't kind of do it that way that's one of the things that the sort of ember components don't they kind of do split out CSS your JavaScript and your templates into three files so you'll have your handlebars template your kind of controller and what and the ember controllers has your you know all that stuff in it and then you have your CSS separate so ember components do split them out but and web components yeah they're all actually together if let's say you have two or three components on a page and they're all underlying them as they're using the ember or they're using jQuery or using some sort of third-party dependency yeah they're all kind of embedding that into there so it becomes quite inefficient but it can do I don't know exactly how the efficiency works with web components if they share I mean that's one thing I've wondered about as well I know they are encapsulated so for example if you are making if you've got CSS styles and certain things within one of these web components it won't affect any other web component on that page it will all be entirely encapsulated so you don't have to worry about different web components messing with each other however I don't know about the efficiency thing whether you need to have require for the modules or if you pull them in if they share them I think that's something that I was wondering about as well and how you can improve efficiency with them so that's definitely something to sort of look into or something I'm gonna look into that makes sense go so after the first time I talked to you about this I had to go into member apps I was working on it and I found that what I would do over and over again is accidentally kind of build too many presentation styles into the I guess molecule yeah itself and make it too difficult to override and then you end up having to get some of those styles out and leave in just the ones that they'll purely with structure yeah do you have any rules of thumb that you've come across like where to stop adding CSS to a molecule to leave it open to other things that's a good question I do try and keep it mostly structural and then have sort of I don't know it's sort of ways of variables sort of that I can then pass into it to change its structure so I mean using your CSS you're talking about it on a CSS level yeah yeah so I then will have a sort of the main structure of it and then I'll have within using a CSS a few variances that I can then have so button red button red large button so you can then just semantically start putting in these things that change it but I try and keep those separate and as minimal as possible so that you yeah so because I we had that problem heaps as well you start having too many sort of variables that start messing with it so I try and have it primarily structural and then separate out any sort of ones that I want to change it with yeah and then putting the kind of fundamental styles on that but of course they get pressed and so yeah yeah that's it's just some taking it like getting the hang of sort of yeah it's sort of like a work in progress for us to figuring out where those sort of pitfalls are and like how the best way to structure things are so you don't have to sit yanked out but generally we try and keep it structural and then just have anything that changes it as modified says extra classes so we can just put those in and try and keep them quite uniform and consistent and not change things too much in different pages so I think a thing lots of people do is they have CSS styles that change things on a different page but if you actually need to have something different on a different page add a new class that's a modifier that will then change it to be that if you get what I mean so you can say like I actually I need one to be full width have a new modifier that's full width so you can then start reusing these different words to actually make it do what you want but then you could actually use those in different places as well. In terms of atoms and molecules or is there moments in behind at certain level of granularity what was taking off in terms of you know being able to plug and play these things in and the second part of that question is you know in the stuff that's out there right now are we actually seeing contributions from the design community and that these are actually you're really getting design reas rather than just technical reas. Yeah I think like that's the two parts of it because the whole atomic thing I think it comes down to your preference. The atomic thing is very much a like well how big is a molecule how big is an organism that's kind of up to the designer or the developer to choose how big they are but with web components I think like the whole polymer framework and stuff is really taking off in there there's quite a lot of you know the people are starting releasing different web components that people can use so that is actually getting some momentum behind it but yeah I mean the the sort of atomic thing is very much more of a stylistic and a way for people to kind of get the head around structuring things and it will depend a bit more from designer to and developer like what what you prefer to use and what sort of works you if that makes sense. Cool.