Okay, hello everybody Welcome to the mock-up talk My name is Franco Pellegrini. I'm a software developer coming from Cordoba, Argentina. I've been doing long since 2005 Being part of a long course since 2010 and framework team member since 2012 and

And Well, we're here to talk about mock-up Hey, my name is Johannes Rackham, I come from Graz in Austria

I'm doing blown since 2004 around that time and Got deeper involved at my internship with the blue dynamics alliance, which I'm member of the meantime and They are blown framework team members since 2012 or so and

We're wearing the new brand new mock-up t-shirts with the brand new mock-up logo. I have some stickers to for you to correct and Just just ask me afterwards Yeah Let's start with the talk

Mock-up is a framework for what is for adding JavaScript functionality to To individual DOM elements of a site and it enforces best standards for reproducible and stable behavior We have some mess with JavaScript at the moment

Which mock-up is going to solve and you will see that the next slide When we come to the history of mock-up and why what the motivation is Mock-up is also a new front-end library, which collects a lot of different widgets, which we want to use in the upcoming blown version

Mock-up is included in blown up widgets and will be part of blown 5 For example we have Mock-up looks like working with mock-up looks like this we have Can I make it a bit bigger?

For example, we have a DOM elements like this span we add a specific class with a specific name to it a CSS class with a specific name to it in that case. It's using the moments that JS library and By adding this

This bankless is replaced with the following outputs This is a date is then replaced with something readable. This is what's moment.js is doing and Mock-up is integrating moment.js so that it can be easily Used and easily reused just by adding those

Classes to the DOM tree like pet minus moment Another the history of mock-up Yeah, so basically this is the the motivation of the whole mock-up project The way we were doing most of you already know this the way we were doing

JavaScript was like ten years ago when you install a long for three site you get 41 files JavaScript files register in there in the resource registry Seven of them are already disabled like not used. I don't know why are there

When a Sorry when a new release of JavaScript library Happens and that library was included in a on a third-party Product that integrates it into clone you need to now go to that product and get a new release

To include the new version of JavaScript of the of the whatever JavaScript library you were using Big issue is that you cannot do JavaScript development on clone unless you're a blown developer, which is a huge Problem for companies to hire people doing the front-end

This is the history for instance of the current resource registry the Define that that compiles the and When you go into production mode when you packs it several JavaScripts into just one for production mode

As you can see, I don't know if you can see it, but the latest commits are from 2009 Yeah, that's the latest So it's a pretty bad situation When you when you have like the you chose the wrong

Options in the resource registry or you have something in not the right order you get this really useful error messages That it's really clear what is going on Not We have no tests at all Which makes it

This feeling to happen so come the solution What are the history of mock-up it's based on patent slip which is was created by Cornelis Kohlbach and

other people like we had a command and France history of and so on and It's a conceptual parent of mock-up It addresses the same problems and Does it in the same way? But the implementation is different

mock-up Was forked from patent slip by rock garbus more or less forked it's using some parts of the patent slip and It was split up in mock-up and smoke up core Just last year

And Mock-up core the intention of mock-up core is to have something Reusable other mock-up packages can depend on and then we have blown up widgets Which is was created by Nathan from gain in November 2011

It was the same year like better sleep was created and back then it was not using A mock-up Noah the patent slip it's just included JavaScript files in a package called blown widgets and it was moved to a patent based structure in January 2013 and

Some commits after the mock-up project was started and it's using mock-up since then so it's quite new and also with a a Changing history

So the tools that we were using for developing mock-up are Stuff that the job that is coming from the JavaScript world the first tool it's a We can we can see the simulator similarity with a past baster

basically, it allows you to create a Project structure with all the files and folders that you need to to use then it's grant Which is the thing that it will be similar to build out you define tasks and then when you run it

It will run those tasks and compile test to several stuff then we have NPM and Bauer which are two package managers We are you using each of them for different situations

Then we have well, we're using required JS for all the dependencies and Management you can go and see this is the the site for It has a description of what mocha base and examples of the different patterns currently

