 Hello, y'alls My name's Hugh. I'm an Australian born Used to be New York City, but now on my way to Berlin resident I've just gotten a Polish passport. So I'm kind of exercising my right to be there for a little bit before I go back to the US I'm a full-stack developer. I do rails and ember largely do a little bit of react and that stuff but mainly ember is my is my thing and for the last few years I've been working on e-commerce lots of e-commerce stuff and I think for like Most developers people get really bored all of a sudden when you say e-commerce because people are just like, okay Magento cool but I have been like pulling this apart because I worked for this like dev shop in the in the States that was all about like really compelling design really beautiful user interface and we kept running into the problem where we would have these really ambitious goals for UI, but We wouldn't be able to manage the complexity that came along with it because these were client builds We'd have like a 12-week cycle and then we'd have to hand that code based off so we tried so many things and We kept running into this this wall of complexity that comes with e-commerce Surprisingly complex when you start really pulling it apart and taking an API driven approach There's a lot of state machine stuff a lot of interlink models that go out of sync and kind of some crazy stuff, so it wasn't until I found ember and ember add-ons that I got really really excited because Ember add-ons are kind of like the new jQuery plug-in. It's plug-and-play It just works and I can't think of anything else in the JavaScript ecosystem Aside from jQuery plugins that really sort of compares to ember add-ons at the moment, so My goal was to sort of put together a Shared solution for doing single-page e-commerce so that the ember community could essentially just have an out-of-the-box solution for building an online store so I'm gonna like basically show you guys how to get started with it and Then I'm gonna live code one of those slide-out carts that like when you add the cart it slides out and And you can see the new item that you just put into your cart, so I've just remapped my Vim leader key, so This is like kind of ambitious for me right now, but we'll see how you go so First thing I'm just gonna do an ember new and I'm just gonna call it store So that's super creative of me, and I'll just show you guys the site really quick, so There's some super super simple getting started guides And some of the cool stuff about spree ember is that It works as much like a rails engine as you can build ember at the moment, so Essentially it has its own store adapter and serializer infrastructure so that you can plug it into existing ember apps And it'll just work with the spree Ruby on rails engine That's Ruby on rails API can live totally different to your existing servers So you can basically drop an online store onto any existing ember app that you've got going at the moment and just Mount the API wherever you want whether it's in your current rails app or like next to your node app or next to your elixir app So it's it's kind of cool like that, but uh There's a bunch of other stuff where we use local storage to sort of persist the current order and the current user We have sort of a plug-and-play user authentication system, which is a wrapper on ember simple off and Probably the biggest and coolest thing is this stateful checkout flow Which uses a library that was built by my buddy castan who lives in Toronto He work he worked on this library called ember FSM, which is essentially a promise aware state machine that sort of bolts into ember and he He built it and it's really well tested. It's like a science experiment. It's crazy crazy precise But it's sort of he hasn't really found a use for it aside from file uploaders And I needed something that could kind of mimic the way that spree handles the order state machine So it's it's amazing how well these two pieces fit together and I'll show you guys that in a sec But let me just see how we're going Is that because of our why fire Okay, all right well I've got like a Okay, so get config What Okay, let's let's see we're doing some I Didn't expect to learn that tonight All right. Well while that's happening. I'll just show you guys this state machine that I was talking about It's kind of a cool little thing to check out while waiting so Spree ember is built on actually for ember CLI packages and They sort of nest inside of each other where it makes sense It's not really a sort of first-class supported thing of ember CLI, but there's There's a hacksaw you can do to make it work You just can't use linting and you can't use other things, but it's cool. It works So Basically spree ember core is all of the models and things like that that locks directly into into spree and then ember checkouts is kind of like the checkout functionality, so basically it ships with this service called checkouts and Checkouts basically gives you a way for progressing an order through through a checkout So you can basically get it state, you know It's on state delivery and then you can transition to address and you know It clicks back and forward and it'll give you errors if you're trying to transition to states that you can't and that's because it works with This ember FSM stateful, which if no one if you guys haven't heard of it. It's just a lifesaver. It's an amazing thing so Basically, I declared this entire checkout flow just like this and This is how complex that stuff is, you know like you don't really think that it's it's crazy hard to do these things but There's a lot going on So, yeah, it it's kind of like the answer to crazy complex in you know Sort of what do you call that in? When you aren't programming in like a stateful way or a functional way Starts with I I forget now imperative. Thank you. Okay. That works. That's crazy Should I just leave that on like does that setting is that something I should always have? All right, so what I'm gonna do is I'm gonna do an ember install and I'm just gonna do spree and storefront and Well, that's happening. So that's just you know classic install stuff. I know this is super small and I'm only gonna Yeah, let me I'm just gonna show you the back end really quick So spree ember testing is actually the app that We've got live at testing dot spree ember.com and it's just a rails app Basically, it's just Got spree installed and It's got, you know a couple of other things that come with spree So spree gateway is just like a way of using things like stripe brain tree Etc with spree and spree off device is just a wrapper on device for for off Now spree ams is something that basically takes over sprees API adds a namespace and responds as per active model serializes instead of sprees clusterfuck of rabble so that's kind of like the key of making this whole thing work is just mounting this one gem and Adding some routes to the API It all inherits from spree logic. So It's all really well tested, you know the spree library has been around for something like 10 years now So it's it's really solid So now We're in the process of installing spree ember storefronts And it's asking us to overwrite application So if we look at the diff all we're doing is adding the spree nav and we're getting rid of the the regular sort of title text So I'll do yes And basically what spree ember does is in install all of the templates that you're going to need to sort of customize the store straight up, so I'm going to just run this rail server and Provided you've got that running You should theoretically be able to do this now that's not going to work though because when you're doing engine style stuff you need to give your host app a whole bunch of routes and The way you do that ember style I'm just going to boot up a Ember server back here Where did I put that? So the way we do that ember style and it's a convention that you will see every now and then is You go into your router and you just import the spree router from spree ember storefront for slash router and then The convention for spree ember is to pass the config as well because that's where you config your custom routes so if you want to rename products to like items or You know albums if you're selling digital music or ebooks you can do that. So Also, you can sort of pass in a custom mount path So it doesn't have to be mounted at the root of your your ember app So and now we have a full e-commerce That works out of the box with spree Pretty need oh now I've already got some things in my cart so Just for the sake of you know doing it right I'm gonna just gonna clear my local storage and do a refresh and now we've got a fresh order again So that's kind of how order is persisted. It's just through headers and token Authentication there's a whole heap of deprecations here and unfortunately that's part of the core ember development experience at the moment But they'll go away very very soon guys. It's all good All right, so now that we've got it running I'm just gonna show you guys kind of how it works and how you can bend it to your well It's just ember code. It's super easy to work with so basically what we're gonna do is just write a Cart that slides out from the side whenever you add to it. So Yeah, let's get going the first thing that I would do is generate a component And the ember convention it the spree ember convention is to just prefix everything with spree so I'm just going to put this on my application layer and then So I'm kind of like using file stuff so that you can see the The layout of everything so basically these are all the components that ship with with spree ember And you can sort of use them all over the place. They're all pretty handy and pretty easy to work with So Whoa Not that Okay, so here's our component And now I just kind of know What I need to do to style this And I know this is kind of boring, but maybe there's some ember beginners here. So maybe this is useful I Always kind of just like to watch other people code and maybe pick up like really tiny little things So what I always do with components is I always name them with a class name that matches their name. Let's call it 300px I did this on the bus today. So I Think I kind of remember how to do it, but I may make some mistakes I'm just Anyone got a favorite background color I really like Are you making it up? That's actually it or are you making that up? All right, well, I really like lavender Wait, it's an ER. I think Okay, oh gonna need is the index let's call it nine and I want to put it on the right hand side Okay, so there's our there's our cut. I wouldn't worry about that. That's fine There's gonna be some visual glitches because I'm not I haven't really Got it quite right yet. I Did it on the bus? Anyway, so Okay, so now we need to actually surface some line items here. So to do that. I'm just gonna add a line item So this is like the traditional cart page that it chips with so Now we've got a line item and if we refresh we still got it. So the way we access that is just Actually, I'll just close that for now is just purely through and each so each spree that current order line items as Okay, so now we can see like that's kind of like the API for accessing the line items in the current order It's super simple very like it's a clarity of so Because our spree ember is all built on So foundation I'm just gonna quickly Roll together some like half decent looking markup and Also to note like you can pull out Zerb foundation really easy with just a single line in your rock file or ember See like build file I Think that's what you said it was called Jamie So you can use whatever CSS framework you want. It's it's not opinionated about anything like that all three Sorry again. I know this is kind of boring, but it's Part of the job okay, so you got like some markup and get rid of my little high and Just because I know spree pretty well I Kind of know how all these things are named But it's if you if you need a reference as to like how to access things I mean you can always look in the ember inspector and you can always just look at the model files But then again, you can also look at some of the components that access these things So for example, if I want the name of something, I know I have to go through the variant because a product has many variants If I want the image you know I Got to go through the various things Oops Sorry again. My Vim is a little slow today Okay, and yeah, there's a few things that you can do to access the price But I'm I'm just going to do the display amount which is exactly Sort of what that line item costs not taking like taking into account The the quantity and all of that stuff. So there we have it. We've got like the line items and stuff like that. So That's kind of like some function there now The biggest thing is that we need to make it slide out because I promised that I it would slide out so This is everyone's got kind of their own way to do this but there's like some stuff that comes with spree ember that you can use so Okay, so that's hidden it and then if we add the class Active is that too small you guys can kind of read that But add the add the class active now we can see it so Super easy, but What I'm going to do is In my component just do a class name bindings And I'm just going to bind to the actual spree objects the spree service that you can access within all the components I'm just going to do side cut Open I'm just going to map that to an active class Okay, cool. So what we need to do now is we need to make this active whenever we add the cut so We need to be able to access Whatever's happening on this page so to do that what we're going to have to do is actually access the route file for this page Which isn't installed so That's cool because spree ember actually comes with some generators for that stuff and That's going to install all the routes on the on the app So now I can go in to the route file. I can go. Okay, so this is a product show page And on this out add the cart function in the success callback. We're transitioning to the car page So instead what I'm going to do is I'm going to do this that set and because the routes have access to the spree service as well I'm going to add it here And we want to make this unconditionally true whenever a successful add the cut happens. So that should be just fine Okay, so again, I wouldn't worry about that. That's just some overflow stuff. I Can probably fix that I'm not going to Just imagine that it looks good. So Okay, so that's how you that's how you do that now the other thing that we want to do obviously is to make it so that When you click this this is actually toggling so to do that We need to be able to access this navigation component and be able to add an action to its actions hash Now again, that's not something that shifts with with spree ember by default. So you have to install it through a generator So you just add the components So this is what I mean by it's completely bendable. It's all just classic ember code So any ember developer who knows what they're doing can totally just rip on it Which is kind of the you know the vision for it It's it's just supposed to give you a bunch of stuff to get up and going really fast But ultimately you can do what you want so now I'm going to go to the spree navigation and I'm just going to extend it I'm going to do toggle Sidecut And then in here, I'm just going to do a toggle property and like if I was doing this in a super robust and Nice a way I'd probably declare this property on the spree service like reopen it and do that in an initializer, but You know ember smart enough to know that if that's null make it true and then from there we got true and false So I think it's fine for now Thank you Okay, cool. So now I can just go back to my templates and find that spree navigation template and Because this is foundation. I just like I know that foundation won't make that link look good unless I have an a tag I'm just going to do that. I'm going to do action toggle Sidecut, okay, and now I've got our toggle working. So There we have it, but I did promise that the thing would slide So We got to do that So there we go single page e-com 20 minutes No issues the other thing just really quickly I'll show you guys this this checkout. It's kind of cool So basically you click checkout Spree will advance the order to the checkout state and then once you're on the checkout page It's a fully reactive Single-page checkout that you can program as per the state of the order and when the state of the order changes You can react to that change and show different things on that same page. So basically it's You can do it all through just templating if you want to so if I open up the checkout If you open up the checkout You can see that we can bind the class of the current state of the checkout to the form So we can fade things in and fade things out when we need to we can actually show the current state You know in the legend We've got a spree current order errors base sort of outlet which acts as somewhat like a flash message And then we can do things where we can say if the checkouts is in address, which is actually a bullet Ember FSM adds to that service based on its current state. It's like a dynamic ball We can kind of program our checkout in this like really declarative Way, so yeah, I'm really happy with how it's turned out But it's all very beta mode at the moment So part of the reason why I'm here talking about it It's because I want to get people to start using it and to start making stores with it so that we can really battle test It and make it a really really solid so So yeah, that's everything Any questions? Yeah So the key of it is this This spree AMS jam Which essentially just locks into the existing spree API and adds Sort of a new Subset of routes under API so it's like API for slash AMS and then basically all of these All of these endpoints Respond exactly like the spree and endpoints, but they respond with a serialized version. So it's It's kind of what a way of standardizing sprees crazy API into a way that ember can consume really easily Does that answer your question? right Yeah, it's I don't know Okay, so yeah, I see what you're saying Maybe the thing the thing about spree though is that it the way it links all of its models together and the actual data layer of spree is Is very big and there's a lot of stuff going on and it doesn't really one-to-one with other things like Shopify Because I've had to do some work Importing products from Shopify or like from light speed or something like that and it's never quite the same structure. So I think you probably have a pretty hard time making it work with not spree back But I think it might be like a good reference point To like maybe build something for a different econ framework. I don't know Well, that's the cool thing about sprees it's not Magento It's rails and it's all open source and there's nothing weird. It's you can hack it to bits. It's great Yeah, yeah Yeah No, it does it works with stripe and that's because there's this spree gateway jam and What it does is it essentially provides wrappers for all of the payment gateways or all of the most popular payment gateways and spree has kind of generically model the payment gateway and then you just specify which sort of variant which subclass of that gateway you're gonna use so Where does it they've got like a list of all the gateways that they That they Sort of work with so these are these are most of them I think there's a couple others that you can get working with spree as well So, yeah, it's a good way to get going with stripe really quickly even if you just need to accept stripe payments and but you don't want to write all of the Stuff around it and integrate directly with the gem You can just use spree and and just use that small part of spree So it's not really a best Practice in ember to just inject the service into everything That's kind of the older way of doing stuff, but that is what we're doing with this Which I'm personally kind of cool with because spree basic the spree service basically informs the entire application of the state of The spree back end for that current user and there's a lot of things that need to know about that routes really need to know about it And there's lots of components that need to know about it And I could have made it so that you pass all of that state in Like as sliced down as possible But for the beta and for the very first version I thought it was fine just to sort of have it passed into the components on a global level, so They're aware of it. There's actually um So I've done a lot of stuff with them there in Washington and they used to come Hang at the old office that I used to work for a lot and They were always talking about redoing the front end and making the front end really good But to them the biggest priority was redoing the back end so this guy Ryan big a rails guy started on that trying to port it to ember and Basically had a gupful of it And then there's kind of like this hanging branch on spree of like Some ember stuff that kind of works But for me the biggest thing was like doing the front end first because I want my customers to have an amazing experience I don't really care about the back end too much so I kind of took this different approach and it meant that I only needed eight endpoints and Now it's something that sort of developers want a lot more I think the users of spree really want a nice back end, but the developers really want to give a really good front end Well, it's it was Kind of awful But it's recently got a lot better and I can actually show you if you're interested It looks a lot like Shopify now and it feels really really nice to use So the default login for spree is always spree at example.com. This is like the seeded user And then the password spree one two three So this is the 3.0 back end, which is actually pretty nice. I think there's some angular going on under here I haven't actually pulled it apart yet But yeah, it's it's really cool and as you can see there's lots of lots of data modeling But yeah, it's come a long way in the last that many years but sorry to answer your original question. Yeah, they are they are aware of it and they're working on a v2 API and There's a lot of talk about it and then at one point I just jumped in it was like hey also I have made this thing and They were talking about maybe adopting it at just as the spree v2 API but then json API dropped and We had another really big chat about that and it turns out I think we're moving towards doing the next spree API in json API really strictly So it's just going to work out of the box and I'm not going to have to look after that one gem anymore So yeah, it's free API is going to get a lot better for our single page apps Yeah, any other questions? Thanks very much guys