 Hey, yeah, so I'm Daniel like a year ago. I started my first job in tech and we Use ember like solely as our app so in this talk I'm going to be talking about Like my experiences with ember over the year and some of the cool things that I found about it So yeah, so that's me some of my backgrounds. I'm a currently a junior front-end developer at start up in Cambridge I am on like a placement year from university so I've been yeah here over the last year on placement and this is where I discovered ember I Work for a company called repositive We're in Cambridge and we're building like a web platform for general researchers to share and collaborate on data Yeah, so to last year when I joined the company we had an existing ember app was on ember 13 And We had a pretty small team. There was only over only one other ember developer at the time So this gave me a lot of pretty cool opportunities to jump in and play around with the ember app So, yeah, some of my experiences Jumping into ember in the first place. So at this time, I didn't really have much experience as a JavaScript sort of framework developer. I just had some small Web experience with bootstrap and jQuery and things like that So jumping into ember was quite a challenge and a bit different, but Yeah, so one of the things I discovered quite early on was the fast release cycle of ember and When at the time it was around last August The ember 13 had just sort of been released and we just updated so a lot of the resources I found online I was learning things and it was quite difficult to tell what had been deprecated or not So that was quite maybe a hindrance at first but yeah, and Obviously, we all know ember has pretty strong opinions and as a junior developer. This is quite a difficult thing to jump into So, yeah, so the conventions of ember are pretty pretty strong And they are very difficult to jump into as a beginner But once you once you get going and you know how everything flows you you have a pretty strong idea of how to build your apps in the first place so Everything starts in the URL Which is mapped to the router to a root which loads in your which you can call the model hook and load in your data Which you then can render into the templates and render components from there Yeah, so the first the first real challenge I guess in my ember experience was embracing the conventions and learning the opinions of ember so I could Use these the best utilized Utilize them. So yeah, they were difficult to understand at first, but once I started getting comfortable with ember CLI You get a really strong project structure. You can generate the the objects you need easily and you you just you can really understand how You should be building your apps and you can get to a stage where you're building pretty complex apps when you're still a beginner You don't you're not really an expert Which makes you feel pretty great to end up dancing around like Tom York Yeah, so the second sort of Point I guess this is something I really liked about ember is that you can you can kind of base your development on root driven so you have like states of your app and you get your mock-ups from your designer And you can work quite closely with this and you can build your applications based on on that state And this is really nice because you can you already know which route you need and how you can structure up that way And then you get your architecture as that so you would have Every sort of state it defined inside one route. It's pretty cool. So I guess for example of this and some of my fingers is like a Experiment I have a sketch the example basically is like a small books app and Yeah, so this is the office route The router slash offers So you have like a list of authors on the side Which you could theoretically search through and then inside you'd have the content zone Where the books would get rendered into the outlet of the authors and Then again the next the next mock-up would be the list of books through the for each offer you define that with the offers ID as the Dynamic segment and then the books route in there So you would list out all of the books about that offer in this in this mock-up and and then next you would have the individual book As the thing so this is the single book Route with the book ideas the segment and then you just display that so you would be able to tell just from your short mock-ups like What roots you need and You don't need to really make assumptions on how to build this You just sort of already know that you need four roots and you can nest them inside each other So your router would look something like this And it's really clean and easy to understand so you'd have the authors an individual offer With an offer ID then your books inside that with an individual book And then you could build your templates and controllers around this and this this for me was something that I really really liked early on and it helped me to You know jump in and definitely know what I was doing without much experience, which was pretty cool So something I had So issues I guess with at the beginning was the idea of data down actions up So this is the the premise that like your data flows down from your route into your controller And then down into the components and then your actions would be sent from the component up to the control up to the route Which you would use to update the the values of the data there So that kind of looks something like this your route has the data passes down to the component passes down to the controller to the component And then when you would like what if the component has an action to mutate this data you would send it back up the other way Yeah, so this is this was something I had issues with we had Lots of components that had like several layers deep of components, so it was quite a strong hierarchy And it was quite hard to keep track of where this data was going and where you would be sending it and stuff Especially when you're bubbling actions up several layers so again an example from the the books app from before on the books route So each interval book You can imagine that each each book here is a component and inside this like a book item component and inside this Book item you would have the the cover of the book which links to the individual book and a nested component for a star rating which the user can Update the rating from one to five stars Outside of the route so you can do it straight from this component So if I walk through the example of this you first you would need to return all the books and you would display a book item for each book and you pass the data down Into the component as book equals book and this can get all of your records so next you can start building the component and As I would expect you can define the markup for this So we have like a link to the book the the book cover and a star rating component which is then passed again the book object And it has a non-click action to set the rating From a max rating of five So you would expect to be able to define the logic here and set the rating so you could pass in the The book object and set the rating and then save it to the model but as I found out after Several experiments that this doesn't really work so you end up a bit confused So a Solution for this well the solution for this is you send the action up from the component and So here you back in the book item component you send it the the object up to a action in the controller called update rating and in the rate in the controller there's the Again the logic from before where you simply save the book rating and save it to the model Yeah, so that's a simple example where you're nesting it. Well, you're passing it up two layers but as I found out before if you have several layers of this it can get very confusing and I got lost many times trying to do this So finally once you've done this you can pass the the action to the component call So here we give the book list or the book item component the update rating and As you can see you the user would be able to click and update the rating here So yeah, that would be the working workaround of the data down actions up so Another strong point for me being a member developer over the past year was the community Especially like events like these I Like felt very included. It's very active and I definitely learn a lot every time I come here and to ember camp and stuff like that I've also had some really great experiences with some of the like maintainers of add-ons if I've ever had an issue People have been you know more than happy to jump on slack or a Skype call to help you out and give it up So that's been one of the the strong points for me as a member of developer over the year So yes, this is sort of summarize the the lessons I've learned over this Over my career as a ember developer The first would definitely be to embrace the conventions I guess this is the the first learning point for any developer especially With the lack of experience I had before learning this was a strong point and you know You jump into building the apps very fast once you've understood these Yeah, you can feel pretty Experienced without really the experience the second lesson Was following the root design root driven patterns in your design so you can work really strongly with the designers again and I like the idea of being able to turn more cups straight into roots and it's just a nice flow and Again the data down actions up flow. This was one of the more confusing points for me and once I got this I was Yeah, much happier and Again being more involved with the community You know it's really helped and I definitely think it's one of the main reasons why being an editor developers pretty great. So, yeah So I guess more about the future I'm excited to see where ember goes and there's been some pretty cool developments recently Excited to see what happens with root ball components and The work that's been happening recently with glimmer 2 has been pretty exciting and again staying involved within the community and Being a part of this is it's really cool so Yeah That's me Sure So I had Some issues with our ember symbol off package before And Marko was more than happy to he jumped on a Skype call with us and helped us out and that was pretty great and I've spoken to like People from dockyard on slack Because they have obviously many many packages and got some pretty cool assistance there. So, yeah Like Sure, um, what did the ember guides are? Pretty great now They're probably the best place to start like there's a whole walkthrough of every sort of concept of ember There's a few blogs like ember igniter and Program with Eric, which I used quite heavily. They're pretty cool Yeah Yeah So it's a rendering engine it basically improves the performance of the rendering of like the HTML bars templates It's been a lot of work on that recently