And for testing we are using these libraries karma is a test runner mocha is a framework and then you You can use either of these on some stuff where it's in China on some other stuff We're using actually mock-up is using expect.js and we are using chai and there something we're gonna see

later in the talk This is another example This is the example as we have seen it before and now I'll show you the implementation of a pattern

Can this be is this easily readable? Can we make it a big? However in the first line we have a define statement which comes from require JS and in here a list of

Dependencies Declared like jQuery mock-up patterns based which is base pattern which we will extend and The moment JavaScript every those three dependencies are injected in the following function

You can see the first argument is the dollar sign Which we are often using for jQuery access The second one is the base pattern and then the moment jazz library which we can access like that In this function, we are defining A variable which we will return require chess

Requires us to return an object which will then which can then be used for other dependencies for other function Which depend on for example our? moment pattern in here In here we are Defining a name for the pattern

It's called moment and it will Be accessible in the Tom, for example, if you want to use this pattern in the Tom tree you write pet minus moment Then we are Finding some default values the formats of the of the

how the date the ESO string should be formatted and Then we have an init function, which is the most important one in this pattern. The init function is Executed when the pattern is called and This pattern does nothing at the moment. The more complete implementation is hidden here

That's okay Yeah, the init function for example is It function you can see the init function

It's also quite small, it calls other function which are defined in this function wrapper like the convert function above in I'm going back to the very basic implementation

Which does nothing because the complete implementation is not so interesting. You can look it up yourself in the mock-up repository of GitHub the init function A Base pattern has access to an dollar L element, which is a jQuery wrapped element and

If we define some options for This pattern by passing data attributes To it via the Tom tree We can access them via self dot options and we can as I said before we have some default options Which are used if no other options are defined and this is how a pattern is tested

We again have the define function with the dependencies which we need for testing the pattern like the expect

Assertion library the jQuery library and the mock-up registry, etc. Everything we need for Minimal example which can also be used as a starting point for creating new tests for patterns In here we have describe

Function which is more or less a test Collection of unit tests and in here the it Methods which are called are the individual unit tests and It's it runs by

Calling by using the phantom chess library which renders the Tom tree to output and we are comparing expected output to to what Phantom chess is delivering us or Chrome which Chrome is delivering us. We are using real browsers to to test a pattern

Okay, that's all for the example Now do the generator for a blown mock-up So there are two ways to develop patterns. One way is to pull the the blown mock-up

Code from the github and then do some modifications there. Maybe remove some stuff compile and use that JavaScript On your project or Alternative alternatively we have created a generator which basically uses this yo tool

I was talking about before All you need to do is NPM install Hyphen G. It needs to be global so generator hyphen blown mock-up And then you call it with yo with a yo tool pretty similar to to buster

oops After Answering a couple of questions This is the file structure. It generates well by word for those who already work with JavaScript They already know what Bauer JSON is and package JSON is

Basically is where dependencies for Bauer and for NPM are defined then we have config.js, which is the file that links the path of Each library, where is it in the file system? This is a convenience

folder which has development so to speak HTML that will import all the Patterns and less files and do a dynamic compilation in the browser So you don't have to be compiling and test for each change you make to test them

The grant file is where you write your your tasks For grant to execute them. It's all is already there the basics The bundle is basically Where you define dependencies for your it's like a way of grouping all your libraries and patterns

That you're going to need You can of course define several bundles for different situations Here is where your patterns are going to be The generator generates only one but you can add as many as you want and then your less files Are going to be inside the less directory

Finally the test directory is where you're going to write the tests for your pattern Once you have finished Developing your package You just call grant and then a new build directory will be created and

Everything you need is going to be in there like all the minified JavaScript CSS. There may be some images Are going to be in there And actually this is wrong. You should be ground. It's make it includes a make file Which I'm not listing apparently

Yeah, I forgot the part it includes a make file so you just run make and it's going to be in there We have given a training on Using the generator that is on read the docs. You can go there. You can go there and there's specific instructions step by step

