JSConf 2014

Desarrollando SPA (single-page applications) complejas con MontageJS

Ryan Paul  · 




Extracto de la transcripción automática del vídeo realizada por YouTube.

okay so today we're going to be talking about composing front-end web applications with montage jas so i'm ryan paul i work for montage studio in developer relations and i'm a front-end app developer so back in the day like 1801 there's an

inventor named Eli Whitney he's best known for creating the cotton gin but he was also a gun manufacturer and he's one of the pioneers of interchangeable parts he had a contract to produce rifles for Congress and they were investing heavily in you

know advanced production mechanisms that would allow them to get more output so at one point they hadn't give a presentation for for the military in Congress to show what had been working on and what he did is he took a bunch of rifles that he had manufactured

he disassembled them on the spot and he put all the like parts together so you have you know all of this component in one basket all of that component in another basket and then he proceeded to assemble rifles from the disassembled parts essentially mixing

the components from previous rifles to build new ones and it was unprecedented I mean people had had this idea that you could do that but nobody had actually done it at manufacturing scale before and it was considered one of the milestones that that brought

the Industrial Revolution to the United States when you have interchangeable parts you can simplify manufacturing increase repairability and generally reduce all of your costs so in the 60s there was another pioneer a software pioneer Doug McElroy and he gave

a presentation for the NATO Science Committee and he had a new take on this old idea of you know industrial manufacturing he wanted mass-produced software components that would allow developers to take an assembly line approach to software development effectively

building applications by piecing together existing parts so here we have mr. Pugsley at the assembly line illustrate that point but you know this is a really compelling idea Doug McElroy he went on to invent UNIX piping which is I think one of the most you

know elegant expressions of this idea of assembly line programming you know but we've learned a lot since Doug McElroy you know we have all of these new ideas from object-oriented programming about you know encapsulation and you know how to maximize code

reuse ok so you know what we what we want to be able to do is truly assemble our entire front end web applications from individual units of prefabricated functionality we want to be able to simplify development and we use more of our code so today I'm

going to be talking a little bit about how you can do that so montage is is a front-end web development framework it's designed for building single page applications and it works in modern browsers it's an open source framework we distribute under

the BSD license so one of the the central tenants of montage is is that everything is a component our component architecture is somewhat unique and it allows for this kind of composability that you you really you know that we've really aspired to previously

so in a montage project you have all of your components and they're stored in a folder which you know by convention we give that dot real extension and component you know there's no magic it's made up of standards-based HTML Javascript CSS it is

just web content but it does have one thing that's unique and that's a JSON component declaration that JSON declaration is where we describe the contents of the component and the way that those that the the pieces inside connect to each other we define

our bindings and that sort of thing so and talk a little bit about the you know that now we have you know the HTML content is just HTML you know you have an HTML file then it is you can open in a browser you can view it as HTML you can actually take the individual

content from a single component and view it and edit it there's really important because it facilitates better cooperation between developers and designers your designer doesn't have to understand anything about the framework in order to be able to

work with the underlying HTML content so the JSON the component declaration it's it's basically like a declarative description of what's inside of the component and to get more technical with you it's like it's like a JSON format object

serialization so if your component is an object and it has a bunch of other objects inside of what we've done what you've done is essentially serialized it into JSON and that's what the component declaration is it's like a representation of

the internals I'll show you the code in a second you'll see an example of a component declaration will make it a little more clear when we load that component declaration in the application what we do is instantiate all of the objects inside of it

then we attach the ones that are that are connected the Dom to the page and then we populate component properties and establish a bindings okay so here's here's what component declaration looks like that JSON that you see at the top and then at the

bottom what you see is the HTML that corresponds with it this is from a simple application that does temperature conversion you have a Celsius number field in a Fahrenheit number field and when you put a value in one you'll get the equivalent value in

the other field and there's no JavaScript code at all behind this it's done entirely with data bindings the component declaration so the component declaration we have several elements here you can see that prototype field that I've highlighted

that basically is a reference to the module that we're using to instantiate the object so each of those top-level blocks they're like the Celsius number fill block the Fahrenheit number field block those are objects and the prototype is the component

that we're going to instantiate when we're creating those objects and in this case you know you can see the dot real extension you can see that it is a component but it could also be an object you know we're using common J's module loading

[ ... ]

Nota: se han omitido las otras 2.978 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.