Bestand wählen
Merken

Building Custom Apps with Ember CLI

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and news and some news and every
I in that town this thing from the wonderful country of directly that and I had a separate time here so far I hope everyone else that as well and I that way home I get anything more before the end of the conference In the case that I don't you can always find me on Twitter or a bit of accurately for us and also be tweeting a link to my slides as soon as I'm done so we're gonna have engineering team and the and 1 thing that we've been working on what is creating a Firefox OS applications with embassy I and I know we've all heard a little bit about embassy alive so part of during the course of the conference which is an embassy alive everyone's favorite command line tool for creating and applications really quickly and keeping them super organ before and the CLI I came along there's a huge void in the tool that JavaScript developers there are things like welfare of Ruby are in I so we were just really missing a core piece of our toolchain when we're developing a JavaScript application so a couple months back on my team and Mozilla with actually trying to fill this void by creating our own command line tools and it was cute it was called rec room and it definitely catered toward sporophytes so as application you couldn't scaffold any kind applications with that by we really want a focus and cater to firefighter factor less developers as well and as the building I would come across some features that I wanted to implement and would run into a problem where would struggle through our creating some some sort of feature and I find myself creeping on and still like code base to see how they solved it and when you find yourself doing that when you catch yourself doing that proper it might be a sign that you are building a tool that already exists and maybe you should stop so we get band we decided to leverage embassy alliance that but the problem now with that and the I didn't care about Firefox we had this custom environment that we wanted to build for that we wanted to other developers to be able to build for an embassy aligned it know anything about it so we had to make the sale I care about our environment that we wanted to build for and what exactly were our requirements what we're on the by a factor less applications are actually just built using the current standard Web technologies actually couldn't have asked for a better person to speak after because Brian did a great job of showing everybody how are the web has become and how great it and how powerful you can do but how many powerful things you can do with it now sold by a factor with applications are built completely with web technologies which makes our requirements just a handful of modification the 1st 1 is that we need a manifest file is this the same concept of the package chastened while they are going to share a lot of the same but properties and values are you're probably very familiar with with this kind of concept so need and the elided generate and validate this file for us we also need some kind of UI components that what kind of mimic the apart so it's innovate we want or went back to look and feel like they belong in Firefox that and we want a way to publish to the property marketplace so those where all of the requirement that we had and each of these examples is of great use case for creating an embassy light out on an embassy all I atoms are the way that you expand the core functionality of embassy alive they're basically just and PM packages they follow all the standard and and Convention Center already familiar with have a package days some file that will point to an index file as its entry point so that's where you'll be able to add all of your custom logic and of really modified weight and and the CLI works for you the super easy to create a soul in order create 1 you can just run on the name of your on and then to install on within an existing embassy alive project you can run member install add-on and then the name of that like 1 of good so the 1st requirement that we have and we want to create a book so I was 2nd back up and right again that I use an application to demo a couple things with so I have an application of a CLI
application running here just on the desktop its super simple it just shows you your local time and then you also have the ability to select different time zones I have to display and compare against the
local time so you always know what time it is in any given country I don't have New Jersey there yet but I will put that the of the list as answers and then a Jurgen can walk through of creating an outline of what what would an animal like that turns this application into a Firefox OS application yeah and if we
think about our 1st requirement that we have and we wanted to create a manifest file so we need embassy elided generate this file for us we also mention that it's going to share some common values with the package day some files so not only do we want to create this final we want to keep in sync with the package Jason so that we don't have to have our developers updating the same values in in 2 different places right so we want ever still like to do that and we're going to create blueprint to do this with friends are basically just rules for generating common code and file structures and Brazil I have a lot of these are filled in by the fall and you can also add your own with up a single command Amber generate blueprint and the in your blueprint so in the context of an add-on when we create a blueprint is a concept that the default blueprint for for adult and what this is going to do if we name our blueprint the same as our pattern it's gonna tell embassy allied to install whatever files we specified as soon as the user installs our I so if we go
to the terminal really so I stand out in the of practice and that has some this stuff implemented already and let's say we ran out and were generated blueprint command this is going to generate some files and folders for us think about the so if we run at the break command where this folder here I called blueprint and underneath that we have of blue-green called embassy alike affects all X and that's also the name of our at with in here we have an index file where will be able to uh add some custom logic to the to the blueprint and of modify the way it works and then we also have this files directory and with this file directory does is we will within it we want to kind of mimic the directory of the consuming application so if we want to create a manifest file in the public directory of the consuming application we're going to create a manifest file in a public directory in this files direct if we want to create a file in the conflict folder we would create a conflict folder here and we would have been on file in there so whatever the alliance can do any insult blueprint is it in a kind of merge these trees these it that the files from you're consuming application with whatever you specify in your blue the so here we have our our manifest file them down with some of the default values and the required a mandatory properties and then you also notice some of these values the half of the are are prefixed with at the time and what we're going to do with those is replaced them with package Jason of values so that our developers don't even have to touch the thing on the think about and all so we have our of blueprint set up
in pattern is and we have our application running and Brazil I application running so Ivorian installed the I add on in this application that and and then be working in but for the sake of demoing how this manifests get the generated we could run Amber generate remember along at that so n and we should be listed there that it created a public manifest . web app to the running the discovered that this false is over the semantics of real quick and we can see in our directory structure we have public and then there's the matter folder not that there is a manifest file so it got copied over into our public directory just as we expect so now how do we implement the part where we want to replace these variables With package Jason values if we were to run and rebuild right now this manifest file would get copied into this directory as it is and obviously these variables don't mean much version numbers is not a version number and an happening name if not athlete so let's take a look at the logic for for
implementing Mac yeah regret as I mentioned on in your account on you're going to have your package Jason filed point to an index file that's a entry point this is where you have all your custom logic for your out on and how they're going to modify and embassy allies behavior and from this index file embassy alive provides us with some basic of books that we can have played into so that we can modify that point in the build process or we can add different different out properties and values to our application so 1 that's available to us is called post process tree and it's a little bit of here are a sample bit of here but the what happens here is this book is gonna run every time you run and bill it runs through the end of the build process when you have access to the tree that you can modify the right before they go into the dis distribution directories so burgonet say whenever where we run and rebuild we want to take our our men have from the public directory and also grabbed the values from a package chase of which are available within this method at this project package and we're going to replace themselves and already at required in a function of sinking manifest over logic for that the logic in that country is what going to the replacement for us I just want to show you guys and how how this might have affecting the way that Amber run to build me the the so the go back out on the application and we run member built and and
we show the saying In our
dist directory a manifest
file and now we see that the version number was updated the name of our application is updated and the description of data all these values will hold from package chase them and build time so that the developers never have to touch the manifest file they never have to know that it even exists yeah the because the
so the next requirement that we had was a you component and we want to developers to be able to create applications that look and feel like they belong in Firefox OS like their native applications we want them to mimic that the interface layer of Firefox OS is called guy and there's a repo with a bunch of different i components they have tavern switches and many of the law but it's very much a work in progress so this is going to be a little bit of a contrived example but they wanted to create a tad component which would be available as a of our packages that guy components inside the eye and have and creating a component half of that is is a two-step process you have 2 main responsibilities when you're creating a component the 1st yeah is to include the dependencies and actually create your and so we want to include this this power package for R guy attack and we also want to write any kind of set up logic total logic for and the 2nd responsibility is making sure that both of these things the dependencies and your add-on are available to the consuming applications and this is the part that kind of money creating component it's not difficult but there's a lot of different that and it's easy to miss something where it's easy to forget to do this particular 1 of them so when I want to example really quickly don't worry if it's a little tough to follow all circle back and review all the steps that we went over I have a friend that
and events so were inhabiting right now this but in this area and we already did our Bauer and for all of the guy time components I we look at our our components I I have this older surgery here diet and so we have that available in our and on the because our our own component is going to depend on this this power package but it's not enough that our our methods our package we need to tell the consuming application that it's going need this power package to are so when we were creating our blueprint file I mentioned that there is an index file there where we get add some custom logic and I also mentioned that this blueprint gets generated automatically after you install you're out on to an application so this would be a great time to tell by your application hate you're going to need a power package to you might as well install it now the so just like in our index file over and we also have a couple different hopes fervor blueprint 1 of which is after install and what we can do here in this afternoon is just return of this built-in method this ad our package to add guy towns and that will tell are consuming application you need to do a balance all of this out of this package of these guys and application will do that know that makes the power package available for our our consuming application but we still have but the JavaScript file and CSS file from this Bauer package that we need to include in 2 of our application we need to not just make the Bauer package available for use we need to actually use it so In the index J file of of our time were we have another hope here that was sitting here earlier and I didn't mention anything about it but this included have is another 1 of that runs during Amber build process and this is a great place to import any of the dependencies that you need for your consuming applications so 1 of the things we can do here is run an ad important yeah and then we're going to grab the directories and the patterns of our JavaScript file and the CSS file that we need and it is this never happened to the a very so so we have our dependencies we took care of creating on installing power the power that it in our hands and we also gave are consuming application access to this power package now we still have to actually create art out on so what we're going to do here is we we want an add-on directory with a a corresponding can our components directly underneath that and we're going to have a file named after our component that were creating so we're creating diet and this is where you can this the meat of your component this is where you can ah you know define yeah you're typing words that are actually a binding send you any set up a terror down logic and now we have we have a component in an add-on on but just like we did with our dependencies we have to tell our consuming application about it we have to tell are the application that wants to use this that it's available for for the application to use so the way we want to do that is by creating an app directory and under that directory we're going to have another components directory and another file called by attack but literally all this file is going to do is to import our component that we just created and put back out so that are consuming application knows that it exists and then finally we need as a template for component so again under that directory we have templates folder with components of the and handlebars file that simply defines out the template for for our diet task
so
that
who for many so in in in our application using this add-on that using this component if we look at our
our application then but I don't we the I have a 30 implemented in here so
I have diet tabs and and setting up the many times that we need to to populate power of at times
component and that's what's controlling
are the clock and the time
zones links back and forth you can so
that was a a decent of
information and I guess I promise I will review what we just did it because it's a little confusing there are a lot of files involved what do we do it dependencies we Bauer installed our diet have dependency into or out on we told are consuming application that it means that our dependency of well and then we actually included the dependency by so that they can get half of that time the component logic we created our component we did our set of logic we did our teardown logic we even in namely i created this this component in are not we exported the component to the consuming application further applications can actually use it the and we defined the component template so there's a picture steps
basically in creating a component this is 1 of the things that hopefully in the future it
will it will get a little bit easier to do I even if it's a little hard to follow right now I promised the documentation on embassy alive site those every single 1 of these steps so you just have to not miss 1 of them and there's a lot of good example add-ons out there that you can use the following you can learn from 2 to create components the a bit so we have 1 more hour 2 more things on our to-do list validation publishing we want to validate that manifest file and we also want the the published to the marketplace and unlike our our thinking of our manifest file the package Jason file we 1 have more control over when these things are right we don't wanna be publishing to the marketplace every time we build our application so this makes some really good I candidates for being commands for creating command so just like you might remember new amber sir we wanna be able to run something like and at that so as to validate or at its however publish so let's look at what the command
looks like In Amber and still who yeah and that so I have a live directly with the commands directly underneath index file here and this and I file is the exporting object where the keys are the names of your comments and the values or at the actual command and if we look at this validate filed with our belly command we can kind of see the basic structure of when a command to look like it did have a name which is can be what you type in the terminal to run the command it can have aliases in case it's a prolonging you want and short to have a description and we should really tell it words inside the project entitled members CLI projects and it also has a run method and this is where all the magic is going to happen this is where we're in actually write our validation logic I've already imported a ballot manifest file function so that we don't have to look at the code for that because it's not relevant exactly to you and so we're just gonna return this we're going to validate our manifest file and that's what's going happen when we run our ballot command but ever so I doesn't know that we put these commencing doesn't know about these yet so we need to tell it that is meant exists and that the application can use that if we go back to our index data file again this is another 1 where we're going out another hooked on that that embassy 0 I have built for us to utilize this 1 is a lot simpler to understand and included commands and all and energy there is returned my objective command so I already have required that in at the top of the file and what is going to return the object of of the ballot command and the published and now we go to our terminal
we try to run 1 of these from our application but you validation the we see that invalidated are manifest on the validation task we have a warning message but we don't care about that right now then we know that our Our command was there and it works and then when it's supposed to another way we could have told that this command was available to us is by running Amber held the and besides just running the word of commands and information about embassy apply what it's also going to do is without information about the available commands from your out not so that the super helpful thing when you have out on that our incorporating command your Amber held command will also list both and we see that we have about it and publish command here it the Polish command are not going to go too much into all were actually still editing has but I have a set up locally 1 thing I just wanna point out is another property of command is that you can specify available option so if you want to know I was throwing a flag when er pathway year of running the command and you can forward 1 of these options you can define the main types and and set default values for these this out but I get past and we are going to be available to you through this option cash in the run method so when 1 unpublished they we want or published to the developer marketplace the Development Marketplace versus the production Firefox marketplace we could have seen our environment option method development but if were ready to publish 2 production in that environment to production and with published to the production marketplace so I have my own
development marketplace and opened up here and in and if I click on my submission I see that I don't have any
applications right now around but if
I run my the published command from application the the check should go and how do you back yeah so we have successfully created and we have an out by the to reference and now if we look over at our marketplace
of submissions and we re 1st we should see our application time clock right there OK if it the so those
are just a couple of different ways that you could use patterns to extend the functionality of embassy or like there's a lot more use cases and there's a lot more examples out there I I encourage you to look at the documentation because there's a lot of information that we did not cover here right now and like I said there's a lot of good and and so that you can learn from that you can follow by example you can really get embassy I to do almost anything that you want to kind of a pushover like that but it's a really great tool so deftly take a look at it if you have to start working with it if you have it also if you're interested in learning more about creating firecracker with applications you can take a look at this out that we watched you on get have how you can take a look at the Indian act center or even find in 19 on c i in abstract mozilla . 4 could but I don't believe a left question but if
you have any feel free to cheat on me or find before the end of the day and be happy to talk more about this you and get half of all from the
Bit
Punkt
Kartesische Koordinaten
Betrag <Mathematik>
Oval
Twitter <Softwareplattform>
Komponente <Software>
Vorzeichen <Mathematik>
Prozess <Informatik>
Gruppe <Mathematik>
Speicherabzug
Weitverkehrsnetz
CLI
Lineares Funktional
Oval
Installation <Informatik>
Kategorie <Mathematik>
Schreib-Lese-Kopf
Gebäude <Mathematik>
Strömungsrichtung
Programmierumgebung
Teilbarkeit
Rechenschieber
Funktion <Mathematik>
Twitter <Softwareplattform>
Automatische Indexierung
ATM
Projektive Ebene
Ordnung <Mathematik>
Programmierumgebung
Standardabweichung
Schnittstelle
App <Programm>
Ordinalzahl
Gebäude <Mathematik>
Mathematische Logik
Code
Fluss <Mathematik>
CLI
Benutzerbeteiligung
Lesezeichen <Internet>
Zusammenhängender Graph
Softwareentwickler
Cross-site scripting
Binder <Informatik>
Elektronische Publikation
Quick-Sort
Zustand
Mereologie
Speicherabzug
CLI
Subtraktion
Font
Trennschärfe <Statistik>
Gebäude <Mathematik>
Mailing-Liste
Kartesische Koordinaten
Zeitzone
Zeitzone
Kategorie <Mathematik>
App <Programm>
Versionsverwaltung
Einfache Genauigkeit
Gebäude <Mathematik>
Schlussregel
Kartesische Koordinaten
Kontextbezogenes System
Elektronische Publikation
Mathematische Logik
Synchronisierung
Code
Schlussregel
Netzwerktopologie
CLI
Generator <Informatik>
Datenstruktur
Automatische Indexierung
Code
Mustersprache
Radikal <Mathematik>
Kontrollstruktur
Datenstruktur
Softwareentwickler
Verzeichnisdienst
Default
Distributionstheorie
Bit
Punkt
Prozess <Physik>
App <Programm>
Web-Applikation
Versionsverwaltung
Zahlenbereich
Gebäude <Mathematik>
Kartesische Koordinaten
Mathematische Logik
Netzwerktopologie
Physikalisches System
CLI
Variable
Mustersprache
Stichprobenumfang
Datenstruktur
Ereignishorizont
Chi-Quadrat-Verteilung
Lineares Funktional
Kategorie <Mathematik>
Elektronische Publikation
Arithmetisches Mittel
Generator <Informatik>
Automatische Indexierung
Rechter Winkel
Betafunktion
Mereologie
Projektive Ebene
Versionsverwaltung
Verzeichnisdienst
CLI
Deskriptive Statistik
Versionsverwaltung
Zahlenbereich
Gebäude <Mathematik>
Kartesische Koordinaten
Softwareentwickler
Elektronische Publikation
Verzeichnisdienst
Bit
Subtraktion
Prozess <Physik>
Total <Mathematik>
Gebäude <Mathematik>
Kartesische Koordinaten
Maschinensprache
Gesetz <Physik>
Mathematische Logik
Task
Komponente <Software>
CLI
Arithmetische Folge
Mustersprache
Datentyp
Endogene Variable
Zusammenhängender Graph
Softwareentwickler
Schnittstelle
Leistung <Physik>
App <Programm>
Kreisfläche
Installation <Informatik>
Template
Indexberechnung
Elektronische Publikation
Ereignishorizont
Summengleichung
Chirurgie <Mathematik>
Flächeninhalt
Automatische Indexierung
Mereologie
Wort <Informatik>
Repository <Informatik>
Verzeichnisdienst
Physikalisches System
CLI
App <Programm>
Betafunktion
Ein-Ausgabe
Mailbox
Gebäude <Mathematik>
Kartesische Koordinaten
Zusammenhängender Graph
Marketinginformationssystem
Ereignishorizont
Versionsverwaltung
Meta-Tag
Komponente <Software>
CLI
Installation <Informatik>
App <Programm>
Gebäude <Mathematik>
Zusammenhängender Graph
Binder <Informatik>
Zeitzone
Zeitzone
Leistung <Physik>
Komponente <Software>
CLI
Mathematische Logik
Elektronische Publikation
Menge
Installation <Informatik>
App <Programm>
Gebäude <Mathematik>
Kartesische Koordinaten
Zusammenhängender Graph
Information
Elektronische Publikation
Mathematische Logik
Aliasing
Bit
Web Site
Kontrollstruktur
Kartesische Koordinaten
Gebäude <Mathematik>
Mathematische Logik
Template
Code
Komponente <Software>
CLI
Deskriptive Statistik
Datentyp
Radikal <Mathematik>
Zusammenhängender Graph
Datenstruktur
Lineares Funktional
Güte der Anpassung
Validität
Mailing-Liste
Elektronische Publikation
Objekt <Kategorie>
Energiedichte
Automatische Indexierung
Gamecontroller
Projektive Ebene
Wort <Informatik>
Schlüsselverwaltung
Konfiguration <Informatik>
Punkt
Kontrollstruktur
App <Programm>
Kartesische Koordinaten
Gebäude <Mathematik>
Task
Physikalisches System
CLI
Softwaretest
Fahne <Mathematik>
Softwareentwickler
Default
Ereignishorizont
Kartesische Koordinaten
Modul
Kategorie <Mathematik>
Validität
Digitalfilter
Biprodukt
Konfiguration <Informatik>
Rechter Winkel
Betafunktion
Wort <Informatik>
Information
Programmierumgebung
Versionsverwaltung
Message-Passing
Physikalisches System
CLI
Softwaretest
Betafunktion
App <Programm>
Gebäude <Mathematik>
Kartesische Koordinaten
Digitalfilter
Softwareentwickler
Ereignishorizont
Versionsverwaltung
CLI
Lineares Funktional
Subtraktion
Verschlingung
Momentenproblem
Mustersprache
Gebäude <Mathematik>
Kartesische Koordinaten
Information
Gammafunktion
Videokonferenz
CLI
COM
Verschlingung
Rhombus <Mathematik>
App <Programm>
Finite-Elemente-Methode
Momentenproblem
Gebäude <Mathematik>
Dienst <Informatik>
Ereignishorizont

Metadaten

Formale Metadaten

Titel Building Custom Apps with Ember CLI
Serientitel Ember Conf 2015
Autor Storoz, Brittany
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/34745
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Not long ago, the JavaScript world lacked a good Rails equivalent. Ember CLI is quickly filling this void, and consistently improving thanks to its extensibility. The tool can be easily tailored to build for custom environments by creating new add-ons and leveraging existing ones. This presentation will highlight how to extend Ember CLI through add-ons, explaining example use-cases, how to create one, and the hooks available for developers to build into.

Ähnliche Filme

Loading...
Feedback