Bestand wählen
Merken

An Illustrated Guide to Ember

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
my my
how's that sound therein here we well on high Bridget Warner I I decided to illustrate my talk because I wanted to appreciate out where Amber on had come from and how far it had come and I think there are a lot of and there is a lot of value in legends in storytelling I especially in a community that's growing up to look back and see what it used to be like that we also have this is a common practice in development already the we reflects on the story of our code can why things were written way they work on and we also do wrecked retrospectives where we prepare ourselves on to look for the future by seeing what we've done already the so I work for from a small company in Baltimore and me my pants came all the way out here to Portland and I also brought a cold with me so I apologize on advanced but stick with me from In this could be a fever dream more than anything but of little defined yeah we also about 100 here so does the exciting so I work personal something called Al on based in Baltimore and a former teacher on that came into our development from there we also have some other former teachers from Baltimore here to on so once upon a time as the story is always began and and in our case so it will be specifically in September 2014 so if anyone remembers where Amber was that during that time so and you want to solve really big problems on specifically in an area of school finance comments there are spending on students there is a huge lack of transparency and equity on in finding right now for schools and so we wanted to build something that would help on bringing more equity to the way that we fund schools and in order to have that happen we have to something and to make it more transparent and so that heralded the story is going to be because why not the and I don't just think of this as an individual person she is representative of an entire team of people that have been working on this product she lives in the Kingdom of Amber down where we have city hall and setting stay on our part in we have around which is setting the model on City Hall and we also have are out are a steel bridge are out loading of goods ends I know this is now deprecated at the time of creating this fact we still had the side concept of you now because it's umbrella and she has In evil stepmother and evil stepdaughter error stepsisters she was not allowed to work in the range coworking space she had the work from home I'm from her office hot i which is full cobwebs in very actually of that's OK because she loved what she did and she was setting out to build something very ambitious on the so what balancing is do a show thousands and thousands of lines of school financial data and the best way to go about this was to show it in a table form and to keep it organized and semantic so there were 4 things that really had to do it had to render quickly sortable it also had to be filterable it was really really important that it was semantic as well the part of building a product for school districts means that it needs to be and what is called Section 508 compliance so it had to be a table for a i huge collection of dibs on so it's much easier to be screen readable and so because lines we build this table at reclaimed 1 the while the reality as it it looks more like this kind of table the and so the desired table was going to have the thousands of rows that you can easily see end this is built on top of a rails API and it's also using Amber died so we have are seeds of our are of our idea we know exactly what we want to build and were choosing the 2 order build it and because we're building something really ambitious we chose to use amber and so was he planted the seeds and created the version 1 of our ap we were super excited to see what would become and version 1 in our case was this shiny amazing word instead of pumpkin because yet again were in Portland and we have heritage words here and it was so exciting and so shiny and we knew that this was going to do exactly what we needed to do this is definitely going to get us to the honorable however something strange happens when they were rendering only around 200 rows was taking us 6 seconds which is unacceptable something that should have been around quite easy to do was not working for us and so what was going on we had
some deceptively simple issue now sit typical table with the table header and a rose the full of financial debt and for school districts it's not just number rows there's also College of columns because you have to have a different budget lines with on not only the available amount spent announced but encumbered amounts which means that the money that's committed to other things so this table had to show a lot and if you notice something is lurking here and if you guys reusing Amber back in followed by 2014 you'll remember exactly what this was and these were wicked wicked fairies the and they were
called Metamorph script tags and they were everywhere and couldn't get rid of them they were just all over your table code to the point that was almost unreadable and so now that we're looking under the hood of our of our ap it doesn't quite look exactly what we thought it would be because back in September 2014 we were using 1 . 6 . 0 so this means that we were still using the Metamorph JS library and we're using Blank script tags to carry metadata further handlebars templates so rendering all of these rows was very very slow so because and is not to be daunted she is going to find a way to make this work would it's unacceptable to house 6 2nd rendering times from the table so we're going to bridge from the 6 seconds to something like 1 to 2 seconds to render using just some simple pagination of all these Table rows there some
concessions of we can only show 50 rows at a time and this meant that because we had thousands and thousands of rows of financial data that we had to show hundreds of page links and because it took so much time to render all these page links we had to use a couple hacks so the 2 necessary hacks and so the only time I show a little bit of code 1 of them was so that we could constraint the oxide note because our team is from a Rails background you will see cause effect so New version 1 of the Act was written and so on so a whole bunch of code just so that we can only show 10 page links at a time on and so this cut down to just fractions the time it took us actually show this and so we had to have offset so that as you were to the extreme of the lower end the pages and then you got to the top of that on it would actually always show the same number of page links and would also show you you're on the last page in your 1st page links as well the 2nd half that we
need to do was because if user was say on page 4 100 they had gone all the way through and then the added filters that could drastically cut the number of data on rows that they're actually looking at so what we had to do was in 1 of our out right this little transition to that would keep track of the max number of pages and then if you user filter for something and drop down to just hand it would actually transition them to page 10 instead of leaving them on page 50 which are page 400 which had no doubt in it so those 2 acts were were kind of acceptable but we were still
fighting for every single millisecond because we're using Ember Inspector anachrome developer tools to their fullest so that we could get this to be as quick as possible because we were in our development spaces we take it for granted that we have a pretty good Internet most the time however in the school districts they don't always have great Internet it cuts in and out and sometimes it's not fast enough to be able to load things that are JavaScript heavy quickly the so we're super happy when and the 1 point was released this was on October 26 2014 so we jumped on it and we celebrated we were
able to upgrade to that's and I'm sure many of you remember why this was such an exciting release and for us it was because we got this really cool new engine called the each email bars on rendering engine that would let us render all of our rose without all of those Metamorph tags so instead we would actually done nodes and substrings of HTML so now at this point were rendering 4 times as many rows per page much much more quickly this and so now are really cruising
V 1 is off to a great start is moving so quickly at this point because now we're launching with our 1st school district and then our 2nd and then a 3rd and we have users they're using this and it's actually rendering fast enough for them it's rendering quickly enough that they are a super excited to not have to use these legged legacy databases that they used to look at financial data before like newness and so everything's great we make it to our and the ball having a great time we're doing user testing we are put using analytics to see how the apps being used checking up on speed everything's going great um er school based on a district basis are customers are super happy they can look at so much financial data so quickly that they have a no qualms about being able to staying in greater communication with on their faculty and also between the principles and the districts which means that because they have of access to the data in real time making can make smarter spending decisions as already moving toward on that equity because it's starting to reveal differences in how different schools are funded however as you will remember the story we've hit a snag we've left are glass slipper on the steps we've gone home a and look at this snack the wall the sudden were seeing this air pop up again and again and again it's some weird unknown bond and it's always type error undefined is not an object and when we use that the way we think users are using there's no bugs showing up in the Consol we can't see anything that seems broken we cannot figure out what is going on end at this point is starting to become noise the by and has a hunch it might be something and it sort of face Paul moment not your hoping that it might not actually be that but 0 yes it is it is the users using the back button to clear out filters so whatever they add filters the data instead of using these large friendly axes that we have to remove them they're using the back but and because the way we set up the filters was using on a hash of filters because they were all grouped in different categories but it was removing it from the URL and it was also removing other the filter from the data so that it was rendering correctly however it was leaving these filters in a dog and so visually it looks like the filter was still applied the which is super fostering frustrating to the user and so they would end up in the stands of then trying that acts out the filter and use the back button and it won't be causing the act get into this endless cycle and eventually just freeze and that was the cause of the air was the back button and so the the this is so surprising when you are talking about people that are using now that are and principles or at thought that district official level but it's a different generation and a lot of people that are intact right now and so you have to remember that these are the same people who is the biggest features that we shipped was being able to print the tables on you have no idea how much they ask for and how excited they were spilled the prince because even though they could look at the static in time they loved being able the printed so knowing that you understand why they loved using the back button and silly find we we hadn't even where there at so we assign the instead of making incremental changes we are going to completely redo this out or a rewrite from scratch because why not we're going to do a version 2 the and version 2 has to do a couple things now it needs a way to keep track of state so that the DOM is always reflect changes triggered by the back button also the redesigns and have to make filtering a lot easier so that you can they still use the back button it it's more appealing to actually and edit and delete the filters on the data come and then just a thrown a wrench in there we decided that we were going to have infinite scrolling instead of pagination and on top of that the infinite scrolling would also have to be matched up with a bar chart of columns and so they always need to be in sync that is a story for another day because it's still intolerance I and so in all this would have been an opportunity to use a different framework or a library like umbrellas glass slipper and murder continues to be a great fit for us on the release schedule release gradual the continuous improvements on by the core team by the community on meant that we decided to stick with the number In because you don't wanna change too many things at once we stayed with on 1 . 1 3 while we were doing the redesign so we're very much looking forward to glimmer to because this will be huge for us to be able to render the tables even faster and so as our ap continues to evolve and we can look back at how far we've come and the same time I'd like to think about war on and the as well and are use of that I so now that where I'm at the close the state of war right now is that we have an app that's being used by school districts across the country all the way from this coast to the back to the east coast and in between arms as being low tested by hundreds of users on school districts everywhere and Amber has performed beautifully but were rendering billions of dollars in school financial data and I believe as of this talk we have the largest collection of school financial data in the entire world right now and the emperor's handling along so that the thing that we chose something ambitious because it's only become more ambitious and it wanted to take the end of my talk to bank everyone that's been working on it because it's been part of why we've been successful huge part and so on I wanted to recognize how all of these improvements have a very real concrete on effects on the people in the community and people's ability to build a really cool things that are designed to make this world better that's a
collision my talk thank you for listening you can follow me on Twitter @ bridge water and so if you have any questions and against the thank prominently so then what you mentioned that you did that lot of user testing as well like to find out the thing with the back button stuff so I would be interested how you like combine member and user testing because like we have something issues like spending a lot how people use of replication and if there's something you use especially for the the user testing yeah yeah just a simple on it's a small script just a few actions open-ended actions we want the user to be able to do and we just turn a computer camera and film at and then the whole team will watch the video later on and it has really surprising insights things we never expected on number a million years could have of predicted that the user would have used it that way I also think that on what's been really useful for us is using mixed panel I'm sorry familiar mix panel it lets us do analytics on specific user actions and so we look at that really really closely when it's surprising difficulties in AP was on users being able to log in remembering passwords and so we saw was inserted tracking failed versus successful organs and we were able to make some changes that need it much easier for them to long and on and you can actually see with that that the improvements that's also a good way of tracking from the way we call at the back button here was using bonds that and then seeing that come through a lot and sometimes the last thing is I try to do stupid things about things that make no sense of clicks that are really doing anything that I can think of but if it's possible to do sometimes it can lead us into really interesting weird things that and charter bonds that the we can then identify the I keep thinking examples I call last 1 Summary users were we we don't know what this bond was coming from is another weird 1 they were saving the back to the desktop and then what and then double-clicking on activation Odessa promoting and it loads it so it looks like it exists for it's just yet so you don't any thank you for the and fill assessing questions thank you again thank
my the
Selbstrepräsentation
t-Test
Versionsverwaltung
Bridge <Kommunikationstechnik>
Raum-Zeit
Code
Bildschirmmaske
Datensatz
Spannweite <Stochastik>
Informationsmodellierung
Code
Softwareentwickler
Ganze Funktion
Gerade
Elektronischer Programmführer
Zwei
Gebäude <Mathematik>
Güte der Anpassung
Biprodukt
Office-Paket
Videokonferenz
Summengleichung
Flächeninhalt
Mereologie
Garbentheorie
Wort <Informatik>
Ordnung <Mathematik>
Tabelle <Informatik>
Fehlermeldung
Subtraktion
Punkt
Zwei
Zahlenbereich
Extrempunkt
Code
Metadaten
Datensatz
Einheit <Mathematik>
Freier Parameter
Programmbibliothek
Skript <Programm>
Übertrag
E-Mail
Gerade
Tabelle <Informatik>
Soundverarbeitung
Nebenbedingung
Filter <Stochastik>
Bit
Physikalischer Effekt
Gruppenoperation
Datenmodell
Versionsverwaltung
Zahlenbereich
Binder <Informatik>
Code
Homepage
Homepage
Sinusfunktion
Teilmenge
Weg <Topologie>
Datensatz
Total <Mathematik>
Extreme programming
Schnitt <Graphentheorie>
Knotenmenge
Datensatz
Punkt
Softwareentwickler
E-Mail
Raum-Zeit
Homepage
Internetworking
Punkt
Momentenproblem
Fakultät <Mathematik>
Versionsverwaltung
Summengleichung
Bridge <Kommunikationstechnik>
Synchronisierung
Videokonferenz
Übergang
Dämpfung
Datenreplikation
Mixed Reality
Skript <Programm>
Spielkonsole
Figurierte Zahl
Softwaretest
Umwandlungsenthalpie
App <Programm>
Filter <Stochastik>
Webcam
Typprüfung
Physikalischer Effekt
Kategorie <Mathematik>
Datenhaltung
Güte der Anpassung
Entscheidungstheorie
Scheduling
Generator <Informatik>
Twitter <Softwareplattform>
Aggregatzustand
Tabelle <Informatik>
Fitnessfunktion
Sichtbarkeitsverfahren
Subtraktion
Selbst organisierendes System
Stoß
Wasserdampftafel
Mathematisierung
Gruppenoperation
Geräusch
Abgeschlossene Menge
Zahlenbereich
Analytische Menge
Framework <Informatik>
Weg <Topologie>
Reelle Zahl
Hash-Algorithmus
Programmbibliothek
Soundverarbeitung
Quick-Sort
Programmfehler
Objekt <Kategorie>
Echtzeitsystem
Last
Basisvektor
Dreiecksfreier Graph
Mereologie
Speicherabzug
PRINCE2
Videokonferenz
Lesezeichen <Internet>
Code
Dienst <Informatik>
Ereignishorizont
Bildschirmfenster

Metadaten

Formale Metadaten

Titel An Illustrated Guide to Ember
Serientitel Ember Conf 2016
Autor Warner, Brigitte
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/34723
Herausgeber Confreaks, LLC
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract We'll approach Ember as an illustrated fairy tale: drawing upon the power of story telling to describe the creation of an Ember application through its inciting incident, caste of characters (object model), and the conflicts that arise and how our heroine overcomes them through wit and cleverness.

Ähnliche Filme

Loading...
Feedback