from scratch to Having a mock-up compiled and usable in in a production site mock-up hyphen training dot read the dogs dot org It's missing a couple of

Stuff but it's pretty Explains really well all the steps that you need to do in order to develop a new pattern so there are some alternatives to mock-up and And

mock-up Is an introduction able to state that mock-up is a really nice library, which is quite Usable quite well quite good and it improves the situation. We already have a lot But there are some other Agencies like I already

introduced patent sleep, it's similar in concept and The registry of mock-up is nearly the same like the one from pattern slip and on both projects a lot of development is happening maybe at the moment on mock-up more than pattern slip but better slip is also still

used in projects and Combined effort would be great but We have to discuss how we could achieve that if it makes sense at all So then we have web components web components are

w3c draft and We I guess we will see it in the near future Say one two three years. I don't know Usable for browsers Currently, there are two different Experimental projects which are quite big They are Google Polymeria and Mozilla X-Tags these web component

experimental web component implementations and The browser compatibility is limited X-Tags has a much better compatibility than Polymer On the other hand Polymeria is the much more active project because it's backed by Google and

For example X-Tags has a minimum Internet Explorer compatibility version requirement of version 9 and Polymeria is partly usable from Internet Explorer 10 up But only partly it didn't explore Also Safari is not really usable with Polymer X-Tags has support for Safari too

however, it's a Draft still at w3c draft which where you can expect that many changes are happening until it's final The HTML template specification is completed still in draft are the shadow Tom and the HTML input

specifications and From from our point of view we could we should even switch to web components once it is completed and We could use mock-up as a wrapper around web components in the future, but let's see what the future brings

Then We have angular JS directives which addresses also this similar problems like mock-up is trying to solve and Angular is compared to mock-up a full stack JavaScript framework of course, you don't have to use everything of angular JS, but it's

It's it has solutions to nearly any JavaScript related problem you can can face and Yeah, this it's I would say it's not so a clear decision to for example to switch to angular because

Because of its size and and and the implications we get by using angular And angular itself will switch to web components once it's ready At least there's one official statement stating this

Our opinion is as I said initially we have a great framework which is a big improvement and Gives us a nice workflow for developing JavaScript patterns the development of JavaScript patterns is fairly easily we have seen this minimal pattern and There's really not much magic about it

But actually the future is uncertain We have of course much fewer developers than angular JS for example has and once The web component specification is through and we have We have some technology one cannot relate to to use web components

It might not make much sense to have something similar developed by ourselves But However, it's a thin layer at the moment and

In my personal opinion it does not I hope it doesn't hurt too much to follow the mock-up way because Because it's at least a really big improvement to the situation we already have but tomorrow Frank

organized open space Which addresses these questions, and we hope that many people are coming here and discussing it 11 a.m. Mm-hmm Yeah to be honest I Wasn't really aware of angular JS and what could be done, but after seeing

Timo's talk yesterday I started to have serious doubts about if it's a really really good idea to be putting so much effort into this if Google is also doing something so I think Yes

Okay

I

Know I'm not saying to be blown but to use what angular does to solve these problems Because for instance what we have at the moment we have We used to have the guy that started this he went away, and it was like

Big well, what should we do now because one person left? Now there's Nathan Van game that unfortunately is not here That is like taking over the project and what if he lives and or has too much work to do or whatever

My Fear is that In five months from now mocap is still going to be where it is today And angular is going to be doing all these spectacular things We I don't know that's that's it. That's the point of the open space tomorrow, I think

And the good thing is we are this Position that people can use angular chess if they want to and they don't have to use mocha because it's separated anyways and

Yeah, and smoke up Is in my opinion already quite stable and good quite good usable Yeah

No home But the minified and built version with all the patterns It's quite small. Yeah Actually, I can say but some hundred lines of code

Yeah, that that's the point of the open space tomorrow to discuss this basically Sorry, can I say something? Yes

