Bestand wählen
Merken

The Great Migration: Redesigning and Rewriting our App in Ember.js

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the and and
and they get this like out of the way so that you can also see me welcome thank you for being here Good afternoon at they had like to share with you the story of redesigning and rewriting our application and amber
but 1st let me introduce myself my name is Jade Applegate and here's me down a picture making a friend at al cafe in Tokyo you can find the online at Applegate most places on the internet mn here and on the
left in the pink sweater and I wanted that microphones so bad I think I thought I grow up to give a talk at ever come and I wanted to get prepared early so last year was my 1st ever come in this year's I'm speaking so I guess trains you really come true and I worked this
Basohli which is the real time content delivery network and I am a software engineer under user experience scene vastly is the
global CDN with caches all around the world as you can see on this map and a global network is that in varnish which is an open-source cache-control language as I
mentioned on on the UX team where we work on the customer facing you why this is 1 you i for all customers where they can manage their accounts manage the billing manage users see real-time analytics and and we also put a lot of functionality into the hands of users through guess configurations for managing their cash services Ch
so what are we going to discuss today here's a quick overview so you know what to expect for the next 30 minutes 1st will talk about the
rationale for migrating to Ambon the approach that we take the results of our work many many lessons we learned along the way and the next steps of for what's next for a project and team so let's get started I remember this
guy from last year and last year it ever come from that a lot of people you were using and therefore side projects but not in their day-to-day life as engineers and as more and more companies adopt Ambrose the framework of choice it can be helpful to hear about a company is successful moved to moving timbre so whether you're considering a migration yourself or are already in the midst of a similar project or maybe just getting our feet wet with the framework I hope there's some content here for everyone so now that I've given you the rationale let's ask ourselves the question
the why would you ever do a rewrite I for those it perhaps once so what we're rethinking but this project was originally only attack rewrite a port from a backbone CoffeeScript apt to amber but of course like any good software projects the scope changed and that led to some design changes which led to some information architecture changes but regardless of the scope there wasn't a few things they're not really possible with the existing legacy apps it was hard to quickly make changes in the
out and we had no test coverage which meant that we had to a lack of confidence in any change that we make it yes the we had a lack of code consistency so for example there were about 5 or 6 different ways that I found the that implement a modal throughout the application and that's probably bad so we also had a lack of modern architecture and on are backbone half was deprecated and no 1 wanted to write and copies to be honest so it was hard it and find people wanted to work on the project the application lacked rich interactions because we're too busy trying to figure out whether something was working on either whether a break somewhere or not so and the design decisions that were made for it were made based on the designers feelings rather than perhaps user research and testing which would have been a better rap the codebase had no real ownership so anybody that new even just a little bit of Java vector copies script in this case could contribute to it which in a way it's good but in another way is very very bad way to maintain a close the there was a user experience steamer anything that goes captured all together and there were dependencies on other systems throughout our stack a really strong example of this is our slope was are very slow deployment process it took around 1 hour to complete and maybe 2 is something wrong this is completely unfeasible and software so we have had to do as she manual chef builds manual Jenkins builds and lots of double checking in nature that once we did deployed it changes were propagated across our happen didn't break something else that we were thinking of because there was no test coverage for that was the only way we can really inches something was was working the so an
important point that I want to make here is that you can fix every single 1 of those problems without number we could have definitely started working on those things in our legacy application and fix them but we wanted a few additional things to go along with it the we wanted to use
embassy allowing for the built-in conventions that comes with the novel goodness that embassy i has we have some in-house knowledge of someone who had done a little bit of Amber programming before so wanted to take advantage of that and tracks into a remote dev environment meant that we didn't need to rely on any other systems in our so this meant that new team members could contribute on day 1 and also meant that the consultants who work with us were able to get up and running almost immediately so what those
things in mind we decided that the rewrite is best for us and rather than resurrecting the old apple we began rewrite we decided use ever cost or I wouldn't be here and this included a few
steps so step 1 was for us the learn number and we went through every stocks online tutorials in-person workshops and the consultants that came to work with us in house as I mentioned that it's all really brought us up to speed and number land and so in the beginning and the end of 2015 we got started with 14 over our account and billing sections and that was really before we had a sense of pride structure or components or really even how to use member data well so those sections they were they're not elegant but they still need a little bit of a refactoring out that were done and some other more complicated places in our code hit another part of our modern approach was a focus on testing in the importance of test coverage in our I we use the cue unit and Mirage and having every feature tested helped us feel confident our code and we don't wanna get into this area like the before where it to manually test things to see if things were working we also wrote test custom test helpers to make it easier for us to write more semantic test and the test coverage the confidence in the after it has found was a big upgrade from application which had not but also made us feel more comfortable working in the code so components we use components like it was our job because it was and rather than always the closing I like to think of a new matter as always be componentized and and I show you later how components helped us develop features more rapidly and our choosing modern tools and ever helps you make good to ink traces generally I'm adopting code style preferences using Slobin JSON led to some more specific editor tooling choices like Adam packages that helped us develop more easily and it's it's a really good idea to rely on community solutions rather than build something in house and it can seem costly to stay current in amber in order to keep up and to be able to take advantage of these things but the more you do the more that you can you leverage the community but it's also important to know that every team in every act has to find their own pace so as we all know and removes incredibly fast and not everyone has to work can keep up to the latest build and there's some stability in priority reasons not to and on the flip side of there are quality and performance reasons why you might want to but don't feel bad if you're not on the latest build you need to choose the upgrade and the dependency schedule that fits you're building your needs as I mentioned we relied on a lot of
community solutions so we're currently using doctorates wall embassy align Mirage ever feature flags member IHE and then we'll talk about a little more in the beginning in the middle and um member validations and then finally STG for everybody and I'd also like to point out that there are some libraries that were not using at but we will be soon so couple future libraries that ever power slaps American currency and sure there are many others we like to get our hands on and work into our act the and this 1 I just like to say a huge thank you to everyone and community that helps to support and maintain all these projects were able to imagine manager so now that you know the
approach that we took what was the result of a rewrite and rewrite are generally really really hard and some tests not a good idea and but ever made it a lot easier on us and it allowed us to write an ambitious web application assured for that before I and we have rich features and interactions so I'd like to share a few of those pieces of functionality encode with you the so generally we were
able to develop more rapidly we were able to develop with rich feature feature-rich interactions we used reusable components and we had tested reliable code I would say those are the 4 things that we were able to do it across the board so more specifically like to share with you a few examples about how Amber's conventions helped us with our migration so
this is code from our model components and there's only 1 like the old man so we use this rather apt to manage state and for models and functionality and I know it's not super impressive to see it on its own but if you think about the hint these handful of lines of code being used over and over an application it's a great example of how components where again how far things have come for us and I show you a gift of 1 of our models and action in a few minutes the
so in our ap there's a section where you can configure it and manager headers responses health checks GZ policies and more and they're all related to your caching strategy and needs so in this example we able use the 1 modal component for attaching a condition and you can see that option x my cursor on the screen shot we were able to also extend that conditions functionality in models across the up with just 3 separate components so these were add condition remove condition and edit condition and these resources were used are reused throughout our application in the configuration section over and over again so this thing development in our application quite rapid and easy to test and we also have predictable patterns to follow so the you made a change in 1 we're able to also see those changes propagate over to the rest of the application wherever they were needed the so this is the gift of the
condition functionality and
since you can a conditioned every section and configure it's a so we only have to rely on 1 model component and the 1 had on component to do this in many places across the the so here's an example from ah
disclosure component which hides and shows particular parts of the app senses a reusable component and we were able to use it multiple in places across the I like the heightened show Advanced Settings and to
display in line to so here's that model in action that that in the that component in action so
besides reusable components that we use MRI Aegean and we receive a set ourselves up well for internationalization and this is a code sample from are translations bio specifically the errors fashion and you can see on the interpolation of the specific areas that would arise so we focus on adding translations in English on as we added features so that when the time came to international crisis expenditure Japanese all that foundation would be in place I yes yeah but since ever development
so much easier on us we're able to focus on developing feature-rich interactions that have a direct benefit to our users and we went through user experience research and testing process that revealed to us that we should really be providing terminology and best practices to our users and an example of this type of feature rich interaction is this new TLS form our security team that vastly worked with us so that we would have the right language and there and the right best practices so there's someone decided to not verified certificate for example it would serve as a warning on almost automatically and and show them kind of best practices in the security world and generally the form is much more clear it has better recommendations in leverages best practices throughout outside the outside of our own user experience domain so how can we measure a
successful rewrite I'd like to say to you that we were able to grab metrics from the old out and have metrics and new happen compare them but they didn't exist and old application but you know we don't have a measurements in place there are some key places that are measurable specifically with our deployed process
but it uses varnish ever Google can Gould cloud storage and vastly and it takes 1 command to ensure this looks familiar and about 2 minutes to complete versus 1 2 hours before as you remember and that 2 minutes of most related to PCI tasks is that really just build sending average in a terminal the so now there no manual chef builds there's no data bag updates that no no messing around Jenkins and it's a major improvement over all applications deployed process and it lets us to play on a regular schedule without a lot of overhead another metric had to share and a major improvement as our test coverage on this as I was able to write a script the compared lines of code in our ap directories lines of code in our tests directory and this is a graph of that work week by week throughout the process as you can see this is a pretty dramatic increase over time are passed test coverage in 1 because it's greater than 0 and assume because we have lab at least 1 to 1 ratio test a code there and at any given time sold metrics aside what have we
learned through the migration process I hope to share with you a couple of highlights the we
learn that it's a really bad idea to ignore deprecation warnings and let your version of member stagnating and not upgrade to the latest version I we also learn to pay down tech that as we want so we worked on a mix of feature infrastructure intact at stories every spring and this may be keeping up with the latest versions more manageable and they are made up more stable the we also learn to be more selective with the types of external libraries we chose and to evaluate how fully function how fully featured they were and we also thought to ask ourselves what features you we need now and what features will we need for the library to support in the future not only do we want the functionality that comes with that of a box but is there a time later on that we're going to need to add additional functionality and this would be supported by the library that we chose so what we don't wanna get into was implementing something getting it to work and then finding out later that all we needed additional functionality so then we'd have to read it out replace it and then move on from there so we tried to see if the libraries that we chose are they a community standards and how commonly on the used how well-maintained garden so maybe just don't go with the first one that you find online and do a little bit more research to see that's the 1 that's really right for you so the wire apt to be tested on you have to start early but it's not really something that we learned that we could catch up on or do later because we knew that we never will and we thought we get ourselves back into a scenario like for so I've reverted to do TDD to test my features because it helps me make sure the task at random but of course your mileage may vary but but testing each feature has been an important focus for us and our throughout the migration with the combination of the out of the box the configurations protests and are custom test helpers we had a really easy time writing tests again components we talked about those little bit before but they made it easier for us to build things and build things later on so you or someone like you will be working on an act like this in the future and you know what to and and finally things in a state where be hard to add to something but I don't want to go too far and component in vandalism because I think there is more to the story but it's been really really helpful for us to add new features to act using components and also made working with design a lot easier because we were able to capitalize on existing infrastructure when we're adding new features we also and internationalize as we went and save us a lot of work later on and we have plans to internationalize the Texan because we have so many users all over the world and like with tasks and components you'll thank yourself later for putting this foundation in place of something that would like to stress so let let our
next steps what happens now that we are almost finished with this rewrite
so our work continues we continue to work on bonds features and and design implementations and we also learn how to maintain a nap while we add these new features so that's a new exciting things for our team we then just porting things over for about a year and it can get a little boring we're building a responsive strategies so that we can have support for multiple devices and but 1st we want to make sure that we do the right kind of user research and testing so that we find out which features would be most likely to be accessed on which device the and a majority of the users on Chrome but we need to support a variety of browsers and versions including II 10 Our since many of our customers come can be enterprise customers we need to support that range of browsers so that everyone has a seamless experience so right now we're in a private data and we'll go to general availability later this year so we'll switch everybody over to the new version and we're getting feedback and about tickets from those people that are doing the of the France and those are customers of ours that wanted to get in early and play around with the out and through the feedback will be improving the general experience over all in the application so finally I'm excited to announce that the entire project will be released as open source later this year it was really important to us think you have to do this for a couple of reasons 1 so we wanted to be a really good example of what a modern application would look like and 2 we wanted to give customers the ability to fork the project and add any customizations that they might like it
expand so exciting to see the evolution of the framework over the past years we worked on the migration and a really thankful to be such a part of a part of such a fantastic community and for the opportunity to speak here today and we I don't think I can get off the stage without saying this but were hiring for a handful of senior drum script roles at vastly severe interested come talk to me in what chapter and if we have a few minutes I'd be happy to take any questions being it the due date for you took up can you tell us more about what you learned about uh would you mention of user research and user feedback short and we before we started the rewrite project we got into a user testing with a variety of people with a variety of experience using CD and and we were able to see how they would react to different designs and different experiences in the act and then to build those experiences to best suit of this the experience that we wanted them to have so that's how we found out about having best practices for things like TLS how we found out that we need to give them some tips and explain things better throughout the out so we're continuing to go through that process every time we add a feature which is really valuable to us thank you I so now that you've been in the in the community for a year and then change what do you think would be you know a topic or resource for something that we really valuable to newcomers to ember that you wish existed a year ago when you joint when you started yeah I don't know if you ever see loses talked this morning but it was about testing and everything that she had wanted to learn over the past year and she gave a talk last year lightning talk where and she was kind of like at the last minute encouraged to give a lightning talk about testing and and she likened herself to the chemistry done where he had no idea what is doing and I felt a lot like that when I 1st started learning Amber but Her talk today went through a lot of different things that she wished she would have known over the year there in the past year and it's been really nice to see the evolution of the ever and things like that all the resources on line because those things really were in that great estate about a year ago so I think we're in a really good position now for newcomers coming Denver to see the types of things that they would want see and Werner lateralization and were about a year ago thank you thank you thank you thank you
Videokonferenz
Code
Kartesische Koordinaten
Wellenpaket
Internetworking
Mapping <Computergraphik>
Demoszene <Programmierung>
CDN-Netzwerk
Termersetzungssystem
Echtzeitsystem
Datennetz
Datennetz
Caching
Formale Sprache
Content <Internet>
Sehne <Geometrie>
Software Engineering
Lineares Funktional
Dienst <Informatik>
Datenmanagement
Echtzeitsystem
Statistische Analyse
Datenmanagement
Reelle Zahl
Analytische Menge
Konfigurationsraum
Resultante
Videospiel
Projektive Ebene
Inhalt <Mathematik>
Auswahlaxiom
Framework <Informatik>
Bit
Prozess <Physik>
Natürliche Zahl
Applet
Mathematisierung
Kartesische Koordinaten
Code
Systemprogrammierung
Bereichsschätzung
Software
Reelle Zahl
Code
Skript <Programm>
Kontrollstruktur
Delisches Problem
Widerspruchsfreiheit
Softwaretest
Architektur <Informatik>
Güte der Anpassung
Vektorraum
Physikalisches System
Widerspruchsfreiheit
Entscheidungstheorie
Projektive Ebene
Computerarchitektur
Information
CLI
Bit
Punkt
RPC
Güte der Anpassung
EDV-Beratung
Zahlenbereich
Kartesische Koordinaten
Physikalisches System
Optimierung
Programmierumgebung
Termersetzungssystem
Bit
Stabilitätstheorie <Logik>
EDV-Beratung
Abgeschlossene Menge
Zahlenbereich
Kartesische Koordinaten
Code
Softwaretest
Einheit <Mathematik>
Bereichsschätzung
Prozess <Informatik>
Zusammenhängender Graph
Datenstruktur
Auswahlaxiom
Umwandlungsenthalpie
Softwaretest
Gebäude <Mathematik>
Fokalpunkt
Texteditor
Scheduling
Flächeninhalt
Mereologie
Programmierstil
Garbentheorie
Ablaufverfolgung
Ordnung <Mathematik>
Softwaretest
Resultante
Lineares Funktional
Web-Applikation
Validität
Interaktives Fernsehen
Datenmanagement
Fahne <Mathematik>
Fahne <Mathematik>
Datenparallelität
Programmbibliothek
Projektive Ebene
Decodierung
Leistung <Physik>
Offene Menge
Lineares Funktional
Gruppenoperation
Interaktives Fernsehen
Kartesische Koordinaten
Lineares Funktional
Whiteboard
Code
Komponente <Software>
Informationsmodellierung
Datenmanagement
Emulation
Funktion <Mathematik>
Code
Zusammenhängender Graph
Gerade
Aggregatzustand
Metropolitan area network
Kontinuumshypothese
Mathematisierung
Kartesische Koordinaten
Information
Open Source
Informationsmodellierung
Datenmanagement
Endogene Variable
Mustersprache
Zusammenhängender Graph
Softwareentwickler
E-Mail
Konfigurationsraum
Touchscreen
Softwaretest
Caching
Lineares Funktional
Datentyp
Default
Multiplikationssatz
Objektklasse
Konfiguration <Informatik>
Endogene Variable
Verschlingung
Caching
Konditionszahl
Strategisches Spiel
Garbentheorie
Cursor
Caching
Komponente <Software>
App <Programm>
Informationsmodellierung
Menge
Mereologie
Garbentheorie
Zusammenhängender Graph
E-Mail
Konfigurationsraum
Endogene Variable
Inklusion <Mathematik>
Fehlermeldung
Server
Konfiguration <Informatik>
Datensichtgerät
Gruppenoperation
TLS
Extrempunkt
Code
Informationsmodellierung
Ganze Zahl
Flächeninhalt
Interpolation
Menge
Stichprobenumfang
Internationalisierung <Programmierung>
Kommutativgesetz
Translation <Mathematik>
Zusammenhängender Graph
Softwareentwickler
Gerade
Fehlermeldung
Familie <Mathematik>
Server
Prozess <Physik>
Konfiguration <Informatik>
Formale Sprache
Programmverifikation
Interaktives Fernsehen
Kartesische Koordinaten
Extrempunkt
Domain-Name
Bildschirmmaske
Datentyp
Kommutativgesetz
Transportschicht
Einflussgröße
Softwaretest
Digitales Zertifikat
Linienelement
Computersicherheit
Finite-Elemente-Methode
Linienelement
TLS
Speicherbereichsnetzwerk
Netzwerktopologie
Rechter Winkel
Digitales Zertifikat
TLB <Informatik>
Softwaretest
Prozess <Physik>
Linienelement
Graph
Kartesische Koordinaten
Code
Task
Scheduling
Softwaretest
Mittelwert
Code
Radikal <Mathematik>
Skript <Programm>
Speicher <Informatik>
Verzeichnisdienst
Streuungsdiagramm
Gerade
Quelle <Physik>
Softwaretest
Lineares Funktional
Termersetzungssystem
Bit
Quader
Schaltnetz
Gebäude <Mathematik>
Versionsverwaltung
Automatische Handlungsplanung
Fokalpunkt
Task
Komponente <Software>
Staupunkt
Softwaretest
Datentyp
Mixed Reality
Randomisierung
Programmbibliothek
Zusammenhängender Graph
Konfigurationsraum
Internationalisierung <Programmierung>
Standardabweichung
Aggregatzustand
Rückkopplung
Termersetzungssystem
Subtraktion
Prozess <Physik>
Magnettrommelspeicher
Ortsoperator
Hyperbelverfahren
Browser
Versionsverwaltung
Nichtlineares Zuordnungsproblem
Implementierung
Kartesische Koordinaten
Framework <Informatik>
Open Source
Spannweite <Stochastik>
Multiplikation
Datentyp
Skript <Programm>
Gerade
Softwaretest
Suite <Programmpaket>
Open Source
Gebäude <Mathematik>
Browser
TLS
Rechter Winkel
Mereologie
Evolute
Projektive Ebene
Benutzerführung
Unternehmensarchitektur
Varietät <Mathematik>

Metadaten

Formale Metadaten

Titel The Great Migration: Redesigning and Rewriting our App in Ember.js
Serientitel Ember Conf 2016
Autor Applegate, Jade
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/34717
Herausgeber Confreaks, LLC
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Many Embereños use the framework for their side projects, but have not yet had the opportunity to work on an Ember project in their professional lives. This talk will cover one team’s journey migrating a legacy codebase to Ember.js. Key topics will include the redesign and rewrite of a highly complex and detailed customer-facing user dashboard, challenges faced when porting an application to Ember, and the results of the migration project in terms of improved application speed, security, and overall performance.

Ähnliche Filme

Loading...
Feedback