Confessions of an Ember Addon Author
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 28 | |
| Autor | ||
| 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. | |
| Identifikatoren | 10.5446/33658 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
EmberConf 20174 / 28
9
13
14
16
17
18
23
24
00:00
CodeVideokonferenzGemeinsamer SpeicherSchreiben <Datenverarbeitung>ZahlenbereichSoftwarepiraterieComputerspielLeistung <Physik>Kartesische KoordinatenComputeranimation
00:39
Leistung <Physik>Kartesische KoordinatenSoundverarbeitungExistenzsatzBesprechung/Interview
01:06
Machsches PrinzipVektorrechnungSoftwaretestBereichsschätzungLeistung <Physik>Physikalische TheoriePunktFeuchteleitungFlüssiger ZustandWort <Informatik>Kartesische KoordinatenWeb SiteDifferenteDatenparallelitätCLISuite <Programmpaket>SoftwareentwicklerEinsVariableInverser LimesResultanteDifferentialgleichung mit nacheilendem ArgumentCoxeter-GruppeGradientRadiusTrennschärfe <Statistik>Auflösung <Mathematik>
04:22
MathematikSchnittmengeOffene MengeCodeComputerspielDatensatzFormale SpracheRückkopplungProgrammbibliothekMAPVideokonferenzSoftwaretestArithmetisches MittelMereologieProjektive EbeneQuick-SortFlächeninhaltSystemaufrufGüte der AnpassungCASE <Informatik>Klasse <Mathematik>GradientWort <Informatik>Vollständiger VerbandOpen SourceWeb SiteDifferenteWeb logMultiplikationsoperatorSchreiben <Datenverarbeitung>Spider <Programm>SoftwareentwicklerOffene MengeQuellcodeMeta-TagXMLUML
08:08
IndexberechnungMultiplikationPaarvergleichAutomatische IndexierungGleichheitszeichenWort <Informatik>DatenstrukturImplementierungMathematische LogikTopologieValiditätMAPVariableSoftwaretestMereologieVersionsverwaltungReelle ZahlZeitrichtungZusammenhängender GraphAdditionWort <Informatik>Kartesische KoordinatenBimodulBrowserFramework <Informatik>SpielkonsoleElektronische PublikationOpen SourceDifferenteMultiplikationsoperatorSchlussregelDienst <Informatik>DefaultThumbnailApp <Programm>ComputerspielMathematikEDV-BeratungGenerator <Informatik>Kette <Mathematik>RechenwerkVirtuelle MaschineOvalFamilie <Mathematik>Stochastische AbhängigkeitParametersystemFehlermeldungFormation <Mathematik>CAN-BusPunktwolkeObjekt <Kategorie>Einfache GenauigkeitKontextbezogenes SystemDatenreplikationPlug inOrtsoperator
11:27
FehlermeldungFunktion <Mathematik>TopologieInhalt <Mathematik>Gebäude <Mathematik>KonfigurationsdatenbankPräprozessorTemplateErweiterte Realität <Informatik>SoftwaretestBetafunktionBrowserReelle ZahlE-MailKonfigurationsraumAttributierte GrammatikComputerspielOrdnung <Mathematik>TopologieHackerProgrammbibliothekGebäude <Mathematik>Produkt <Mathematik>MatrizenrechnungSoftwaretestProgrammierumgebungAutomatische IndexierungBereichsschätzungArithmetisches MittelBitGruppenoperationLeistung <Physik>FlächeninhaltMenütechnikKonfigurationsraumVersionsverwaltungSystemprogrammCoprozessorCASE <Informatik>Prozess <Informatik>Coxeter-GruppeTemplateGraphische BenutzeroberflächeVererbungshierarchieKlasse <Mathematik>Lesen <Datenverarbeitung>Kartesische KoordinatenUmwandlungsenthalpieBrowserRegulärer Ausdruck <Textverarbeitung>Elektronische PublikationOpen SourceWeb SiteBestimmtheitsmaßDifferenteHook <Programmierung>Element <Gruppentheorie>MultiplikationsoperatorSchreiben <Datenverarbeitung>Rechter WinkelDemo <Programm>Interface <Schaltung>DefaultSoftwareentwicklerApp <Programm>ExergieMathematikTypentheorieAxiomKategorie <Mathematik>VektorraumDialektAlgorithmische ProgrammierspracheFundamentalsatz der AlgebraInhalt <Mathematik>RuhmasseVerzeichnisdienstFehlermeldungRandomisierungGemeinsamer SpeicherAdditionWort <Informatik>HilfesystemEinfügungsdämpfungMinimumPräprozessorKonditionszahlStandardabweichungEinsXML
19:32
IndexberechnungReelle ZahlFaktor <Algebra>ProgrammierumgebungMetrisches SystemKonfigurationsraumToken-RingPetri-NetzDienst <Informatik>Konfiguration <Informatik>Objekt <Kategorie>Message-PassingHackerBildgebendes VerfahrenBruchrechnungImplementierungTopologieValiditätFunktion <Mathematik>HackerProgrammbibliothekProdukt <Mathematik>MatrizenrechnungKategorie <Mathematik>ProgrammierumgebungAutomatische IndexierungKonfiguration <Informatik>DeterminanteAnalytische MengeArithmetisches MittelFunktionalGruppenoperationLeistung <Physik>MaßerweiterungMereologieMetrisches SystemZellularer AutomatKonfigurationsraumVersionsverwaltungTeilbarkeitAutomatische HandlungsplanungInternetworkingAusnahmebehandlungCASE <Informatik>Faktor <Algebra>Prozess <Informatik>Anpassung <Mathematik>FehlermeldungMetropolitan area networkInstantiierungPunktWort <Informatik>Web-SeiteKartesische KoordinatenBrowserElektronische PublikationEreignishorizontBitrateSichtenkonzeptKonditionszahlDifferenteMini-DiscObjekt <Kategorie>Element <Gruppentheorie>MinimalgradEbener GraphKontextbezogenes SystemMultiplikationsoperatorPlug inMessage-PassingMapping <Computergraphik>Rechter WinkelDienst <Informatik>Interface <Schaltung>DefaultOrdnung <Mathematik>Gebäude <Mathematik>AuswahlaxiomPolygonRouterResolventeFlüssiger ZustandMixed RealityAutorisierungHook <Programmierung>NetzplanApp <Programm>Computeranimation
27:36
Lokales MinimumOffene MengeMAPOpen SourceKontrollstrukturCodeTelekommunikationProgrammbibliothekMAPKategorie <Mathematik>SoftwaretestGroße VereinheitlichungMereologieMomentenproblemTermZahlenbereichGüte der AnpassungPunktKontrollstrukturSchnittmengeOffene MengeInnerer PunktKartesische KoordinatenFramework <Informatik>Open SourceDifferenteObjekt <Kategorie>Einfache GenauigkeitCLIMultiplikationsoperatorStrahlensätzeGamecontrollerTwitter <Softwareplattform>SoftwareentwicklerApp <Programm>Lesezeichen <Internet>ComputerspielLie-GruppeFrequenzEindeutigkeitStapeldateiSoftwarewartungReelle ZahlComputervirusAbstandProzess <Informatik>NormalvektorKlasse <Mathematik>Wort <Informatik>Interaktives FernsehenFokalpunktVollständiger VerbandBitrateWeb SiteARM <Computerarchitektur>Rechter WinkelSpezifisches VolumenKoroutineComputeranimation
32:30
XML
Transkript: Englisch(automatisch erzeugt)
00:12
Thanks for coming today. I want to spill the beans on things I've learned writing a number of popular amber add-ons and share thoughts on the four things that I think make an end on good
00:24
So firstly my name is Lauren you might know me as sugar pirate and my skills include dad jokes Ordering bubble tea for my colleagues and then drinking all of it and being Australian Because of these highly valuable skills I work at Netflix on applications that power the world's largest studio
00:45
So come to our booth later if you're interested in what we're up to So add-ons chances are you few fun raise your hand if you at least one add-on in mind when I say good I don't know. Oh, that's awesome. It's a lot of hands
01:02
So last I checked they're actually more than three and a half thousand add-ons in existence if you check the amber add-ons comm website and In the beginning when add-ons were first introduced It was actually really tough to write one because a lot of features didn't exist in both amber and amber CLI and you know in the past you had to resort to like packs or
01:24
Intimate API to do certain things. I think we can all agree that add-ons have gotten pretty great over this time But out of three and a half thousand add-ons, how many are good? This was the question that Made me think about you know This this whole talk and I have a very simple theory that there are four major things that go into
01:46
Contribute into what makes an add-on good So firstly the add-on needs to solve an interesting problem. It doesn't have to be an extremely difficult or challenging problem Something simple done. Well could still qualify as a solving a useful problem
02:02
But it has to solve it so well that someone else would someone would rather use your at your add-on than to build it themselves Secondly it needs to be straightforward to set up and use and that usually means good documentation Examples and a low barrier to getting started and honestly, I think this is where most add-ons fall short
02:21
Third the API needs to be delivered It doesn't have to be perfect But you do need to put some thought into it and it can't be an ad hoc API And this is really tricky to get right on the first try, but thankfully that's why semantic reasoning exists And finally it has to be reliable Or in other words it also needs a meaningful test suite, and this is especially true for add-ons that aren't presentational
02:46
You know people want to use your add-on to solve problems and not cause more problems for their application And a test suite is a good way to give people confidence about your add-on So Which add-ons for this build there are many, but these are some of the more popular ones we just listened to
03:02
Maxis talk about ember concurrency I Have talked about it a lot My co-workers are probably bored to death with me talking about everything currency, but it's probably my favorite add-on so far It's got a really great documentation. The API is very simple as you just saw and it solves a really difficult problem Ember power select is also an add-on that hits all those four points in my opinion and
03:24
You would think that a simple select drop-down. You know it'd be simple to build. It's just a simple select Or how can it be but it turns out it's not that simple, but ember power select makes it a really nice experience Liquid fire of course needs some introduction provides a very nice declarative DSL for you to
03:43
Declare animations that were previously not possible It's also very easy to use and very well documented and finally ember CLI deploy The you know deployment is so different across like different teams and companies But ember CLI deploy is flexible enough to handle all or if not I mean it's our most if not all of it, and it's also very sensible and these are just some of the more popular add-ons
04:07
Now when it comes to running good add-ons. I think there are many approaches, but personally I like to practice DDD documentation driven development when I make a new out documentation
04:24
And the main reason is that it helps me think ahead of time what the developer experience should be You know what kind of API does this add-on need to surface and then from there you start to write tests And you can do test driven development against that API Because it's true if you don't document something how will they know that it exists or how will they know to actually use this feature
04:45
without spending hours digging through your source code Some languages even rightfully treat documentation as a first-class citizen So this is elixir and the examples in the comments and gray they can actually be run as tests and unfortunately
05:01
This isn't a language feature in JavaScript Which is really sad, but documentation is so important that some add-ons even have their own dedicated documentation sites While this is really nice to provide by no means is it required You can certainly have very decent documentation with a markdown based readmealone And this is typically the place you should start anyway
05:21
With with documentation, and you can always visit making a fancy pants doc site in the future If you are in the habit of commenting your code with JS doc or ue doc style comments then you can also find add-ons or other JavaScript libraries that will help you generate documentation and Even if you don't they are still a really good way of you know
05:43
Teaching contributors like how to contribute to your code So let's say you've done all of that you have an add-on that solves a really interesting problem It's well documented has a good API, and it's well tested Now what? well in most cases that's not sufficient by itself and
06:02
The thing is and this applies not only to open source But generally speaking projects require two things to be successful First it has to solve a problem, and if you've done those four things I mentioned earlier you've already got this in the bag But more importantly building it isn't enough by itself and you also actually have to convince other people
06:23
To use your add-on or your library and again. This is not only true for open source, but many things in life There's this really great talk at react conf by Chung lo on the meta language and What he describes as the meta language is the stuff that goes beyond the code
06:40
So these are things like that like blog posts videos conference talks documentation Whatever else I thought leadership would be a good one these things are really important But they're not codified into the library or the language of course anyone can build an add-on But the project doesn't end when you hit NPM publish in fact. It's only just started
07:06
Luckily for us. There are many ways to spread the word you can write about it. You can record a talk You can record a video you can do a talk at a conference like Makdi You know and people do want to listen to learn about it because no matter how mundane or technical or boring you might think it
07:23
Is it's also a really important step in getting feedback so you can improve on this library But if you're like me despite being up here on stage when I create new add-ons. I tend to write about them first Personally for me writing has the best ratio of effort to reward You know writing helps me communicate my ideas better, but I think your mileage might your mileage might vary
07:47
And as an aside, I'm still running this emberway publication So if you do want to write about something that you've written let me know and I can help you publish it So in this talk I want to share my experiences and lessons learned writing add-ons And hopefully can also inspire you to start writing add-ons of your own
08:04
so first let's take a quick look into what exactly goes into an add-on and How to think about an add-on structure So when you generate an add-on for the first time you'll notice that the folder structure looks very similar to an ember application But one of the main differences is that it has an add-on folder
08:20
But otherwise it mostly looks the same and there are a few things to note though so on a high level the add-on Application and test folder live in emberland and in this in these folders You're actually working in the framework itself and ember CLI helps glue it all together On the other hand there are folders which are in
08:40
Node-land or in other words not in the browser and these are all files that are used by ember CLI when The add-on is installed into the consuming application Now in the add-on folder itself We can think of it like a source folder for your add-on and most logic lives in here and these files won't get merged Into the consuming applications tree unless you also export these
09:02
files in the app folder As a rule of thumb I only export things that are part of the framework like components helper services and so on or Other parts of the application of the add-on that people might want to override So here in this example, we need to export this helper so that the user can actually use it in their template
09:20
But if the user has an append helper already in their application Then that will actually take precedence over the add-ons helper. So in that way they can override an implementation if they need to and This is really important to think about because you want to be deliberate about what gets merged into the consuming application and you don't have To export every single thing in the add-on folder and it's often not recommended and you can think of it like
09:43
Exporting is making something publicly available. So and you don't really want to make everything publicly available Now in scenarios where another add-on conflicts with yours it is possible to specify which add-on will win So here ember chainset validations Which is a plug-in for another add-on called ember chainset it these two add-ons both define a chainset helper
10:05
But I wanted the ember chainset validations helper to win. So here you can actually be very explicit and say that This add-on should be installed after ember chainset and therefore its helper will take precedence One thing to note though is that even if you don't export something in the app folder
10:23
It doesn't make it private and consuming applications can still access it if they know the path to it and It's very easy to see all the modules that ember ci knows about I'm not going to tell you what the command you need to put in the console to see this I'll tell you later if you want to know but keep that in mind
10:41
So there's there's no real concept of private modules here in addition to the add-on and app holder add-ons can also introduce blueprints and Blueprints are interesting. You've definitely Used one before these mostly look like JavaScript But you'll notice the ERB like syntax the embedded Ruby like syntax where you can put these
11:02
I don't even know what you call these arrow percent equals And and these will be used by ember CLI to dynamically inject different things into these files when they're generated from this blueprint You can also look these up on the ember ci docs these template variables are provided to you by default
11:21
But you can also define your own in your add-on which is very useful if your add-on is extensible in some way one thing else to note about node land is that you get access to the add-on hooks in the index of your Add-on and these let you work with the add-ons build directly and you can do a lot of things here like include
11:41
Custom ember CLI commands you can include choose files include to exclude you can add pre processors and so on So let's go through some of some examples of add-ons that make use of these hooks and see how they use them features that they include Ember test selectors is a really great on by the folks at simple apps the same people behind embers simple off and
12:04
What this add-on does is let you define a data test selector attribute on your HTML elements And then this text selector can be used in your tests to select elements But the cool thing about this add-on is that it will actually strip these data test selectors away in Environments that you tell it to so you don't have to pollute your production HTML with unnecessary attributes and
12:27
To do this ember test selectors uses to mean ember CLI hooks So first it has a pre processor to walk the tree and then it finds and removes those data test selectors from your templates These test sectors are very useful again
12:40
You know instead of selecting something by its class or its ID or whatever other attribute which can be very brittle if you for example you know you change the Class name because of the styling then it's really good because the test selector is decoupled from the presentation Ember test selectors also has makes use of the tree for add-on hook in order to remove itself from the build if the test
13:03
Selectors are being stripped out After all the add-on becomes unnecessary in production right because you know if you're stripping out HTML Why do you need test selectors so it will actually remove itself from your application, and it won't bloat the final production asset And then ember composable helpers is an add-on I co-authored with Martin while I was at Dockyard
13:25
It's a relatively large library that includes a lot of helpers And it doesn't really make sense to include all of them if you're only using one or two in your application So we use the same Hook as well to include or exclude specific helpers from your application
13:41
In the add-on this the tree for add-on hook will call a filter helpers method Which then uses this regular expression to test what file names it needs to include or exclude and then based on Configuration in the consuming application we can be in say like oh, right I only need helper XYZ, and I can just remove everything else because we're not using them and
14:04
Finally ember ci-deploy is an add-on that I that we use a lot at Netflix It makes use of custom commands to give you a really nice interface in which you can deploy your applications from the command line And the nice thing about this is it will act it actually helped you make your deploys automatable
14:21
So you can have for example, you know a CI build deploy an application after a test read runs or whatever else and Custom commands are really simple to add to an add-on ember ci-deploy defines them in a separate folder which also is a nice way of just separating it out and not having this massive index.js file in your add-on
14:42
So I've written a couple of add-ons now and throughout the experience I've learned a thing or two a few hacks here and there that I want to share but Don't use the hacks So first I want to talk about the developer experience, you know It's really important to think about how others will use your add-on as you build it first in your documentation
15:03
It's it's super useful to describe why the add-on exists and why it does and what it does It's like that's something that's actually missing from a lot of add-ons. Like what does this add-on even do? Why why does this exist tell people it's really important and You don't need to write an essay worthy of thought leadership
15:20
It's just just describe it simply Just just a little bit of explanation goes a long way in helping people understand the goals of your add-on How it helps them solve a problem and how they can even contribute and make your add-on better Next it might be obvious, but you should explain in detail how someone might use your add-on Again, this doesn't need to be a fancy website and depending on the kind of add-on you're writing
15:44
This might make sense for like library kind of utility add-ons I will typically detail how to use the public API for an add-on in ways that I anticipate they're used So, you know just give like a simple example of how you use this feature to do some like the 80% use case
16:02
and I take inspiration from documentation like from libraries like lodash and Ramda for example But this doesn't really work for all add-ons, you know, it really depends on the kind of add-on you're building You know, if your add-on introduces a new way of thinking like ember concurrency, for example Then this kind of documentation isn't enough and you definitely need to explain your ideas more
16:23
And if you do have the time for it, it can be very effective to create live examples of how to use your add-on This shows off your add-on directly and gives people more confidence that they'll be able to use your add-on to solve your problem So here's a really nice Real example on the American currency website. Are you sick of American currency?
16:43
And it's even more appropriate when your add-on is presentational So for example, ember burger menu the demo site and documentation site Literally dog food is the add-on right there. It's awesome and ember power select again also does a really great job here You can actually try it out in the docs itself But if your add-on isn't presentational or if you're lazy like me and you don't want to put together a whole like fancy site
17:05
You can use ember twiddle, which is really great. I So we can actually install an add-on into a twiddle, which is awesome. Thanks to all the ember twiddle people
17:22
and personally I like this a lot because it becomes a live playground that you can share and people can actually try out your add-on and Like, you know edit a little bit and see if it if it works for their use case And this is actually kind of like try before you buy, right? Another thing that seems obvious is that your add-on needs meaningful tests
17:40
The good news is that ember makes your life relatively easy now Thanks to all the awesome ember ci folks For example by default your add-on will run tests against different versions of ember. This is all by default. You don't have to do anything But in some cases if your add-on explicitly needs to support, you know Like a really old version of ember or a very specific Version of ember with some weird edge case then you can actually test that explicitly in the ember try config
18:07
And yeah, this is really useful And if you also use travesty I which is free for open-source I reads then you can make use of the build matrix Which will let you specify of different variants of the build to test in parallel, which is really nice and you can even also specify
18:23
Which of these builds are allowed to fail so, you know if you see at the bottom I'm not sure if you can see it, but ember canary scenario is allowed to fail and This should give you and your users more confidence that your add-on works as expected in different versions of ember Additionally, it's also possible to test your add-on and your application against a real browser
18:44
There are various ways to do this. For example in the future. You might actually use headless chrome instead of normal chrome And there are a lot of add-ons to actually do this so you can check out there are Travis configs for examples Now one more thing that's crucial for a lot of add-ons is the ability to configure them in some way
19:03
And this is one area where I feel it's not super straightforward and there are a lot of ways to do so But I don't think it's documented very well So the first method is one that I saw was adopted by liquid fire So in liquid fire there is this file called a transition map, which looks very similar to a route map
19:22
and you place this file in the app folder of your app and Somehow magically it knows how to pick this transition File up without you doing any other work, and this is really nice because it makes configuration quite painless So let's look at this transition map a little closer, so What is it? It just looks like a really simple export of a function right and somehow this functions
19:45
Context you know the this keyword. You know it it knows how to define transitions It knows how to define all these other really nice DSLs very similar to embers router liquid fire makes use of the ember resolver to locate this file and then invoke the function with the new context applied to it and
20:07
This is slightly intimate API here I kept it small, but you can see that this these three basic files at JS resolver and router JS You actually can locate them with the factory with their magic incantations
20:23
and Factory 4 is a new feature I think it's already in ember But if you're all supporting an older version of ember you can use the ember Factory 4 poly pool So you don't have to use that intimate API that I just showed you Now there is nothing special about there's nothing special about the transition map for example it exports
20:41
just like any other JavaScript file in ember and That means in your scenario if you're making an add-on you could say you could tell your users to export a plain object You can export whatever they want Whatever you want, and then your add-on can look for that file, and then pick it up and do the configuration there So it doesn't have to be a function like in liquid fire
21:02
That's just the way liquid fire decided to do it so that they could have a nice DSL Next you can also have your user define their configuration in the config environment file This is generally an older practice, but I think it still remains useful where you want your users to be able to configure your add-on
21:20
differently in various environments So for example ember metrics is an add-on I wrote that gives you a nice API on top of various analytic services like Google Analytics mix panel so forth So you can actually track events with our page views with one API instead of having to call like five different services in your
21:42
Application and in this case It's actually really useful for us to be able to do things differently based on the environment that the application is Being built in so you know you might not actually want your development environment Like you're just clicking around and drop down a hundred times to trigger production analytics because your marketing team will go wow
22:00
We're getting a lot of use, but it's actually just you and config so configuration environment that file seems like a really great choice for this out and Ember metrics installs an initializer into the application that imports this config file Sorry the configuration and then registers it in the container as config colon metrics
22:21
And then that object is injected into the metric service so that the service can access the configuration Now the service you can just access it like any other property just like this get options, and you got your options awesome Note that this is all defined in ember metric itself so the the consuming app doesn't need to do anything else
22:40
so this is really convenient and Another popular option is to make use of the ember CLI build file And this is a good way to allow configuration that happens at build time So again ember composable helpers comes with a lot of helpers as its name suggests But You don't want to bring in everything so we let you configure it here where you can say like I only want the increment helper
23:03
I only want decrement But except pipe yeah, you're not supposed to use them both at the same time is this an example And yeah, this is all handled in the add-ons index file so the included hook lets you modify What goes in the build you can whitelist and blacklist and then if you have those functions return new broccoli trees
23:23
then you can you can exclude or Include those offers and Then depending on the kind of add-on it might also make sense to allow users to extend it based on their needs So again with the ember metrics examples it ships with some Bundled adapters for different services like mixpan on Google annex
23:44
But it doesn't define like an adapter for every single thing and the idea is that With extensibility we allow users to define their own adapters So you can write an adapter for your application against your you know your bespoke analytic service or something else that we didn't build and then this is also nice because it also strips away the adapters that you don't
24:04
use and These adapters are just plain ember objects under the hood Except that the service the metric service expects them to implement some specific interface One thing to note about this approach though is that these plain ember objects are not managed by embers container And what that means is that you have to manage their lifecycle yourself
24:24
So you got to delete them or destroy them you got to initialize them blah blah blah And then here you know like in ember metrics example We have a base adapter that all adapters inherit from it doesn't really do anything but throw errors if you don't define a required method and
24:41
Then each adapter will just implement those methods and you can start using it in your application But the interesting part is in the service itself where we need we need so even though if you created an adapter the metric service doesn't know that your adapter exists in your application, so we need a way for the service to discover them and essentially what
25:00
Ember metrics does is it uses the names that you specify and the configuration and then it tries to look it up First in your application and then in the add-on so again so you can override The Google analyte adapter for example if you don't like the base implementation and Once you have a reference to that adapter factory
25:20
Then you can the service can now just instantiate these objects at will you know and delete them and so forth And yeah, that's a pretty nice way to do it Okay, and then there's approach where you operate outside of ember. This is the dangerous part so note that I don't recommend this Approach, but I just want to talk about it
25:41
So in ember chainset validations, which is a validation library Validators and validation maps are plain functions and objects are not ember objects so what that means is that we don't get access to the container and So to allow our users to override validation messages like the default so we had to rely on a little hack And kept this font size small so don't read it again
26:04
I don't recommend this approach, but in in certain cases. You know like hacks are useful, right? Yeah, don't do this and yeah, and again like in certain cases hacks are useful a Lot a lot of ember a
26:22
Lot of ember and embers realize started out as hacks, but in a way hacks allow Library authors to determine like what the optimal API should be and I can see Rob laughing But yeah sometimes hacks are okay, but at your own risk Another way to provide extensibility is the approach that embers service worker does
26:43
so embers service worker the base add-on doesn't really do anything except take care of some basic infrastructure and Then in order to actually get some service worker functionality into your application you need to install plugins And you know these plugins all do different things So how embers service worker does this it looks at the embers service worker plugin keyword in the add-on
27:04
So it actually can look at the add-ons these plug-in add-ons package JSON file and determine if this is a plug-in that it needs to then initialize and install as a service worker and Then in the add-ons post process step it will find those plugins it discovers them
27:21
And then it registers them in your browser and actually this is actually a really nice approach for add-ons that are extensible it's a nice way where people can extend your add-on without any effort on your part and It all just works So as you can see the more you know about the internal workings of ember and ember CLI the more features you can take advantage
27:43
of and to use in your add-on and There are a number of ways to do that, but personally my favorite is to always keep this application open It's called dash. It's an offline documentation app. It's a really nice search feature I have it open a hundred percent of time when I'm working and it's really easy to just look stuff up and it's not ember specific and
28:00
Again, there are many ways to get acquainted with the internal guts of ember But I like this approach because you start from the public API you're familiar with and then you can start digging deeper and see How the framework actually implements something so as a simple example. It was digging through the source for ember set That you I discovered this unknown property and set unknown properly which is very similar to Ruby's method missing and
28:25
There are actually a lot of add-ons that make use of this like hidden feature as a way to intercept sets on objects So there's definitely a lot of benefits into learning how the framework is implemented and there are always people on slack who are very eager to help you understand the inner workings of ember and
28:44
You never know you might discover something interesting that you can make an add-on around So those are just some of the interesting pieces of ember I discovered when making ounce and studying other people's add-ons There's definitely a lot more to discover So I hope I've motivated you enough to start digging deeper, and you know maybe write an add-on of your own for your for your team
29:05
But stepping back from the tactical stuff for a moment Add-ons are ultimately about open source and when you write your first add-on open source feels really scary You know your code is gonna be like live for everyone to see and criticize But don't let that stop you you know your add-on your first add-on doesn't need to be amazing
29:23
And you should at least give it a try even if it's really really simple If you do enough of it, you'll get a feel for it personally my Ember was my first introduction to authoring and maintaining open-source libraries I think my first add-on was ember CLI flash, and I remember when I first open-sourced it. I was really embarrassed by it and
29:42
If you do is even more you become more confident and level up quicker You know open source teaches you a lot You know not just on the technical side of things but also in terms of your communication skills So as engineers we might tend to focus too much on the nitty-gritty details And we forget that ultimately we work with people you know real-life people so sometimes our communication skills can tend to suffer
30:07
and finally If you do open source long enough You could be this person and write your own JavaScript framework alright, so at some point or rather in your open source career
30:20
You know you're gonna get to the stage where you can no longer devote all your time Your free time to a single open source library and in those scenarios is actually really important to be able to Relinquish control and and trust other people to step up and maintain your add-on in your place and Maintaining if you ever have this scenario where you like you know you inherited a very popular open-source library
30:43
Or if your library becomes very popular, then you will find that it's actually very exhausting to maintain You know people are opening issues. They're yelling at you They're calling your names, and it's very common to feel frustrated and sometimes you might even grow to hate working on this library because people can be quite toxic and
31:03
In those scenarios it's really important to know when to disconnect people will say mean things about you for sure They will make say mean things about your code. They'll you know make personal attacks against you now This is by no means normal, and it's not something we should tolerate But it does happen and again when you start working in open source this technical part of it
31:22
Is only probably half the challenge And finally if you do decide to start in a scary world of open source, please adopt semver Thankfully we have tools to make it all easier and You know be a good open source citizen All right, we've talked a lot about a lot today
31:41
We first we looked at what the major differences are between an add-on and an app We learned that the add-on folder is the guts and the app folder is what's merged into the consuming application Add-on hooks are really powerful, so do check them out Then we talked about different approaches to managing the developer experience Good documentation is really important as well as meaningful tests
32:01
and you might want to take some time to think about how your add-on can be configured how it can be extended by other people and Finally remember that open source is not just about the code I hope my talk will motivate you to get out there and enter the scary world of open source You can reach out to me on Twitter. We can look at look for me after the break if you have any questions
32:22
Thank you all for listening. You've been great