I'm itching all the time. All right, I That Patents lip has been mainly project-driven. So there was not all the time big developers behind that

But what I wanted to say is Mock up and patterns is an abstraction layer. It's not a new framework like angular.js. It just is on top of potentially exchangeable JavaScript thingies that perform jobs and

What the main thing I think we gain with mock-up here is that we finally get our JavaScript efforts on Professional legs. This is a real good foundation and it is finally tested as you said in the beginning and It is repeatable and a big thing you can do Design with JavaScript without a clone now pattern slip does that?

Even more extreme or it comes from designers So where you call it a pet moment and patterns lip would call it pet pretty date Yeah, because it hides completely all the implementation details

And I think this is also a strength not the naming but if moment JS goes away yeah, we just take another library and change some lines in pet moment or pet pretty date or whatever it's called and Everything will work again. Yeah, and this is what angular.js does not give us or we kind of rely on that the

Moment the date calculation in angular.js will never go away That makes us more independent I Think that All the efforts with mock-up, yeah, I

Mean come on. We integrated a completely new language more or less into blown Yeah, this is not as a simple add-on. Yeah This and this also is is shifting mindset so we have to get the whole community into thinking JavaScript ish and

As you said you showed when rock did it I think he always had some impulses during Christmas when he was alone and Then he fought something and did a lot of things that was great but it was all in rocks head and then afterwards he did some talks and tried to get people to help him and and We were all standing like what the fuck is he doing? Sounds great. I want to do this, but I understand nothing of it

So the important step that we have to take now is to really Push that into the the heads of more developers and we are trying that in the prone internet consortium as well That's why we use pattern slip right now because when we started that in the beginning of the year That was the closest thing to mock-up back then we knew mock-up will come but and

It was not really to get out of rock when can we write our own patterns and put them in there? We try doing the BNY sprint So we thought okay we use pattern slip because we need to design to these to do design first and then we are so close to mock-up that we actually only have to rewrite the the parser part and

And and can convert our patterns into mock-up. We did that already. It is actually we tried it out It's quite easy to make a mock-up pattern patterns lip pattern or vice versa So no, no, no lockdown there

and The important thing is now to get people acquainted with that framework so that they see Okay, there is also also other languages have steep learning course. Yeah. Hello It's not only blown all the time, but if you have done it a few times and it's not that bad Okay, still JavaScript, but suddenly you have all these amenities like testing framework

Structure also JavaScript kind of structure and and then you suddenly it's it's fun to do it. Mm-hmm I Don't think we are there yet. Not not enough people are really secure with mock-up, but that will soon come and then there will be more and more people who are actually able to contribute to mock-up and

And Then that will become a stable thing Thanks for the encouraging words. We we hope that our training materials which we prepared And which are available on the reader dogs and also in the prone organization on github

can help People getting started with writing patterns and actually it's fairly easy. We have done it several times and and The amount of boilerplate is quite small Yeah, and I was I just want to add that I agree like a hundred percent with what you're saying and I'm one of those people that when rock came and said

Look what I'm doing. I was like Wow, we should be doing this. Of course we should It's just I'm starting to have doubts about the amount of people developing one thing and the amount of people developing the other thing and looking at history of stuff that gets and maintained and Then we have to double the efforts to remove it and look for the other thing that maybe

Should have been used in the first place Okay Yes

Right, okay

I Even have used it in the jungle project. So it's completely unattached to plums. It's great. I love it

Sorry, I Just want to add also that Patterns or mock-up which are roughly the same thing are not in competition really with Some with with the frameworks necessarily. I don't know. I'm not so sure about angular because apparently it is this whole full stack thing

But I've written for example patterns That use backbone JS and it's conceivable to write patterns that use ember or react or these things So like Alex says it's more a compatibility layer. It's more just a way of And then something also that I think that's really actually a head shift like a new way of approaching things that is brilliant from with that

that Cornelis Came out with with patterns is declarative Configure a declarative JavaScript or configuration you don't actually the idea is actually not to write JavaScript. The idea is to just add

