Bestand wählen
Merken

No more 'grunt watch': Modern build workflows with Broccoli

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
lot of language in the and so on the and this this so I
now have whether it's using jobless who is going to give you guys talk about properly adjusted build tool I'm really excited to start using prophesy like and figure out how to spell broccoli crime install I will be rejected out of a job in that the thank you is the might on so my talk is gonna be about broccoli I'm Jones I wrote properly and before I start of sort of going into the technical details so I wanna you this that aren't about what motivated properly and how it fits into the larger ecosystem and so so I started I started thinking about this I at last year's Amber conference and what I what was bothering me at the time was that we had no way to share that coal would be in the front end browser JavaScript ecosystem by because shackled with ruby or with for node based on a script but far a front end JavaScript all we were doing was like here's a big job a script file please drop it into Europe and her directory and but just didn't seem really great and as I started talking to people about this I realized pretty quickly that the missing piece was actually not package management and we we do have a package manager that is pretty good and I think it's architecturally doing the right thing and and power so what Bauer will do it is when you have an app with dependencies it's going to load all your dependencies from the internet and know there dependencies recursively and then it's going to have to drop all of those into a big directory and so it just dumps them into the file system and is up to you to do something with those files now with something like a movie it's pretty easy to say require some file and then we is just going to search through all those directories and that things work but for a front end JavaScript applications we have the problem that we actually need to on top of this vast and ties all those files together and concatenates them and bundles them into 1 tidy app that we that we can deliver into the browser and so I realized that this is the missing that this is the thing that is missing each for us to have a great front-end package ecosystem and
the way we've been doing this is grant watch the we have the rare fast pipelined but it is not that bad actually but of course it's tied to race and so if you if you're making if you building a map with JavaScript and the the most common thing seems to be due make a graph files
and you put a lot of and you define a lot of tasks that compile coffee screwed and hand Voth candidates and then you concatenate everything and then you minify then you also have some sound and and probably some more things and it becomes complex very quickly right hand if you've seen ground Phys of real of real world and the ads they generally looks scary because you have to manage all these compiled files and so that is 1 problem the other problem is let's say you have a you have a diagram based apps and you work on it with a small team for a couple months and as time passes the bill gets slower and slower and so after a while you you know after couple months you added a file in the editor's you reload the browser and it takes 10 seconds to reload because the rebuild so slow and that is clearly not acceptable right this is the thing that you're doing 100 times a day and this is your poor feedback loop as a developer if you have a delayed there it's going to make you massively more unproductive so the goal of properly is to have have an architecture that allows us to not have 10 seconds 3 bills that the faster so this talk has 3 parts and the 1st part is I'm I'm going to show you how to write a properly built the Commission in practice and the 2nd part is I want to sketch out the broccoli plug-in API very in very rough terms and the 3rd part is I want to talk a bit about how broccoli integrates with other tools and I'm not going to talk about the motivation behind some of the design choices in broccoli and I wrote a blog post that published about a month ago and I'm going to link it at the end and that has although some rational for the design choices in excruciating detail so but stock about build
officials that by the way there are some changes that I have found for the broccoli bill definition syntax they are purely cosmetic and but what I'm going to be showing you is the New syntax that is coming up soon in the next 1 or 2 weeks and if you want to see the old syntax there is broccoli sample app on get have that has the current syntax but I figured I'm gonna show you a the new the new stuff that is coming up right
let a switching to the editor so this is a abrupt find JS and build definition file and I'm gonna start with the very simple of the simplest case very don't do anything and we are having we have strained here led that refers to the lid directory and we we're just going to export that string and what when you run properly so if it is going to serve all the files in the late directory without doing anything to them and if you run properly build it it's going to copy those live flies into a new directory so there are a lot of this junk JavaScript files and the 1st thing we want to do is concatenate those files into a single out JavaScript on and there are many ways to do this I'm gonna show you the simplest way and which is just use the broccoli content again of and then is I'm emitting the required calls but you have a you have required the required header at the top right where you put all this stuff from and so here we have a contact plug the takes that new tree and you give it a bunch of input files using a blob header and you specify an output file and the con catalog is going to return a new tree object I'm going to call it at Js here and the tree objects it represents a tree of files but it really contains just 1 directory essence in that directory come contains 1 file at the chance and we're going to export that at JSI tree and so if you now run broccoli serve it is going to serve 1 single file at the your else slash Bassett slash at the chance and that's you concatenated JavaScript output that's add CoffeeScript support so what we would like to do is take of science and the lives of a directory of all the JavaScript files they stay in place but all the don't coffee files are going to be replaced with compiled dot js files so we're going to now use the broccoli coffee plugin and that Call it on the living in a tree and it's going to return a new tree object that represents a all the files in the directory except with not coffee fights replaced with thought js files so then we have a new and we have a new tree and we pass that new tree into this concatenated so as you can see we don't have to manage any kind of temporary directories to hold all build output we can just change things together the next thing we gonna do is so we run this app JS tree through the underside JavaScript filter through the broccoli uglified organ and we're only going to do that in production broccoli core doesn't have a notion of they and build environment but what we tend to do is just use an environment variable like this so it's up to you in your broccoli side in new rock file to have a notion of a built environment so in production going to filter this actually as tree through the artifact filter so let's end some next so we take the styles directory and we pass into the broccoli assessed plug-in in we tell it to take the act of SCSS file and that's fine is going to import statements that import other files which in turn import other files and so it vessels is going to generate this huge blob of RCS that's and that is going to go into the slash efforts slash act of CSS file and we start that in the in a new tree now in order to expert this at the moment which is X putting the JavaScript so in order to expert is what we're going to do is called the broccoli much trees plugin a emerge this app JS and at XESS trees into 1 combined treat this copy them on top of each other so now when you run broccoli Serre is serving 2 files in different your else 1 at the jails and 1 after CSS file and finally it and we're going to add an index of HTML file just the wood of our applications and we're going to place that into the public directory so we would like to also merge the public directory into the output so now all the all the sides and public are going to show up in the broccoli output as well without any changes and that is a very simple example of a Brock file so I hope you're equips if you want to start writing your own abruptly bill definitions to do this now to have an idea of what goes where and
we and we have a part to where talk about plug-ins Ms. screen is applying lot OK so the
broccoli broccoli is cool plug-in API is very very simple it only knows 1 type of object and that is a tree so at 1st it would serve into it that a built to a should have a notion of a plug-in that takes a tree and returns a new tree but it turned out to be unnecessary and so the only primitive that broccoli knows is a tree a tree is represented by a strain pointing to a directory war and object and that
object is going to have 2 functions and this is the kind of object that a plug-in will generally return the and on all the important what happens in the read function
that don't read there read function on the tree just returns a directory in that directory contains the tree of files so every time we rebuild we're going to call the de Broglie is going to call the doctor read method on the tree that's going to call the read repeatedly
as files change as it rebuilds its going to call don't read and then at the end when you shut down the server it's going to call the Pena method have to give the plug in a chance to delete any temporary directories
so as you can see that a tiny doesn't really telling a story about how you should build stuff found but this is something that we kind of learned from the from grant that people working on run they really impressed upon me that having another API surface for a bill to what it is really painful because what happens is you have this this ecosystem of plug-ins and you can never change the API without breaking everything basically so everything you have in the API is going to have to stay there forever so I tried really hard to keep the broccoli API minimal and move all the functionality that could be moved out into external help her packages and so plug-ins are generally going to use 1 of these helper packages as base classes to implement that functionality
and 1 such packages the broccoli transform that package it is for the case where you have 1 input tree going into applied in and 1 of the tree coming out of the body so now when you want to implement a plug-in using the transform based class and you don't have to do with the real thing and clean up thing and you don't have to deal with temporary directories but you just have to
implement this 1 function so is there and then there's the and you get to read the files from the source there and then write any of 5 into the destination directory and then on top of broccoli transform we have another package called
properly filter and that is actually really important package to employ implement plug-ins because it implements the case the very common case where you have 1 to 1 relationships between input and output files so the broccoli coffee is an example of that and every phi either gets passed through unmodified or the bulk of the fires get compiled and get turned into dot j dot js files the and when you
implement a filter plugin this is the only thing that you have to implement and process string method the takes a strain so for example the CoffeeScript 5 continents and bread that returns a new strain the compilers output and the only thing you have to tell it is that it takes got coffee input files and that it will emit stop as output files and then the broccoli filter plug-in the brought the broccoli build filter and base class is going to handle all the final at it the handling for you and importantly broccoli so has a
catch the reason why that is important is that every time you rebuild the plug-in is going to be called in it it has to rewrite everything and so if we didn't catch and we would be recompiling all of the script files every time and it would be incredibly so so broccoli filter is what makes it fast when I you when broccoli read bills the filter based classes going to check if a files more last modified time has changed and if it hasn't changed this just going to reuse the output from last time so that's really that's really important how to make it fast unfortunately broccoli filter is limited to 1 to 1 cases because that is the only way you can really reliably cache files so it doesn't work set CES for example it has assessed phone has an import statements so can depend on other files and those has can depend on other files so of we need to rebuild via satisfy whenever 1 of those dependent files change as well so implementing caching for more complex compilers like fast is a bit non-trivial and there are several ways 1 way is to move it into the plugging in and I think that is probably the fundamentally the best way and I did this with a plug-in that with a compiler that I wrote to concatenate years 6 module JavaScript files and it just brings a don't catch another way is to just ignore the problems and if you're if the compiler is extremely fast then we can just we run it every time so that's what I do that's what I actually the process and the broccoli says plug-in is based on while the lips as library which is implemented in C is blazingly fast and so for now follow broccoli says I'm just ignoring the problem and and then for the rails then there is the 3rd way and that's what the rails acid pipe and does so you kind of porous solid you you use Rajic's from the fast files to figure out what it depends on and then you recursively build the dependency tree to figure out when you need to rebuild assess file but clearly there's kind for so we may have to do it in some cases I think we want to avoid it so this is not I don't think we have really converged on a on and great way to do this yet in the compiler ecosystem yet and I think we're going to have to talk to us the the Office of compilers like CES and less and what have you as well to really understand where we should be putting this caching and how we can better how long the compilers can help us implement this more easily poetry I want to talk about the
integration fundamentally broccoli the small
library and I don't think of it as a tool as much as the as I think of it as a library it does have a command-line interface and so you can type broccoli serving broccoli built into the command line but it's really more of a proof of concept and in reality you're going to want to proxy stuff to the API and you're going to want to have your else in in certain ways and so there are all kinds of tricky things that you want to do in practice that I'm definitely not going to be covered by the command line to and so I think we're we're going to have to work a bit more on getting broccoli integrated into other tools and having broccoli provide a good API that is still kind of missing
and broccoli last grant and there is actually a grand properly and plant info grant the grant is a good test right you should be using it for a spell for stuff like the applying or generating staff or running the test suite was all things that should be living in your ground fire and just the quark built to is what broccoli should be solving so It's not that broccoli's trying to replace grant it's just that we shouldn't you be using grants to build our application applications grant is a task running out build tool so that the ground properly and plugin for grants is very simple at the moment and I I hope that we can provide more books into their rebuilt life cycle to make it better in the future and I'm hoping that we also can integrate with back and so on and the reason is that when you have a back and like rails plus the acid pipeline there's a lot of smart things that you can do by default because you can make a lot of assumptions about how the Urals work so that would make it easier to that that will make it easier to to come up with the default stack because we can make more assumptions about what things go where in particular and speaking of the false text as that has been working doing a lot of work and other people as well I believe on amber on the embassy apply all and which is going to be which is probably based and which is going to provide fault tools that for a new Amber applications so that you can type ever you to do and the scene and you can I make a new to-do list so I'm going to be here for another 2 weeks in Portland and I would be very happy that to pair with people on integrating broccoli into other tools and and may be coming up with solving some of the problems that we've been having with implementing plug-ins the right way and so I would be happy to please get in touch this is my Twitter and my e-mail address
and as I promised earlier the linking not most about broccoli's architecture is there if you want to read up so I think we have a a couple minutes for tuning the who has the mike we got excellent who has a question yes well that is and as I mentioned work at Apple and we have a problem right now also from multiple kernel that we're building multiple under the shared codebase and I wonder if that's something that There's broccoli have a user story with us you so for for sharing what you're talking about is basically sharing libraries components between and perhaps of and so the story for that is you would probably use something like Bauer than to pull in libraries into your app and there is about broccoli Bauer that plugging that automatically picks up on your and directories so yes if you will if you want to see an example of that there is a broccoli sample at on get have that day users by users Bauer libraries the middle of the atom of anyone else knows the irony is that our excessively you can use private of our modules like you're registries but like the I don't have that enables you in the back that he heard I can do this in absolute suffer I no blues please but I have to ask you about with the status with your best Windows support from the view that no no it's very on how others were criminals Buckley that is 3rd the new the question in that I don't know the world is what work on Windows on Windows and at them only there is a problem with you know with the Windows and I and where it has a weird race conditions so if you write a lot of file is or delete a lot of fights and very quickly then and know what is going to flow randomly weird hours the so the Windows support is basically blocking on that's as far as I know tell so someone is going to have to fix node the more questions yeah they are by Mr. fury and I'm just I really like the new API for the the Brock file the 1 question I had is what you would you think about letting race love plane arrays love trees be representation of trees which friends are so instead of having to do emerge trees in your Brock file you just exported rain not have to worry about merging them a so that's what that that's the original syntax where we just array but it doesn't have the overriding semantics well-defined like it has to either override or not so I moved into an external plug-in and then you can configure whether you want to overwrite or not but it expects the I have the idea of a larger application where you want to maybe break it up into different models maybe using trees to have separate bill targets so like you've you be basically had a core apps and then different routs break those into different bill targets and then somehow with like requires or some sort of way to pull those in but that that's different but as like that using broccoli for different bill targets is a fairly easy to do you think yes and you could it generates multiple trees and then there is there is a plug-in to move files into subdirectories so you could have 1 tree in 1 subdirectory you another tree in another subdirectory and then at the end you just merge all these trees together to output and 5 different subdirectories so that is definitely use case the in the back what about fingerprinting I'm sorry can considered him what about JavaScript and CSS an asset file fingerprinting for cash the fingerprinting and I don't want implemented on the CIA line so I will look 1 of us is going to have to hear the they if staying longer in Portland we could just around the you have to convince you to let me stay a little bit longer I have I have completely punted on writing a finger printing idea and the reason is on the imprinting files was very easy of course it is and we name them but the hard part is we right from your house and so it seems that on we would want to have let's say script references in HTML files and your references in CSS files pointing to images you want to rewrite all these and there is no general way I think to do your rewriting reliably so this really needs to live in each preprocessor found so that makes it a lot harder to do it right I agree by the way this would have been using this but do you do you 1st see this is what we've been talking about the stable you foresee just a separate tool that specialize for fingerprinting that lives as a sibling to broccoli or use use something that's more integrated with broccoli I don't I think it will be integrated out so it again it's probably not a single plug-in but we need support in the state's staff to our to rewrite your analysis and aid let's see an HTML preprocessor to generate your cells so we need that we need and custom neural support your rewriting support in a bunch of places and that makes it hard so I'm definitely willing to pay around that it's hard it surprisingly hard that thanks to the quick discussion I appreciate that everyone's patients that sounds like a very good interim solution well we come up with a good solution poor and we should chat afterwords and maybe we can turn that into a properly planned in just to have a that happened in intense and 1 more question maybe was there just misleading so you get to run across the room again I'm curious so I think it's great they were building this that they were gonna integrated with the temple inferred that for amber itself self is there any plans integrate it with something that we could write custom templates like like yeoman or something so you're talking about generating generated files all scaffolding of here and you have immediate encoded heartily and found that no I'm sorry it's probably terrible at the airport the so is there any plans to make a broccoli plugin for Yeomans they are simple question against I don't know and those so scaffolding in general of efficient broccoli and I'm not sure what how we would integrate with existing scaffolding tools in my impression is that perhaps the scaffolding to it would generate a brought file is 1 of the things that it generates so that you have a starting point all right thank you everyone yeah but if we you don't have any of the things that the and and and the the kind of thing you can and in the past so the and so the if you to
App <Programm>
Browser
Formale Sprache
Kartesische Koordinaten
Elektronische Publikation
Quick-Sort
Videokonferenz
Knotenmenge
Datenmanagement
Prozess <Informatik>
Rechter Winkel
Front-End <Software>
Debugging
Dateiverwaltung
Skript <Programm>
Verzeichnisdienst
Faserbündel
Leistung <Physik>
App <Programm>
Rückkopplung
Bit
JSON
Graph
Web log
Theoretische Physik
Browser
Zwei
Automatische Differentiation
Elektronische Publikation
Term
Integral
Mapping <Computergraphik>
Task
Texteditor
Diagramm
Reelle Zahl
Rechter Winkel
Mereologie
Computerarchitektur
Cloud Computing
Softwareentwickler
Auswahlaxiom
App <Programm>
Auswahlaxiom
Mereologie
JSON
Stichprobenumfang
Mathematisierung
Mereologie
Momentenproblem
Mathematisierung
Online-Katalog
Netzwerktopologie
Variable
Biprodukt
Inhalt <Mathematik>
E-Mail
Touchscreen
Funktion <Mathematik>
App <Programm>
Expertensystem
Befehl <Informatik>
Gebäude <Mathematik>
Systemaufruf
Plug in
Ausnahmebehandlung
Biprodukt
Elektronische Publikation
Ein-Ausgabe
Objekt <Kategorie>
Codec
Texteditor
Automatische Indexierung
Rechter Winkel
Mereologie
Ruhmasse
Speicherabzug
Ordnung <Mathematik>
Programmierumgebung
Verzeichnisdienst
Zeichenkette
Netzwerktopologie
Objekt <Kategorie>
Lineares Funktional
JSON
Funktion <Mathematik>
Datentyp
Verzeichnisdienst
Lesen <Datenverarbeitung>
Netzwerktopologie
Netzwerktopologie
Lineares Funktional
Verzeichnisdienst
Lesen <Datenverarbeitung>
Server
Elektronische Publikation
Verzeichnisdienst
Lesen <Datenverarbeitung>
Netzwerktopologie
Netzwerktopologie
Lineares Funktional
Extremwert
Flächentheorie
Ein-Ausgabe
Klasse <Mathematik>
Vererbungshierarchie
Plug in
Ein-Ausgabe
Verzeichnisdienst
Hilfesystem
Lineares Funktional
JSON
Funktion <Mathematik>
Plug in
Quellcode
Integraloperator
Ein-Ausgabe
Elektronische Publikation
Verzeichnisdienst
Prozess <Physik>
JSON
Compiler
Atomarität <Informatik>
Klasse <Mathematik>
Netzwerktopologie
Vererbungshierarchie
Programmbibliothek
Skript <Programm>
Funktion <Mathematik>
Caching
Befehl <Informatik>
Prozess <Informatik>
Plug in
Ein-Ausgabe
Elektronische Publikation
Modul
Office-Paket
Zeichenkette
Konferenz Europäischer Statistiker
Funktion <Mathematik>
Caching
Cloud Computing
Zeichenkette
Lipschitz-Bedingung
Bit
Mereologie
Desintegration <Mathematik>
Beweistheorie
Datentyp
Programmbibliothek
Programmbibliothek
Integral
Bit
Punkt
Momentenproblem
Desintegration <Mathematik>
Atomarität <Informatik>
Adressraum
Selbstrepräsentation
Schreiben <Datenverarbeitung>
Kartesische Koordinaten
Service provider
Kernel <Informatik>
Netzwerktopologie
Bildschirmfenster
Skript <Programm>
E-Mail
Default
Gerade
Konfigurationsdatenbank
Funktion <Mathematik>
Array <Informatik>
Softwaretest
Suite <Programmpaket>
App <Programm>
Sichtenkonzept
Präprozessor
Template
Güte der Anpassung
Gebäude <Mathematik>
Web log
Twitter <Softwareplattform>
Rechter Winkel
Konditionszahl
Information
Verzeichnisdienst
Aggregatzustand
Ebene
Maschinenschreiben
Subtraktion
JSON
Stab
Automatische Handlungsplanung
Keller <Informatik>
Zellularer Automat
Sprachsynthese
Task
Demoszene <Programmierung>
Multiplikation
Informationsmodellierung
Knotenmenge
Datentyp
Programmbibliothek
Elektronischer Fingerabdruck
Zusammenhängender Graph
Bildgebendes Verfahren
Analysis
Trennungsaxiom
Videospiel
Plug in
Quarkmodell
Mailing-Liste
Routing
Elektronische Publikation
Modul
Quick-Sort
Chipkarte
Mereologie
Dreiecksfreier Graph
Speicherabzug
Computerarchitektur

Metadaten

Formale Metadaten

Titel No more 'grunt watch': Modern build workflows with Broccoli
Serientitel EmberConf 2014
Autor Liss, Jo
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/34997
Herausgeber Confreaks, LLC
Erscheinungsjahr 2014
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Broccoli is the newest JavaScript-based build tool everyone's talking about. It helps you concatenate your scripts, compile your Sass files, and package up your ES6 modules—all while offering a concise declarative syntax, and blazing fast rebuilds. Building on that foundation, ember-cli is a project to bring an opinionated, Broccoli-based build stack to Ember developers, tuned with their specific needs in mind. Learn how to use Broccoli and ember-cli to define modern build workflows for your Ember applications, harnessing preprocessors such as Sass and CoffeeScript without losing sub-second rebuild times.

Ähnliche Filme

Loading...
Feedback