The Art of Mastering Ember: 7 Key Strengths

Video in TIB AV-Portal: The Art of Mastering Ember: 7 Key Strengths

Formal Metadata

The Art of Mastering Ember: 7 Key Strengths
Title of Series
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Slide rule Computer virus Slide rule Link (knot theory) Multiplication sign Debugger Bit Mereology Front and back ends Wave packet Revision control Inference Type theory Medical imaging Process (computing) Internetworking Energy level Video game Software framework Summierbarkeit Fundamental theorem of algebra
Arithmetic mean Spring (hydrology) Open source Multiplication sign Online help Musical ensemble Student's t-test Cartesian coordinate system Neuroinformatik
Web page Greatest element Game controller Group action Link (knot theory) INTEGRAL Markup language Connectivity (graph theory) View (database) Multiplication sign Disintegration 1 (number) Insertion loss Mereology Focus (optics) Template (C++) Subset Neuroinformatik Programmschleife Bit rate Hooking Root Electronic visual display Computer worm Software testing Endliche Modelltheorie Computing platform Descriptive statistics Position operator Home page Dialect Digitizing Electronic mailing list Shared memory Cartesian coordinate system Tablet computer Category of being Shooting method Software testing Right angle Key (cryptography) Object (grammar) Spectrum (functional analysis) Buffer overflow
Web page Dataflow Server (computing) Euclidean vector INTEGRAL Feedback Multiplication sign Disintegration Source code Execution unit Time zone Focus (optics) Subset Front and back ends Bit rate Authorization Electronic visual display Computer worm Convex set Software testing Arrow of time Loop (music) Dependent and independent variables Software developer Feedback Electronic mailing list Database Cartesian coordinate system Particle system Uniform resource locator Digital photography Arithmetic mean Software testing Right angle Key (cryptography)
Web page State observer Greatest element Beat (acoustics) Link (knot theory) Disintegration Execution unit Calculation Web browser Focus (optics) Number Computer worm Arrow of time Endliche Modelltheorie Error message Hydraulic jump Forcing (mathematics) Feedback Electronic mailing list Total S.A. Knot Residual (numerical analysis) Inclusion map Voting Order (biology) Software testing Right angle Key (cryptography) Freeware
Web page Group action Multiplication sign Disintegration Focus (optics) Field (computer science) Front and back ends Type theory Hypermedia Term (mathematics) Computer worm Endliche Modelltheorie Error message Authentication Stapeldatei Structural load Web page Electronic mailing list ACID System call Landing page Hierarchy Type theory Subject indexing Arithmetic mean Personal digital assistant Website Software testing Summierbarkeit Key (cryptography) Electronic visual display Family Row (database)
Web page Dependent and independent variables Game controller Electric generator Real number Multiplication sign Shared memory Computer font Front and back ends Neuroinformatik Revision control Password Arrow of time Endliche Modelltheorie Error message Family
Reading (process) Game controller Group action Mobile app Service (economics) Concurrency (computer science) Open source INTEGRAL Multiplication sign Disintegration Sheaf (mathematics) Set (mathematics) Focus (optics) Lattice (order) Front and back ends Ideal (ethics) Computer worm Software testing Software framework Office suite Error message Task (computing) Form (programming) Theory of relativity Projective plane Shared memory Residual (numerical analysis) Digital photography Software testing Right angle Key (cryptography) Reading (process) Computer worm
Module (mathematics) Reading (process) Euclidean vector Software framework Power (physics)
and so on and so on for and how had and today I would like to share with you find recipes to master Amber but I put together for the past year and a half you can follow my slides on slide that come slashed Ruby calling uh embers best share and for the light version of meaning singer clicking has slashed life and then building Monet's secretly another petition for 8 8 years and before starting at learning Amber at that time I was working in the API and the UI using the same framework but I find myself quite limited with the front end and I was spending a lot of time trying to make things work so I wanted to experiment with the new imaging front-end from and up in my new job it happens to be react not the ever since ever I have to get my 1st ever to get in october 2015 it was about building a link with a and part type and as you might guess things you get a bit more complex after as studied in my so on mastering Amber because I wanted to ensure that I got the fundamentals to push my skills to the next level to and a bit about myself the I'm a lot label which I live in dust and this is London as a Council by like sums of hidden from young treated at loaded with each and on the internet at Ruby cooling I was when outside on the natural I mean 2 hours right by train in a town called Paris inferences for says
when on in front of my computer but I do enjoy boxing and that you can find me on several music
festival in summary Europe the and the next 1 will be in Portugal is about I do love traveling and I spend some time as like spring in Asia and in the living in China for 1 or 2 then we are happy to finally for and the West Coast and particularly important so thank you for having me in your amazing sit I would like to say things and show my homework the company I worked for and especially name each go he'll art is CEO for its supporting open source and giving us the chance to use of some technology at some of the more we are building an awesome application to help teachers create quantity homework and provide a means of meaningful learning experiences for students once we school are in the UK are already using our suffering that is mainly based on amber and maybe so now let's have a look at my school book the to the art of mustering member the 5 2 strands ends here are
the recipes that we will cover today let's dive straight into the first one which in my opinion is 1 of the most important ones which is organizing your own rocks the so today we're going to build a platform to share food recipes online and when you arrive on the home page you have the list of all the recipes and so to access the spectrum to be of some stated and I wanna do is when a user click on recipes it can display the list of ingredients without leaving the home page so you can just browse around and see if you have all the ingredients needed for 1 recipes in reach out tonight so let's have a look at how we
build this book MIT ingredients the way to do that I will be to have your recipes testing on on under of subjugated folder because of the same you need to be like them to see the recipes the and a new governance and user model and the ingredients model which is for the public so now let's have a look at the complex In the someplace we wonder of the list of recipients each and I was election viewing begins ends when show ingredients is true so if showing regions in the computer computed properties true then against is above we buy the recipes ingredient component along with ensuring the and by In the bonfire warehouses computed property ingredients that we compute over the selected recipes the when we click on and we attending regions for the selected recipes the action during regions said the selected recipes and then to of the property showing the those so you can see it or not the for and then In our component the model we have a close action that will the property shooting rhythms to true or false to close or not the product but wait what happened when on to share our it ingredients this of so the thing is if you want to share this leads directly to a friend's because you probably lazy and want to get the shot on doing your in grocery shopping and how do we do that because basically the part that is activated on a computed property true or false so you will not be activated by the user that we see in right so the how things work the the way to do that is to have a dedicated rot so you have a dedicated your out so here you can see and the news arrested is inside is older now we haven't imminent older we had a controller the relics and the template and now if we have a closer look at at some place we can see that we have the direct link to the ingredients so you will be always activated In the ingredients don't like now we have the model that displays a book but with a list of ingredients the so we need to know right here if we have a look at our HTML markup when do we observe in that the ingredient for that is actually displayed right in the middle of the regional market and this is not really what we want because we might be struggling with CSS is the book that is up at position of so it's it might be on the overflow won't be at the same no not going well if the robber and is shrinking or something that so what we wanna do is displayed above that right at the root the top or the bottom of our applications templates so the that's master it's here you can see in your of folder that you have this handy application that XPS will fight it is worth we display the outlet in your wall applications and wanna do is displays of model the book that just after this outlets here we use the queen outlet it's a for he could fire but it basically down behave like a regular objects expected loss to have a nice slating emissions so how we do that How do we inject this outlet into and the main topic that age we use a handy hook In our ingredients rocks in and around the time that and we just use the stronger object model into applications who had we master I already guys for the similar recipes to so now in the importance of integration that's the the the the the so and now by monitoring in that you wanna we use a component which will display and have a display the list of recipes as agreed on the home page and probably won't do is displayed a list of recipes as a list and great for the dessert page so how do we want to achieve that is basically to build a component right and here we have our time place for the home page indexed on but this is this where we loops with the model which here is a collection of all the recipes and we're under their aggressively entry components and basically is pretty much the same for the digits combatants and the common we're going to the complaints and this year the model is a collection of different and that of all the recipes so we use sure all of them and we displayed recipe entry so what our component looks like the basically on a chunk of HTML legislative but title poster date and rating and the when we tell that is probably with and acceptance test here I we did the index page ends we test that we actually go to this page with and then that's on our recipes are displayed as expected do and then we pick this 1st recipe and we check that and the description of the title and rating are under as expected literature and because every time you have to be the first one and then if you look at the accidents and best for dessert pretty much the same and to be honest we don't like occasionally the so yes must the way to do that
will be to I keep it really simple in our acceptance tests and on a desert the meaning that here we that we go to this URL that such recipes and that we have all the recipes is where expecting and then can and the same for the is speed the no In our intuition that what is nice is that you can test everything you want as much as you want and the photo title Hansa date of ratings for 1 of the main let's summarize acceptance tests are much more expensive white because of this flow you need to build your whole application which is not needed in your intervention that's because it's outside of the convex of an application so integration tests are much faster ends because you might be reusable having a strong integration best instead of testing is gone but every time in the accidents test make it more reusable and intervention test and make it possible to do but every developer love to do the and chairman master right and as I always say at work a good test all story and particle ID with intuition test so you can best the photo title author date rating and just by reading it you actually build a kind a documentation so now let's go to our servers the what your ideal pages the the it is something that a lot of as front-end developer struggle with is that we prove the said so with something that is not perfect talking about they don't response from the server because the feedback loop with the back is sometimes we unite and if you team is distributed in different time than indebted to form the it will do good that so for this 2nd example the here we wanna display our cities again on the homepage and as you can see here we have the pagination 1 2 3 4 3 is a light since I latent source and you will have the arrow to go to the next collection of the next list of recipes the so what is a back and response if we don't tell them anything
they will nicely I give us the use of recipes and some of here so they would give as a to the constant this 100 26 recipes eliminates 10 and the offset 20 why because probably the do request to the database with this unit an upset so it's pretty handy for them to respond we met to the front and but do we really have need an use that in the not really to be honest
because if you want to know the total number of pages that you have to do to become divided by that will run that give you certain pages so you can build your pagination with a number of and then in order to highlight your Moses free In the current page and this is with the by pages minus 2 pi bonds minus of said divided by unit page 3 the and the I don't really like to do that kind of speculation if it can be handed by the Bakken right the so let's make it work end by making it work I mean reducing the feedback loop the the API because it's easier for the back to add up to the front end and that the other rare out and include the calculated value for us so we don't have to do that in the UI so if we could that to the back and being really specific is where we can have and she pure and easier for us to work around that so what are the sheer emitted that are we on received observations 25 and page number 3 so we can highlight is page 3 and begin to to but the we can muster its how using design API why I don't know if you guys remember where on
the bottom right of the page where these are open and we have no idea how to activated this arrow to go to the next layer and collection of recipes and it was designed what is really handy it here at the bottom you have the links so you know what is the page itself 1st press next and last and what is behind as well it at the back and answer as with is the right HA calls so we don't have to build that in front and as well so we masters the the now let's jump outward force recipes and everyone is still ready am which is focused on the user experience the so here what we wanna do is we wanna have a look at our recipes and promoted as 1 minute we have it was this it's our own recipes of the residues from someone else and we probably want to do it 1 of them so how does it work you click on 1 of them probably attract friends and then you have this nice the confirmation vote I ask you to do it so you click on it and then you are redirected to the list of recipes but what happens is when you are redirected to the of recipes you kick back then you will see this book up again but the data has been struck right so he's not here anymore so you probably will have an error page so let's be honest sometimes we do not on say beat on the date that at the user clicked on the browser back button so we don't really care about that but we should say so let's make it work how so here we your model ends I we check in the indirect coke Inderjit crawled is a model here we have a subject so we have the value is the test and if it did it is true then we run directly user anyone of nemesis but the good right but we can master it the and how do we do that how do we actually completed prevent the user to try to fetch this page disrupt we do not in the
the reciprocate action meaning that 1 should just try the recording you actually tweak a big big brother is history saying I did the previous wrote in the brothers straight and I replace with my new rot and here we passing that or some ticated . recipes meaning that the user I will also always be redirected to authenticated recipes the click on the back button and not on so that any more so when master it
the there's another example search field and characters added to the euro so here we wanna search a arrested is that contains 2 bytes the who doesn't like to go the so let's say we do the bones but it's our grandmother was using the website and she might type 1 and when the letter out assignment was who type and even if the bones she doesn't really work right and she might be the and yeah call that again if she had been back button she will go straight into search she has a very the user as acting no idea what is going on because on using URL challenge but the page right the to not really nice nice user friendly says that's master it's the here In our 0 sum TI-digits its index rods well we did is we have the search party terms and as we know when requiring we can do we fresh model true but we can as well use handy methods we place and you will replace the big i last search with the current search so the last search will be sure collates and will replace the last 1 so every time she will hit the back but then she will be actually had and landing on this perfect painting at the list of recipes or some things you have search way before the we master it no let's jump into our blasts and at least 50 recipe expected the unexpected a so the media amber from March matches is the way that really is very easy to display the loading page and and error page so you fix when we try to access a rocks with a slow model meaning that the back end is reporting responding slowly to the I get stuck in sometimes under we try to display a landing page the and it will start by searching the following year Iraqi so recipes batch recipes . loadings then he will go read out in the folder authenticate adult loading or subjugated dash loading and then at the very top of obligation loading or agitation bachelor thing so in our case where we can use a is we have our recipes and we
can have loading AGPS talk later nesting in there share so she is complex and so the user now knows that if something happened with the back-end response in other recipes are living can so we had to go so now let's talk about error pages but we do have access to the a nice feature which is a catchall as this would catch on with a password cars so every time there is a non non font brought it will go into that cattle it's a generator for full page and we have generate conflict page for that for for this is good right end In the same way we have looting pages there exactly the same button for error pages so if for some reason the back and might happen as well and that's a real story but don't respond as well respond with erotic then In some we have the arrow that HBS that's an can display a nice that page with an error page that we can master it by having a dedicated bear or age for let's say our recipes and what is nice is that nested under recipes you will have an era folder with erotic that yes and in this 1 that yes you have set the controller the receive controller and model it's important to know is I whenever there is an error page the model is automatically the errors so here we send to back tonight to rebuild iraq and we set the error message to display in the plates yes so now we
have Don placed where where the user know what's happening that the latrine error and it's not like his brother but is not working it is not is a computer that respect but this actually there was a back and you can't see the error message and click back if you want to go back to or subjugated so when master at as a master we should anticipate 1 more thing it is
when we create a form we wanna create a recipe it might be as well that the back and ideally to be slow to handle the request the POST requests and we don't want the user our grandmother for example busting her recipes to click again on the button because the thing that the residues is not bust yet ends share what we can do is and L on their value if it's true that he will display messaging saving and we can disable the click so she will not click to time on the submit button the and here we can see in our controller we sets in some interesting this action we on their true as soon as we start section then we say the mobile and as soon as it's safe we disable on their on air service not stuck so it's pretty good right that concludes to master it hello by using ember concurrency and as with Amber conference in there is no need for it this on their true and false and manually sets in our actions with on the conference you can just on perform a task you will try to save them although and he will catch and there is there's an error the and the nice feature is In our time we can fetch the that is running to see if the task is actually running so don't know any of these on their truffles again and they muster its the so that's the do you have quick summary of what we are seeing today we have organized your own lots this and the importance of integration tests we've seen how to mark your ideal payload and be friends again later that you colleague from the back end and how to focus on the user experience and expect the unexpected so we can have a chef
now right so what's next how to be a masters you can get involved in the community by any single their embryos that its at slack intimate apps the and you have to know that a lot of open source projects are actually broken so if you find something that doesn't work you can probably help here is some in legal come out and in our offices initial Mama explaining lazy entrance I select session it's on you to and it was pretty awful you can as well be the official documentation because it's always better that meant could be based in front of us back of a photo accuracy and we the official the relation because they will happiest heated up and this transition from mark and I best as well to read RFC and comments on then it's a community of Arts and did you want so the framework and improved here
is a module unification harassing where pretty much everyone from the commoner gesture achieve common them and lastly we can create another and for it because the last thing that will happen it that's you are the only 1 using it here's another 1 that MDL as created for from walmart but actually that people are using it FIL get come and could on I have my