benoit marchant: all right. good afternoon. had a good lunch? audience: yeah. benoit marchant: good. so my name is benoit marchant. i'm the ceo of montage studio. and we're going to talkabout what we do today,
in term of webdevelopment, and what we should be lookingat doing in the future. but before we talk aboutthe future and the present, how about we goback memory lane? so i had this exactsame slide, i think, last year-- slightly different. so do you guysknow what that is? any guess? no?
it's too old. audience: it's anext application. benoit marchant: that's right. but it's not anynext application. it's worldwideweb.app, whichwas the first application that tim berners-lee wroteat cern on a next cube, where he was able to crystallizethe idea of what the web was going to be. and tim sayssomething, that i could
do in a couple of monthswhat it would take me over a year on others. and if i count correctly,that's about six times faster. so what's important hereis that it turned out that tim had access to thatspecific machine, which was the first complete wayto provide the complete [inaudible] approach tonot only development, but also authoringwith interface builder. and that made himcapable of expressing
his ideas a lot faster. he would have been ableto do the same thing on windows or onunix, most likely. it was just that it tookhim six times longer. he may have given up. he may have gotdistracted, or sidetracked. so anyway. so that's what the powerof platform is-- is it lets you do something fasterthat you could probably
do otherwise, but do it faster. so if you look at what platformwe've been living with, the first really-- two big onethat we know in the pc era-- we have the mac one, whichtoday is inherited from next. in all these platformsi'm going to go through, you're going tosee two patterns. there's a layerof all frameworks. and then there's alayer on top which is more in terms of authoring,what we call [inaudible]
or this kind of thing. they are visual tools. they are software forus, for developers, so we can work faster. microsoft's anotherbig, big platform. same thing. you got .net and you'vegot visual studio. another one thatwas very successful is kind of like gone now--for all practical purposes--
is adobe flash. you had flash runtime,actionscript 3 and all that stuff. and then you had theflash professional, which used to becalled flash builder. and that layer,especially flash, is-- as far as i know-- theonly platform that was able, when it was actuallyin the work in action, to bring designers anddevelopers together.
you could haveinteractive designers working on the same medium thatthe application will begin. and that is unfortunately gone. and it's a big, big miss. and we need to get that back. so why does it matter? these platforms letyou create software. and on the web platform, we arefocusing on the front end here. [inaudible] i suppose.
i'm sure some of you do by hand. but if we focus on whatwe do inside the browser, these are meant to beused by people, right? not by services, by other[inaudible], by people. so we knew for along time, but it's been re-stated very clearlyby apple's iphone success, that the way you interactwith an app is critical. if your app is noteasy to use, intuitive, just by pure attentiondisorder, people
will just move onand try another one. so you've got to payattention to that. and to do that, youneed two things. like i said, you need designerand developer working very well with each other, to make surethat you get the best option. but you also needto be performant. if you're slow, if it's notresponsive, well-conceived but poorly executed, it'snot going to work, either. so let's focus on thedeveloper-designer
relationship. it turned out that i thinkthe web platform is the best to solve that problem. why? because we naturallyhave css, and that's for more presentationthat's used by designer. we have javascript, which isa programming language that is used to code thelogic of an application. and there's the magicalhtml in the middle
that actually bringthem together. html combine with cssis a presentation. html combined with javascriptis for the development. but the problem istoday, many solutions that exist are favoringone or favoring the other, versus looking at[inaudible] as a whole. like, you don't make softwarewith designers on one side and developers onthe other side. if you do that, it doesn't work.
it costs a lot of money,from not much good results. so that's the very interestingpart, getting them together. the other aspect is performance. so the web has notbeen growing to what it is today-- which isprobably the biggest software platform in the world-- by itsexcellence in user experience. unfortunately. it has grown byexcellence in linking. right?
you click on something. you load the pagesomewhere else. you're there. instantly. you don't need todownload anything. there's no friction. you just navigate around. you could do that forever,right, until you die, really. and that has brought theweb [inaudible] system
to what it is. now, there was anarticle recently on the blog post from someonefrom andreessen horowitz that was claiming-- andunfortunately, the numbers are true-- which is, themobile web is declining. like, more and more peoplespend more and more time on native apps,versus mobile web. whatever that mobileweb is, whether it takes the form of what youthink is an application,
or whether it's site optimized[inaudible], it doesn't matter. people are spendingmore time in apps. because it works betterfor them, i suppose. people don't care howyou make your app. that's not their problem. they just want to use it tosolve what the program does. so, how can we solve that? so, if you look atclient application and [inaudible]ios-- or same thing
will be for cocoa ordesktop for that matter-- you have the entirecode of the application that runs on the client. all the assets start from there. and then eventually, ifyour application has a cloud component, then the codehas all the logic then turned back to the server. and then talk to themand get data back. what i want to focuson is the same thing--
is rich client applicationswhere your applications still are being built withjava and xml files, or objective c andstylized object is built with html[inaudible] and css. other than that, so these assetswill be served as on demand or wrapped into an [inaudible],if you want to that. and i agree, that works fine. and then the wholelogic is coded with these static assets,and then same thing.
they turn back, and they goto the back end to get data. after that point, you'reback in the same kind of architecture of applications. the problem isthat we don't have as much tools to helpus do that on the web. so what can we do? well, there's beena platform that's been around for avery long time, right? 35 years in the making,to go from nextstep
to web objects, which wasthe first object-oriented application server in theworld, to mac os and now to ios. 35 years of engineering onthe same code base, refined. can you imagine that? 35 years?! there's not a single stack outthere that has lived so long. not even on microsoft side. they've done manyiterations of visual basic. they ditch the early windowsversion several times.
now .net has beenstable for a while. but it's not 35 years. it's like 10, right? but the length doesn't matter. what matters is thatthrough these 35 years, millions of desktop, web,and mobile applications were built by millionsof developers. so, which tells mesomething-- if these guys were able to shape that manyiterations of applications,
what they've been using--and i was one of them, so i know from the inside--was really helpful. otherwise, theywould have failed, and they would haveused something else. so, the question is whyshould we reinvent the wheel. we should just go and steal it. so, how about we take all ofthat, and take the concepts that are coming from there, andlook at if it can be useful. so webobjects hadan extremely well
designed components, whichwas very well-abstracted, very well-designed. proven many times. they have templatesin these components. cocoa has something likethe draw loop, which is something veryimportant to be able to paint only as needed,as frequently as you can. and that degrades gracefullywhen your cpu or gpu is not as quick as you would want.
but you still read repaintingthe last action from the user. that is a designthat is critical. and i guess what? it's been invented on nextstepwhen it was on motorola 6040. which right now isspeed demons, right? those they had thatprogram before, on desktop beforewe had even mobile. so, all of that,[inaudible] 5 is something what we decided to do.
we call that montagejs. but that was the spirit behind. it's like, steal the good ideas. make sure we translate, we applygood editorial appreciation to make that non-cocoa-like,but more web-like. but take the key pattern thatwe need to grow and do that. so that's one pieceof the puzzle. that's just a layer. now once you do that,you have to go and build
the rest of the platform,which is growing up the stack and offering whati would call a universal sdk. because html5 is universal. it just runs [inaudible]. we don't have todo anything for it. and build another set of layerthat helps you work not just by hand-cutting everything. there's nothing wrongwith hand-cutting. but there are actuallyfaster way to work.
i'm going to show you some. so try to grow theplatform from the bottom up to have something that is onpar at some point in the future with what the nativeenvironments has to offer. so now i'm going toswitch to showing you a demo of what that can be. so this is montagestudio. so montagestudio is layeron top of montagejs, trying to provide analternative environment that
lets you do thingsin a way that are more efficient in certain ways. it's not about removingthe coding, necessarily. it's just replacingsome of the coding we do that's not veryinteresting or productive, and just doing itslightly differently. so, montagestudiosits on top of github. so i'm alreadyauthenticated as myself. so what you see hereare some of the programs
i have in my github account. so, we're going totake a look at one demo that we show at jsconf. and it's a demo that uses therecipe of wordpress, which will be standard in the coreof wordpress later this year. and we just wanted to showwhat we could do with that. so here you see theanatomy of montagestudio. so, on the left side you haveall the assets of the project. so one thing youshould realize here,
if you're in that ecosystem,is the node modules. so montagejs uses commonjs. so we have here apackaged edition. that's what you would expect. except that webuilt a ui for it. so this is the onlyui in the world to manage [inaudible]packages, actually. we did it for the front-end. but you have here the basics--the name, the version.
here the dependencies. and here this isdirectly wired to npm. so if you're going to addsomething for facebook, for example, you couldsearch that and see what. so there's 20 packages. you could just do that andjust add the dependency, if you want to. i'm not going to do that,but you get the idea. so, every montage applicationstarts by the main component,
which by the way, the indexis as simple as you can get. you got all the css you want. this is old boilerplatefor the icons. so you can host thaton your home device, on your home screenif you wanted to. and the only object thatwe start with is a loader. you can customizeyour own loader. this is a real web page. so if you have a firstlevel of animation
you want to brand your page,this is just a web page. just go in and do that. so, by convention--and again, you can override that-- the maincomponent we load is this. so, you know what, since thescreen is actually small, i'm going to bring alittle helper here. it's not huge, butthat should do it. ok. so one thing weoffer is life review.
so this is the app itself,that we [inaudible]. so i'll show you how it works. we get all the assetsfrom the wordpress, and we just render itwith a nice [inaudible]. so i'm going to use that urland put it inside the ipad. so, aark.rn.project.montagestudio.net. so when i do that, i'mbeing asked a code. so for security, you don'twant anybody to snoop in, so i'm going topunch in the code.
it's a-a-k, a-a-k-c,and k-d-c-f, right? you can join, too, ifyou want, by the way. if you have a device, andyou want to follow that, be my guest. so that url. and once you get there--anyone want to try? audience: sure. benoit marchant: it's up to you. i just need to know, so iswitch to the other one or not.
so here's the app. here's the apprunning on a device. ok? so, let's go back to lookat what we have here. so every componentin montage lives in a folder, which hasdot real extension. so it's a convention. and if you openthat folder, you're going to see it'sall a mini-site.
so the templates ofcomponents in montage are full html5 documents,with doctype and all. which means, you cangive it to a web designer that have no idea about montage. and he's going to write a pagelike he would write otherwise, with his own link css,which is that css here. that's the css ofthe main component. it's a css page. and it's linked through a link,as here, as you would expect.
so that's all createdby default for you when you create a component. and the reason why itwas designed that way was to facilitate how webdesigners and web developers work with each other. there's no templatinglanguage in montagejs, because we don't like that. and it's inefficient. you have to learn it.
and then you got logicthat bleed into your code. it's not standard. you can't viewthat by [inaudible] having the templatinglogic running. it's there. no. we don't need that. so, in montage, theway the templating work is by associatinga component, which
is a montage objectto a dom element. once you've madethat association, that component is takingover that piece of the dom as his own. and if he has hisown template, he's going to bring that from hisown template, bringing it in and replace the tag you assignedto him with whatever he needs. if he needssomething, he can just write code into the[inaudible] then just
insert stuff therewith no template. you can do that too. so, the whole pointof montagestudio is so you don't have to godown if you don't want to. so i'm going to closethat and go back to here. so here you have a more highlevel view of what's going on. how many of you arefamiliar with cocoa? audience: [inaudible] benoit marchant: ok.
so the same concept existsin cocoa, in the nib. where the owner is aplaceholder for the object that's going toload the template. so it's going to bea component here. so the component isgoing to load that thing. and each component of that kindis going to load that thing. and each time a newinstance is going to be the owner, theplaceholder, right? so the placeholderis your component.
and here, underneaththat-- it's indented to show the relationship--you have all the objects that were created to implementthat main component. so you have thewordpress connector, which is a javascript object. it's more like a model layer,that's [inaudible] talking rest to json, to wordpress. that's what the guys do. the post-controller isa wrench controller.
so it's going to get anarray of json objects, and it's going to manage thatfor you, dealing with the ui. so he's going to take selection. you can change the rangeyou want to display, stuff like that. again, similar to whatyou find other places. the header is this, the top. we have a wordpresslogo, the title, and that's the bar on top.
then you got the post. so the post is what youget when you click on one. so that's the post. that's the postcomponent, right there. we're going to go in detail. and you got the flow. so the flow is a bitof a magical component. the flow is the one thatdoes the 3d carousel effect. and, the flow is-- well, onething we believe it a lot in
is composition. so the flow lets you,from the outside, tell what you want to flow,what kind of components. so here we'reflowing a card then. you can flow your ownthing, if you want to. so the card isjust that component here, which is basicallyshowing-- it's one of these. that that's a card. that's a card component.
and the card componenthas his own [inaudible], of course, where you have thetext, and you have the image. as you would expect,there's image and text. that's all there is. and if you look at howthey're done inside, if you want to go down tohtml, you got the css here. and the code is simple. you got the div. that data-montage-idis how we hook up
the serialization ofobject to the dom. and then the restis just the front of the card, theback of the card. i mean, it's well-organized. and one of the benefits ofstructuring an app like that is you can havemultiple people working on all these componentsat the same time. they should be designed so youcan reuse them in other places. so they are all self-contained.
they get data inthrough the owner. you pass data to that. and then the ownerbasically delegates, if he wants to, thesedata to sub-components to do the rendering. until you reach a point whereyou need a complex widget, and then you're goingto use a component to implement a complexwidget as well, like the flow, for example.
it's a component itself. so, let's go back to the main. and i would like to showyou a bit more of what you can do with the flow. so the flow is a componentthat has-- so by the way, here. let's finish the tour. here you have thetree of the body. and the blue shows you whichcomponents are assigned to it. on the right side, youhave the inspector.
so these are dynamicproperties that we have a system of metadata. so for example, ican go in the owner. i can add a priority andsay it's going to be foo. and foo would be-- so hereit just created an inspector entry for foo on the fly. and if i tell it thatfoo is a boolean, it's going to turnthat into a check box. so the more effort youmake to create semantic
around your objects,the more we can help you to do stufflike auto-complete when you do datamining and stuff. so for example,when you look at, for example, thebindings that gets the contents insidethe controller, that binding bindthe content property of the wrenchcontroller to the source of the data, which is thewordpress connector.post.
that's the array that you get. so if you provide metadata,we know-- has you [inaudible] the path-- we know we canhelp you navigate that more effectively. so on the right side here, youhave basically the contents of the packagesthat you've decided to use in your package manager. so here we have theapp, you restart the app, whichmeans you see here
all the ones that you see here. so you can reinstantiatethat component you created in otherplaces in your app. once you create it, justbecome available immediately to be reused. down there you see montage,which is the base firmware. and then there's digit,which is a widget set designed for touch. and then there'sanother package which
is to get the wordpressspecific information. you also have assets here. there's none here. so, let's go back to the flow. so the flow is acomplex object where you can have elastic scrolling. elastic scrolling--let me show you. if i remove that, and youjust scroll, it's linear. if you add elasticscrolling, however, you're
going to see thecards spread together. and then they getcloser together, based on the speedof which you scroll. but, let's go to theinspector of the flow. so the flow is ajuried component where you can authorthe path of the objects. it's like a list. except that, the list isreally a 3d basic curve. so instead of being linear,vertical, or horizontal,
you can do pretty muchas anything you want. so, to show youwhat that mean, i'm going to try to dosomething acrobatic, which is, i can change the curve here. and you can see in real timeon your device what this means. i can change thathere, the other sides, make them morestacked, turn around. and you can go on eachnote, for example, and you can assign properties.
so let's say on thisone, on the end, we want them to rotateas they go, for example. so you could do a rotate yas they move toward the end. so now when you scroll,they rotate to the left. you can accentuate that. whoops. sorry. and what's great is youcan do that on an ipad. you can do that onanother device, portrait.
you can do that onanother one android. and you can share that withyour team or your customer, wherever they are. because this is allthrough the cloud. and that's not somethingthat's specific to the flow. like, any components youad to your project or you remove or youtweak, you're going to benefit from the same thing. so, especially whenyou start being
able to reuse componentthat way, some of them will be reused in severalplaces in your app. they may have different sizes. they may be receivingdifferent kind of data. so you can put three versionsof your app in different states, where you exemplify thesedifferent places where the component is used andget data from your cloud. and then you canstart making changes. you're going to see immediately,as you make changes,
how impacts the three placeswhere that component is used. so instead of doing iterativeqa one after the other, you can see rightaway as you do it. you have the rightinformation to make editorial decisionslike, oh no, ok. i just did that. but it screwed upthe android one. i need to do something else. you know immediately.
so that's an example of whatyou can do with the flow. any question? it doesn't feel too magic. audience: it's [inaudible] benoit marchant:there's no magic. let's talk how it happens. the reason why--so, network-wise, it's all websockets. there's no other way todo that on the website.
but the reason whywe're able to do that is because of the designchoices that we've made, the way these reelsare structured. we have a serializationof objects. we know the entire tree ofyour app because you told us. it's right in their face. it's not imperativecode that we can't read. there's no divinationgoing on, right? if that was written by purecode, hand-coding everything,
you couldn't doanything with it. because you don'thave the information. now we have a tree. we have a tree of component. and in each component,we have a tree. we know which objects are beinginstantiated, of what type they are, what parity they have. so when you changethe parities here, we know where to put them,and each of the client
are connected to it, andapply the very same changes to the distance sibling inthe same place in the app. same for adding, right? when you're adding anobject to the reel, we know which reelyou're adding it to. we are going add an object ofthe same time in your client's on the fly. same when you remove. so it's really reapingthe benefits of--
and we did that for a reasonso we could do stuff like that. but there's no magic. once you understand howit works, it's like, duh. yeah, sure. but it's still very practical. so, yes? audience: how does itwork with dynamic content? this looks like a static content[inaudible] data [inaudible] getting added basedon some [inaudible]
benoit marchant: yeah. so that's basedon the [inaudible] content of the wordpressinstance we're talking to. so in that case, the [inaudible]because it's a demo one. so, if you had a largecollection of data, then it's all a matterof managing the cursor as you move the array. and it can segue to highlightthe fact that the flow component has fresh [inaudible].
so you could have 5,000 images. we would only display-- 1, 2, 3,4, 5, 6-- let's say 10 of them. and not the rest. the flow knows--mathematically speaking, we analyzed the busy curve. we know what's clippedand what isn't. and we only renderwhat's visible. so it's like an infinite list. it's what you wantwith an infinite list.
you only render what you seeand plus some buffer run, eventually. and as you scroll,what we do internally is, the objects in thearray are rebounded to the ones that are visible. so the dom never changes. we don't destroy andrecreate the dom. that would not work at all. you couldn't get that kind offirmware if we're doing that.
we are reusing the exactsame dom structure. we're just [inaudible] newdata from the different objects you're scrollingthrough to them. so, we haven'tfinished the part where you can lazily-- from a datagetting standpoint-- get data. stop. use. get data. that is on your own to do.
but once you reach the uilayer, it's taken care. that make sense? so, one thing that we'vealso been looking at-- and i'm going toclose that project. get back to the other one. we're going to do some 3d. we've been looking at3d as, very excited to see that with webgl. and we've been investigating onthat for the past three years
now. and we want to bring 3d to themainstream, and not in a way that only webgldeveloper can do it. we want to help package 3d in away that-- i don't know webgl. i can't code webgl. i never learned. but if you're tellingme that there's an object that'swell-packaged, i pretty well be able to dosomething with that
if you tell me which api he has. i don't need to know the inside. that's the whole point. we're trying builda system where you can reusesomeone else's work. but you don't haveto know the inside, because that's their problem. that's not yours. you should just be enjoyingit and just using it.
so, we are also very happyto see two of our demos which are on thewebsite, the apartment demo and the[inaudible] featured by apple at the last wwdcat their webgl station where they announcedthey were supporting it. so, let me show youwhat we're going to do. so, here it's a blank app. there's main.reel. if you createsomething from scratch,
that's what you would see. so, what we're going todo is launch the preview. i'm going to kill that guy. and the preview is emptybecause the app is empty. so, we have a model here that'sa model of a space fighter. so in order to makea model to display, we have a 3d packagehere at the bottom. so i'm going to takea sceneview first. so the sceneview you bring isdiv and the canvas to draw.
and i'm going to add a scene. so the scene has a pathwhere you can set a model. so if we go to the assetlibrary, i have a model here. which is a collada model. so a dae file, which we'reconverting on the fly to gltf so a gltf is goingto be a standard this year, a [inaudible]standard by kronos, that we've initiated two yearsago when i was at motorola-- three years ago now.
so what gltf does-- collada,if you're not familiar, it's a standard fileformat that takes the output of 3d authoringtool like maya, 3ds max, and make into a consistent xml. so we can reloadinto another editor. some of these are betterthings than others. so it's how youcan exchange stuff. so it's all xml, because itwas done, like, 15 years ago. so [inaudible] isthat a suggestion
to be more efficient toprocess on the client side, but also as featureso you can compress, to get to your mobiledevices faster. and also realign thedata so that it's friendly with webgl, whichthe collada standard is not. so that's the gltf. so it's basically 3d model,as json, to simplify. so now, i need to add--so the scene view. take the scene.
so i'm going to grab thescene icon and assign it here. and we're going togive it some size. so let's say, screen's small,so let's say 8 hundreds by, let's say, 8 hundreds. so now here, we should besomething [inaudible] here. maybe-- here we go. here we have-- that's the3d model i just dumped. so it comes. it's on material orit's on lighting.
so how about we--i bet that would look better if hewas in the dark. it's a space fighter. so we can go to themain.reel and change the css. and we are just going todo background color black. sorry, i don't have the stars. but it's kind of dark. anyway. so, how about we do astealth space fighter.
so if we explore themodel a little bit more. the scene has, like theflow, a special editor. which brings us here,where it's a [inaudible] where you see thebounding box, right? and if you look inside, you cansee the nodes, the 3d nodes, the material, thelight, the camera. which there's nothing here. but there are two materials. so what i can do hereis take that material
and make it an object. and once i've done that, nowi have a material object here. so that material has twoproperties-- image and opacity. so what i would liketo do is control the opacity of the material. so i'm going to goback to my library. i'm going to takea slider, and i'm going to add theslider at the bottom. so if everythingworks as expected,
and of course it doesn't. where did that slider go? i did not want that to be-- ok. i need that again. recreate. all right. so, slider. so now it's kind of clipped,so let me add some padding. audience: is there a previewhere to this one as well?
benoit marchant: sorry? audience: a previewcode to this? benoit marchant: yes. absolutely. you should-- did youtry to connect to it? audience: yes. it's asking me forthe preview code. benoit marchant: umm. ah crap.
i think i just-- closed. where is that preview code? where'd he go? i want [inaudible] yeah. i ditched it. i'm not sure how to get it back. we can try later. audience: that's all right.
benoit marchant: so, i'mgoing to add some padding [inaudible] top. here we go. ok, so now we have a sliderthat doesn't do anything. so what we want to do is getthe value out of the slider and bind it to the opacityproperty of the material. so we're going to createa binding on the material. so as we type, weknow the metadata. so opacity is going to bebound to the slider.value.
nope. [inaudible] .value. so one way, because wedon't care otherwise. or actually, theslider max is 100, which is not good forthe opacity in css. so what we're going todo is-- we redid that. and we're goingto divide by 100. which, let me showyou something. montage bindings have a fulllogical language in them.
so you can write expressions. you can test. you can do mapreduce. you can do logicaloperations in there. i won't recommend that youcall the interapp like that. you probably could alot, but it's really meant to help keep y-ratedcode inside [inaudible] versus in your javascriptcomponents code, which is here. so the main.js like, anythingyou want your owner to handle,
like tracking evidenceof the objects inside, applying logic, gettingdata or things to someone else, that would beinside the main.js. but for ui logic [inaudible],that should be enough. so now, if the bindingwork, here we go. we have that guydisappearing, except that guy. huh. so much for stealth, if yourcockpit's still visible. so it turns out that there aretwo materials in the model.
so if we go back tothe model to scene, there's a second-- there we go. there's second material here. so we're going to take thatone, this section here, promoted as an object to use. then we have that guy. and we can take that bindingand duplicate it as well. it's the same object. so might as well save code.
so now, if you gohere, normally if we make that guy in thefront, then the cockpit will disappear as well. there you go out. and again, we could go and lookat the webgl as being generated or inside that space fighter. i invite you to dothat but-- yeah, you don't need to knowthat to make that useful. so that was the whole point.
this is officially notrated to that model. i mean, we've done the apartmentdemo i invite you to look at. we're working on themedical application with a heart, as asales tool, for example. we've done the car. i mean, there'smany applications where 3d is coming tothe mainstream that are not 3d high-endfirst shooter games, and are very, very useful.
i mean, there's a lotof potential in retail, for example, like configuringshoes, configuring shirts. of course, there's allthe 3d printing movement that's also coming. anyway, so this isour opinion of what a platform withauthoring could be and is for the wave in a waythat brings concepts from existing environmentthat have proven to be very successful, asmuch as seeking to standards
and trying to make themost of what people learn, and make the most ofwhat they already know, without having to askthem learn too much. another example of thatis the event system. in montagejs, the eventsystem is completely modeled on the dom one. so we've implemented dispatchevents, add remote listener and remove event listener, whichare the three basic-- and hand deliverance-- onmontage objects.
so if you're montageobjects, and you want to dispatch anevent, like for example the slider i thinksends an action event, like a button does. you can track that eventby doing my button dot add a new listener action, theyuse capture and bubble. and we imprint and captureand bubble the same way. the componentsrepresent a tree, which is kind of a subsetof the dom tree.
and you may wantyour component-- you decide, right, whenyou create your event whether that event'sgoing to bubble or not. and if you wantthat to go, then you want that to go up thechain of your components the exact same way. same api. so we tried to really surgicallyadd stuff where it made sense. you won't find anyapi in montage,
and that's by design, that[inaudible] you to know css. we will help developer withmore advanced ui tool for that. but it's not through the api. it's through a[inaudible] interaction. if you don't knowcss, you're not going to be happy withmontage, for sure. so go find a buddy thatdoes know css, or go do something else. or, more important, go learnit, because it's worth it.
so, let's go back to the slides. and you are that. audience: so i have a question. benoit marchant: yep. audience: so i saw itin the wordpress demo. audience: and it tookan exceedingly long time with the spinning [inaudible]. i mean, is there anyway you can tweak progressive loading,lazy loading?
benoit marchant: um. yes. so, montage iscompletely modular. so there's a busybootstrapping core like you would getin any [inaudible]. after that, you're only goingto get what you basically put in your reels. so you only load whatyou actually use, right? so, there's twoaspect to answer that.
first, it shouldn'ttake that long. because mine didn't. i don't know why yours did. the consequence ofbeing extremely modular is you have a hugeamount of file. every component come withhtml5, css, javascript. so that's a lot of moving parts. so when you deploy,we have a process. and it's right away insidethe tool, it's called mop,
which stands formontage optimizer. that's doing a [inaudible]. again, we know the tree. so we can [inaudible] the tree. and we can recombineall the html and javascripts is as little asone file, for your entire app. or you can [inaudible]through six files if you wanted to makeuse of parallel request. so, the next step whichwe haven't done yet,
because it's morecomplicated, would be a css. and as much as itsounds logical, that if you were embedded64-bit encoded images inside css to reduce the number ofrequests to work better, sometimes it doesn't. benoit marchant: exactly. it's unfortunate, but. so we can go andhelp more in that to minimize the numberof resources call.
we could also embed cssitself inside the html. but we have toreanalyze all the url because they're relatedto the css file. and if you put into a[inaudible] embedded, then things change. so it's not impossible,but we haven't done that. so, that's the first stepthat you should never deploy your montage[inaudible] without moping it. that would be [inaudible]for the team, which
is the case of whatyou're looking at. the second aspect, whichis more manual now, but-- we have a fewcomponents, like one of them is a substitution. a substitution is like a tabview, logically speaking, but without the ui. it's a componentyou can tell, ok-- it's when a[inaudible] is matched, you're going to putthat component in.
when another oneis matched, you're going to put that one in. these components helps you delaythe decision of what to use. and you can alwaysprogrammatically create the componentswhen only you know. because we have no idea. and then you just insertit when that happens. and at that point, everythingis loaded asynchronously anyway. so you have callback methods to know,
and the draw systemis aware that you may have assetsthat are not there. so basically, thecomponents say, oh, i'm not ready to draw . so nothing happens. if you ask him to draw, he willjust wait to get his asset. and then when they're here,then things will kick in. so, i'm sure thereare bugs in there. but it was designedto let you do that.
audience: do you implementsome kind of promises system? we have in our teamwe also have q. so, we've been usingpromises since 2011. and i can attest thatwe went from zero to promises everywhere,just organically seeing the teamembrace that pattern. and it just came naturally. when i hired kris kowalwho is the author of q, he told me abouthis [inaudible].
it was like, wait, what? i was like, ahh, brain hurts. and then over time,we got used to it. and it turned out to bevery, very effective. and now it's becomingthe standard. so we've seen manythings like that. like we had bindings very early. they're kind of becoming,not really binding, but observing[inaudible] standard.
we had to embrace q veryearly, becoming the standards. we had componentsbefore anyone else. not that the wholecommunity understand that we should begoing that direction. i'm not happy aboutthe current spec. but that doesn't matterto [inaudible] i suppose. so, yeah, we use [inaudible]. it's everywhere. so i encourage you to try.
we put it out. so let me talk aboutthe business model, not that you may care. so we are a company. so we need to make money,like any other company. there's nothing wrong with that. i intend to make a lot of money. but we really wantto help people go beyond what they do today.
so the whole platform-- becausewe know we are on github, we know exactlythrough github api whether your product ispublic or is private. so if it is public, you can usemontagestudio forever for free. there's no cost whatsoever. and of course, we hope that onceyou guys embrace it, realize what you can do, you're goingto want to use it for real work. and if that's thecase, then you're going to need asubscription to access
a private repo after a couple. we will just let you do that. but after a couple, thenyou'll need a subscription to go and use that. so, don't hesitate. just go use. no afterthought. i'm the ceo, so i cantell you straight, that i'm not going to reversethat decision, i think,
unless someone make my changemy mind for whatever reason. but it just makes sense, right? we're trying to build aplatform based on open source. and that's just acontinuation of it, is we want people touse authoring visually without second-guessingand hesitating. because it just worksmore efficiently for what it does well. it won't changethe fact that you
may want to go backto your text editor and do a bunch of stufftextually off github. and then go back in thetool when it makes sense. and hopefully over time,we'll have more and more value to the tool. so you will find yourselfspending more and more time there. but we have nointention of doing anything that will lock you in.
we're based on the standards. and if there are better toolsfor certain aspects of the job, or other people that don'twant to use montagestudio, they don't want to be in,then they should be in. and that's where we are. so, the future ofweb development-- what i care aboutthat platform is that we deliver superiorcross-screen user experience. and to me, that'sthe webkiller app.
we have to deliver the samekind of user experience that people expect. because if wedon't do that, it's going to get marginalizedand ostracized. and its market shareis going to shrink. and its impact on theecosystem is going to shrink. and i don't want that. so that's why we're doing it. i think that's what we allneed to think about that.
otherwise, web appsare going to be restrained toadmin kind of stuff that we hide inside firewalls. i know. i think we can do better. the second one isthat for that you need to rely on astrong platform. the standards themselvesare not enough. there are stuff thatthey need to do,
like hardware acceleration. there's no way injavascript you could ever imagine hardwareacceleration works that has been done in the browser. it's just impossible. it's not going to happen. but the way that the [inaudible]sets, the way people contribute to it-- and if you look at thevested interest of the people who are contributingto it-- like,
try to make anequivalent of dot net at the level of standard tryingto get people from microsoft, google, and apple together? and good luck with that. i don't think-- well, i maysee that in my lifetime. i hope to be wrong. but the thing is, a lot ofbuilding blocks are here. so we or someone else canbuild an opinionated stack on top of what wehave to go faster.
and whatever commonstandard we'll bring back. like, when the promisesare in [inaudible], and if [inaudible] iseverywhere, well guess what? it will remove[inaudible] from montage. and we'll swallowthat cost for you. same for the web components. if web components wereeverywhere, which they're not, there's no reason why youcouldn't use the web components inside the montage components.
that would work. we'll make it work. another very important thingis bringing web designers and developers together. and that's takinga higher view of, ok-- tools for webdesigners are great. tools for webdevelopers are great. but if they are incompatiblein terms of output with each other,there's no point, right?
if your web designeror interactive designer are using balsamiq they spendsix months doing a mock-up, in the end you havea balsamiq movie. then you have to go fromscratch and implement that in whateverstack you choose. actually, it would beios, android, or whatever. it's just stupid. on the web, we can do better. our goal withmontagejs at some point
is to have a balsamiq implementinside montagestudio so that the interactivedesigner interact directly mock-up the ui withreal components. they may take shortcutsand do hideous thing that the developer willhave his hair off-- not me. but then that's fine. he can undo thatand make it better. he doesn't have tostart from scratch. and by the way, theright way these guys work
together is interactively. at each iteration, youpay the price of there are tools not workingwith the output you want, which is going to be the finalthing the product is going to be in. we need to fix that. and that means going from justcoding everything by hand, to interactive authoring. like, on the native side, peoplewere hand coding in terminals
until the mac came up. and after that as well. but they've stoppeddoing that all the time. because it turns out,it's more efficient. as always, not amatter of opinion. the facts, the decades offacts are there to prove it. the same is goingto happen to us. it's just like thewriting on the wall. we just have to lookback and look around,
and that's what's there. the same is going to hit us. the web stack hasgrown from learning from what was donebefore, as it should. because there's some good. doesn't have to be takenstraight way again. but it has to be looked at. and real time preview. so that's what i showed you.
and that starts bynot using builds. like, when i see peopleusing a tool chain that asks them to do a build beforethey can test what they are doing, i'm like--what are you doing? it's just good nativeend-user compiler-- that's what you need. that's wrong, right? our commonjs implementationdoesn't require a build. because why?
like, you have somethingthat you just reload, which is supposed to work. that's how theplatform is built. why would you hurt yourselfby injecting a roadblock in your own time? it doesn't make any senseif you can avoid it. and so far-- especially i cantell you with a cloud setup that we've said--even running mop, for example, which is a tool.
you have to runthe comment line. now, you don't have toremember the configuration. just click a button. like, "mop, preparefor publish." boom. we do that for you on theback end and just run it. any time you put abuild in your face, you're just slowingyourself down. so, that's the same thingas real time preview.
why i have to wait,reload your page to see what you'vedone iteratively on several devices,when you could avoid it? it's all part of thesame train of thought. and well, i thinkwe already started showing some of thefuture we think we can do. so in the end, iwould like to finish by saying that html5is not a buzzword. that it's an amazing technology,even though it's not finished,
by any means. it won't ever be. there will be html6and 7 and whatever. and the stack will continueto grow at this pace. and no matter how fast googlewish the world would go, it's going to goat the pace it's supposed to go, which[inaudible] by agreements. that's how we got so far. yes, people are frustratedbecause it's not super quick.
but that's how it work. so i encourage you to go andtry work with the future. thank you. [applause]