Some semantic sugar or whatever you want to call it like markup and it's it's purely it HTML you add special classes and data attributes and then you get this This magic that just happens and I see it a little bit like towel I mean who here ever looks at the Python code of towel or chameleon? Nobody does that? We just use we just write the markup and stuff just works

We just say tell repeat and we know it works and that's kind of our patterns is you just say Pat moment or Pat pretty data, whatever and there's just a date and you don't have to worry about how it works it's just a small core of people who care about that and who Who would care about the JavaScript implementation? So the idea is really more about Exposing this functionality to people in a very easy-to-use way without having to know JavaScript

And that is how Cornelis also envisioned it because he doesn't want to learn JavaScript. He won't he knows markup and CSS So that's really a strength of it also the one thing and I think it's not necessarily in competition with other frameworks You can still use other frameworks with patterns

So, yeah, that's really great thing with patterns reusable components and you don't have to write JavaScript you just add classes

The bottom line in this discussion for me said JavaScript is moving really really fast And that's that's the problem for us because clone is not moving that fast and it will never move that fast. So and Mockup is is there in clone? You can use it as Ramon said it is stable and all those other talks about react.js or angular

There are there are maybe part of the discussion for the for a future blown version maybe and all the frameworks have advantages and disadvantages and You're able to use them now maybe even in clone if you want But it's still experimental and I think we have to make a decision at some point

But we don't have to make that now right and my personal view is actually that we should invest Heavily into a decent JSON API and we'll have an open space on that tomorrow and that will at least take us Probably half a year if we're lucky and then probably JavaScript moved on a lot more and then we can make a discussion

Decision in the future, but it's I think it's a good investment to learn To learn mock-up now because you got introduced to a lot of concepts that are shared among all those different JavaScript frameworks like NPM, Bower and The idea of components and all that stuff. So that's a good thing, right and it's not too hard to get started

We certainly have to improve it a lot. We have to improve Documentation you did already a training which is a good thing. We also have to improve I hate to say that we also have to improve testing because Everybody is saying that's so well tested and I think the

Test coverage of mock-up for the unit tests are like 60% and the robot tests that we have I know that Jill and I wrote a couple of robot tests at in Cologne, but this is basically it so There's still lots of things to do in regards to testing

Yeah, okay, just two more words be sure to watch the Presentation of Ramon and drop we were talking about the history. It's the same topic field and it's also new technology started by Nathan from game and those two guys and

Be sure to get a sticker. I have many of them Thank you last point it's related to your I'm mentioning the resource registry the new one and Timo saying you people shall use it now

If I want to use it now in a plan for instance, for example, what I just go about compile a huge JavaScript file and a huge CSS file with grant and then put it into the standard Plone resources or how would I go about it? You can just use plan of widgets, which I really did that and install it and you have all the widgets

Maybe it's working on blown four three four now, but not earlier because plan For now, which is all supposed in tiny MC for Depending on check very one nine at least Yeah, the versioning capacity Incompetibilities of clone at the moment is not very satisfying. I agree

But yeah, this situation comes from via supporting technologies which come in front five already in front four and Yeah, it's always a moving touch at every project we are supporting for a plan for and for plan five at the same time I'm moving. So yeah

talk to the to the Developers and try to to fix it yourself. It's often not so hard Just be great to have some general idea how to get it working on phone for three so people can start using it Yeah, you get some feedback and it's not everybody Waiting for faster if you want to use the widgets use blown up widgets

I think it should be easily installed on plan for without many modifications I am not sure if the current product which it's uses check really 111 maybe then you need The latest CMF blown check out but because this one is competitive with check really one nine and up

But If you want to just really want to develop a pattern which I recommend everyone to try it check out the mock-up project on github slash blown slash mock-up and

Look at the trading materials. There are step-by-step instructions our plan is to move back this documentation to Blown official plan documentation or so Okay, you have to finish up. Thank you. Thank you