Bestand wählen
Merken

How to Start an Ember Revolution

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
a without a but
everybody so my name is patrick and I'm in here that it is not and today I'm gonna be talking to you about how you can start your own Member revolution at work but so uh this talk
is based on our own experience at intercom and of adopting Amber and migrating in a large existing code base and into a new amber applications so uh for those of you who might be unfamiliar with intercom so intercom is the 1 place for every team in a internet business to communicate with their customers personally and at scale whether that be uh on your sites inside your web or mobile applications or even by e-mail and our mission is to make web business personal but the
so intercom started life back in 2011 as well applications like any other and grew quickly over the years as a large monolithic codebase and powering boasts the suite of API is for our messenger platform and case as well as the web applications used by our our users to communicate with their customers but and back in 2 thousand and 14
we undertook a complete rewrite of this web application deciding to rebuild it from scratch using Amber but I know that selling the merits of Amber at Amber Conf is a little bit like preaching to the choir role you well familiar with however is going to be able to help the team but I do I wanna take some time to give a little bit of background and that went into the decision of adopting so at the point we started using Amber intercoms web application had grown to comprise of over 40 thousand lines of 10 plays and JavaScript code alone to and this combination was was becoming quite an unwieldy at the time these and tightly coupled JavaScript classes ended up being problematic and a number of ways they were hard to test they would interact in unexpected ways as they manipulated moments and maybe change Jake reflectors that sort of thing and ultimately they accounted for a really in a significant portion of our technical that time to we were also uh beginning to get some of the inherent performance limitations of relying so heavily on server-side rendering and you know as our product pages grew to be more comprehensive and show more and more information re-rendering each page of querying for the same large dataset over and over for every minor change and rendered output was you just unacceptable but and the combination of all of these issues you know cost us to start questioning our rails based on the front and back and this is particularly important as we were planning to expand our product considerably over the coming 18 month period and were worried about building on what we were beginning to consider shaky foundations and and on top of that you know we felt very much that we had reached a tipping point both in kind of application performance but also in developer productivity the zooming add however and you know taking a look at the wider development ecosystem of the time there had been a considerable amount of change in in even the 3 year period since intercom had begun development and in particular the emergence of numerous stable feature complete uh JavaScript frameworks like amber and angular and backbone you know they completely changed the landscape for us and offered you know a whole range of new alternatives to this server rendered JavaScript augmented development pattern that we had had come to rely on so heavily no it's not at all uncommon in industry and especially on sites like avenues to find people with uh somewhat uh dogmatic as sensor belief in the tools of choice and while we're still very big fans of rails it come and you know we still use to develop the API said power both of our new and replication and the messenger platforms we did wanna be a little bit more practical and about our technology choices when it came to this primary web applications but the another really important factor that you know went into making this decision was that the adopting ember allowed us to build much more ambitious products and at this time internally we were iterating very heavily on the shared inbox intercom which is 1 of the more crucial components or at destinations in the application it's where you know the majority of our users spend you know a lot of time every day working collaboratively as a team to message back and forth with their customers for quite a conversations works through issues for customers you to really primary workflow and yeah is really important that we know but and I wanna give an example of you know just to compare contrast the uh products that we're able to build the rails and number the and this is a screenshot up of the in boxes of the final iterations of the in box that we made In our rails codebase before we adopted and to contrast
here is a screenshot of 1 of the earlier versions of the in box but we rebuilt in amber and I hope it's immediately obvious that it's like a much more ambitious applications and you can see much more information about what's going on in team does a lot more information displayed it's easier to switch back and forth and you know this was much much more ambitious than anything that we would have been previously able to develop and you we thought the things like this were kind of out of our reach but and I really do wonder like make that point you know this would have been really you know more than impractical to develop with our old development patterns we wouldn't really have even attempted
even with all of the you know the the potential benefits of here new tool and framework and all of the union of sunshine rainbows that you see in the future and not all teams are very receptive to such large change and certainly managers don't all jump in the life when they hear the word rewrite of the team at and so all of this adds up to make introducing and new tools like amber somewhat difficult and but I hope that you know these lessons that we've learned and can help you both with the technical and also the social aspects of introducing an ambiguity so the 1st lesson that I really want to hammer home is that when you're introducing a new tool like amber and new to in your business it's important that you create your own height and you start with your friends and colleagues all the people you work with and you know Chatelain you new tool get them excited about you know I have been thinking about this is great going to solve all my problems and not only that you know make them think about how it could be used in their everyday work and you really really wanna gather this like bottom up momentum but and indeed like that stories have undergone got started remember starts with only a single engineer and got enjoys and so Gavin joined intercom at right at the beginning of 2011 and was originally tasked with refactoring the user data API eyes that we use to query and presented as data data rather in the user list and on and that this is a screenshot of the user list as it appeared intercom at the time and it's a feature in the application that allows you to give you all the users of your web or mobile applications and quickly to them based on either the activity in your application or on information and attributes that you have recorded that uses and intercom and so government started on the street right but and while the backends component of the rewrite was well to so straightforward and fell into place and I government kind of hit a roadblock with the uh world my God Java does most inappropriate time to ever promptly me from and so government and hit some of a roadblock uh seeing that the coupling this soup of that you're templates and highly coupled J. query that we'd written to a company is all that he has was going to be a really significant like uphill challenge and in this he saw really clear opportunity for Amber to provide a much better solution to this problem so to
start this little movement Gavin put to gather a really rough and ready for the type of what a user list and might look like if was developed in income and shared alongside with this other demo that he created called and repeats and so ever beats is a drum machine application governs the really big music lover and he made this to really demonstrates just potential there was remember to build really amazing applications and so he shares this uh mock up and the amber beads application around the T and basically with the aim of convincing everybody you know that we should give this a shot and at the time given our experience JavaScript was kind of of very and in our minds you to you wanna relying too heavily the but seeing this demo and really awakened us to just how much potential there was to build a really great products and really amazing experiences with Member and got us thinking about have we might be able to introduce and intercom so based on this
and govern lobbied for us to start a little experiment a small team of small number of engineers to spend 3 weeks and developing a prototype the new Amber UserList rather but and the brief was very very simple to build a new faster user list a number to fail quickly if things weren't gonna work out I know colossus no we want to spend time and work that was in work at an but on the other side if it was and looking like things were gonna work at well to plan for success and really give a lot of consideration as to how this would be more widely deployed internally and how the but so my obvious but this was a resounding success and even before the end of the 1st week uh everybody was really buoyed by like the opportunity to use Amber at intercom and their user list that this little team and of building was not only the simpler to build and and drastically smaller as a code base it was also much much faster simple actions that previously took around 5 seconds due to server-side rendering fetching all this data were no down to a 2nd or less and I know file 5 to 1 you know on a purely numbers basis is is relatively impressive and it also dramatically changed the experience of using the user list and particularly as people were able to quickly iterate on the searches that they were doing and really narrowed the use of list and exactly the people that they want message and you know this is just so much better than previously where every minor changes of 5 seconds turn around and it is the context with flashing of this is just chalk and cheese is really really much better much better so the next thing that I wanna talk about but is you know when you're starting a rewrite were introducing a new patented technique it really helps to form your own an internal team of experts and yeah for a year the rest of your engineers to kind gather around and used as a resource but so almost immediately after the user this experiment wrapped up but we made the decision and to completely junk are existing road map uh of the time and put all of our efforts into rewriting all of the product that we had in amber and you know facing down and this long rewrite roads it was quite a daunting prospect and and it was made more so by the fact that no bar Gavin and the very small group of engineers that built this user list and nobody internally had a lot of expertise or experience developing with Amber and so you know we wanted to build resources to like form this little small team we kept them together but to provide a kind of like a reference point for all the other product teams as they and took their own parts the application and started planning had would build their own features number and this was really really crucial to kind like getting the ball rolling and you know allowing people to the plan for success and not make simple mistakes and have to throw lot work but and we also recruited outside help and in 18 to build this new bit stop this expertise and we asked at time they'll to join us for a few weeks and as we began the new this rewrite in earnest so when you start your rewrite and obviously you have know your your end goal in mind you want you know product a put in new technology but it's important to keep in mind that your also racing to wards this band this goal this tipping point and where it becomes easier to build new features and product exclusively in your new applications to and as opposed to you know having you're old and you know we were very conscious of time of time you know at this point and we we want to make sure that each of the product teams had every opportunity to no get started and build up some early momentum the as they denote took ownership of each of their own and product features migrating them 1 by 1 and Amber and we also wanted to make sure that knew that they were free to focus on this and you know without any of the other distractions that underpin provided by in maintaining the old code working on issues and think that we really just wanted to clear the path the and so like with all rewrites bigger small and you know that there's gonna be this kind of awkward period of of like code duplication and and there's a real risk that if you don't manage manager time well if you don't think about it and a lot that you might end up prolonging this you know every line of code that you add to your old debates should be viewed as technical debt because what you're actually doing is creating more and more work for your team to like moves this into your new applications the and so Tour events and the you know accidental prolonging word you know needless uh time waste of this kind of period of double work we decided to and effectively freeze feature developments on the rails codebase and just completely clear the path for the product chains to focus entirely on this amber migration the which brings us to add
my favorite lessons before they could buy you make so the it's important to know as with any products to get into the hands of few users early on you wanna get you Emery right at the door as quickly as possible you allow yourself to fix the bugs iterate on things catch them early all of that and and shipping a giant rewrites all in 1 go and you know it's just it's a really daunting suffer task were not very good at and it's much risk here you end up and dramatically increasing the likelihood of you know shipping multiple bugs at once and otherwise causing the you know a really bad customer experience for people who you get on this very alpha but you know when
you're rewriting an existing Web application you actually have a lot of freedom and because you're replacing existing pages you can actually be pretty cheeky with what you deploy and and indeed we decided to take advantage of this a lot as we shipped 3 parts of our Amber applications the so you know given the fact that you're replacing all these pages that already exist you can actually you know makes in its of you're new and all codebase together and so you know you don't have to ship at all once you can entirely ship you know 1 page at a time and use your existing code base to kind of give the illusion that you've built this mass of product In all very quickly and so when we release Released rather than the and new and reuse of its we're very deliberately left there's a considerable portion of functionality and and this just gave us a little bit of time and you catch your breath and focus on getting things done right 1st so give an example and here is the user list as we originally shifted in amber and 1 point at that all the functionality in this page of the main functionality of looking at uses sorting them and filtering saving segments switching between and all of that and that was all you know that was the core of the Emma replication and all the while all of these other pages and you know in our products they were still running this wells cut this and so the vast majority of the links on December page actually directed you back into the rails application so for instance if you want to create an order message and to the users that you just filtered or if you want to you know check your conversations and see you know how people responding to messages were catch up on your manual or Auto messages to the progress monitor statistics you know all of these pages straight through to the settings and documentation they all didn't change at all they were never completely the same as before all intervals conveys the and so this allowed us to you know feature by feature move things and amber and you know with providing the same experience to people
the another really amazing tool and I think sometimes and web developers have this and the the kind of hesitant to use I friends certainly they've got a lot better in recent years and they were really invaluable resource and during this time as it allowed us to mix and new and old partly the application onto the same page and so we made very heavy use of them in our Amber application to render some of the rails pages that we had been may be slow to migrate into the ambit codebase and we would render these pages in components in various Amber rats so this is greater giving the illusion that all these pages that you're navigating to you know very quickly back and forth for all in this 1 and applications the and you can also use
it to go the other way and so we made some what creative use of I frames to embed the amber application into our old rails up and and the other 1 really strong you say so we have for this was and some of our payment flows are model based and so we wanted people to experience in the same purchasing experience much on mother if you're in the old and rails codebase renew number 1 and so we would do this by rendering a uh hidden iFrame on the page looting the embryo up in the and then any time that you wanted to enter and use these modal experiences we would uh opened this specific modal right the and replication and overlay frame on the page giving the impression that all this was being driven all this life experience has been driven by the rails application the
another really a wonderful choice to be made that really saved us was that we decided to keep the URL structure in the application but in exactly the same as it was in the rails up and you know as we move pages and Amber so for example this is a URL for the page that shows here default user segment where you go to see all of users and this is in the rails applications and this is the same URL but for the amber based page the only difference being that we would pretend this small prefix to the path to direct users to this new amber experience and this doesn't seem like much but coupled with a feature
fighting system this allowed us to an application by application popped people into this new amber experience and this is great for control rollouts and you know it allowed us to experiment internally there's any danger of like reading accidental bugs but more importantly it allowed us to you know grow the audience of our Amber application as our confidence is the
we've talked elsewhere and new we've written a number of blog posts on our really heavy reliance on continuous integration and continuous deployment at and from and this pattern and allowed us to iterate really really quickly on the and applications we and it wasn't uncommon still isn't uncommon other rather to new releases of the application dozens of time a day and this is really important for us because we want to build quickly but also in conference that we want you know introducing new bugs and shipping you know an awful awful broken experiences for users and this pattern
is something that we you know we developed previously would really you know refined in our migration to amber and it's been something that has allowed us to really move quickly remember and the approximately 2 years we've adopted so here's a short timeline of the inner product development that we want to do in the 18 months after we started using Amber starting all the way back with the user list in April 2014 the straight through to the end of last year and you're betting on number has just been instrumental to all of this change and so many of these features were going to take now twice as long if you if not longer to build in this Israel's codebase and the patterns and conventions that ever came with all of the decisions made out of the box and just promoted this like really quick pace were oftentimes money these these features were able to make very components which Amber like really gets to that you to read as well and and it's it's just integrate pattern of code reuse all the way through the application which is great not only for speed but also in providing this you know consistent experience all the way through applications and so I want to leave you just with these 4 lessons and they've been really instrumental in guiding us through our own Amber journey and and looking back Beijing member as being probably the best technical decision that we made as a company and the we've built 1 of the largest Member applications and deployment in the last 2 years and it's a bit it's been a fantastic journey like each step of the way and so I hope that these lessons and you know hopefully they'll resonate with you and they'll also be helpful with use you start your own revolution work so about the wrap-up up and thank you so much for your time it's been really great have an opportunity to Cheryl this with you and you have any questions please feel free to reach out to me either on further or the e-mail and you know we love to help you very much believes that the more people using Amber and better tools the better for us all so what you feel
the the a
Videokonferenz
Code
Rotationsfläche
Rotationsfläche
Suite <Programmpaket>
Videospiel
Zentrische Streckung
App <Programm>
Web Site
Benutzerbeteiligung
GEDCOM
Web-Applikation
Kartesische Koordinaten
Systemplattform
E-Mail
Code
Internetworking
Bit
Umsetzung <Informatik>
Punkt
Spiegelung <Mathematik>
Momentenproblem
Web-Applikation
Versionsverwaltung
Iteration
Kartesische Koordinaten
Kardinalzahl
Template
Homepage
Dämpfung
Datenreplikation
Mustersprache
Kontrast <Statistik>
E-Mail
Auswahlaxiom
Gerade
Funktion <Mathematik>
Gebäude <Mathematik>
Biprodukt
Frequenz
Teilbarkeit
Entscheidungstheorie
Server
Information
Message-Passing
Stabilitätstheorie <Logik>
Web Site
Quader
Klasse <Mathematik>
Schaltnetz
Mathematisierung
Zahlenbereich
Systemplattform
Framework <Informatik>
Code
Spannweite <Stochastik>
Rendering
Fächer <Mathematik>
Äußere Algebra eines Moduls
Inverser Limes
Zusammenhängender Graph
Softwareentwickler
Leistung <Physik>
sinc-Funktion
Gerade
Quick-Sort
Auswahlaxiom
Impuls
Demo <Programm>
Vektorpotenzial
Mathematisierung
Applet
Kartesische Koordinaten
Framework <Informatik>
Wechselsprung
Benutzerbeteiligung
Datenmanagement
Gruppe <Mathematik>
Front-End <Software>
Minimum
Datentyp
Zusammenhängender Graph
Videospiel
App <Programm>
Termersetzungssystem
Template
Abfrage
Mailing-Liste
Biprodukt
Rechter Winkel
Grundsätze ordnungsmäßiger Datenverarbeitung
Information
Impuls
Bit
Punkt
Gruppenoperation
Mathematisierung
Gefrieren
Automatische Handlungsplanung
Gruppenkeim
Zahlenbereich
Kartesische Koordinaten
Code
Task
Bildschirmmaske
Datenmanagement
Rendering
Gruppe <Mathematik>
Migration <Informatik>
Jensen-Maß
Delisches Problem
Softwareentwickler
Gleitendes Mittel
Gerade
Prototyping
Expertensystem
Termersetzungssystem
Likelihood-Funktion
Zwei
Gebäude <Mathematik>
Mailing-Liste
Biprodukt
Elektronische Publikation
Kontextbezogenes System
Billard <Mathematik>
Frequenz
Ereignishorizont
Programmfehler
Entscheidungstheorie
Mapping <Computergraphik>
Bildschirmmaske
Verkettung <Informatik>
Rechter Winkel
Mereologie
Basisvektor
Wort <Informatik>
Message-Passing
Lineares Funktional
Statistik
Bit
Web-Applikation
Mathematisierung
Ruhmasse
Kartesische Koordinaten
Mailing-Liste
Binder <Informatik>
Biprodukt
Fokalpunkt
Code
Homepage
Rahmenproblem
Arithmetische Folge
Menge
Mereologie
Datenreplikation
Web-Designer
Zusammenhängender Graph
Speicherabzug
Ordnung <Mathematik>
Message-Passing
Instantiierung
Videospiel
Subtraktion
Rahmenproblem
Zahlenbereich
Kartesische Koordinaten
Datenfluss
Overlay-Netz
EINKAUF <Programm>
Homepage
Informationsmodellierung
Rechter Winkel
Datenreplikation
URL
Datenstruktur
Default
Auswahlaxiom
Stetige Abbildung
Web log
Bereichsschätzung
Mustersprache
Kontinuierliche Integration
Gamecontroller
Zahlenbereich
Kartesische Koordinaten
Physikalisches System
Analytische Fortsetzung
Programmfehler
Lesen <Datenverarbeitung>
Chipkarte
Bit
Quader
Texteditor
Mathematisierung
Zahlenbereich
Kartesische Koordinaten
Dienst <Informatik>
Code
Homepage
Migration <Informatik>
Code
Mustersprache
Rotationsfläche
Zusammenhängender Graph
Softwareentwickler
Ereignishorizont
E-Mail
Mailing-Liste
Skalarproduktraum
Menge
Entscheidungstheorie
Faltung <Mathematik>
Videokonferenz
Bildschirmmaske
ATM

Metadaten

Formale Metadaten

Titel How to Start an Ember Revolution
Serientitel Ember Conf 2016
Autor O'Doherty, Patrick
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/34702
Herausgeber Confreaks, LLC
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik

Ähnliche Filme

Loading...
Feedback