Yeah, you're a German you want me to start in 30 seconds, right?

Until my time says I can start in a minute and it will

Okay Hello, is this thing working? Okay, great Like this as well So working great. Okay, can't hear myself, but

Really? So we put it louder or I just Near Yeah, well like this Okay Hello, my name is Timo Steinbeck. I'm a Python and Plone web developer since More than 10 years I'm a Plone core developer since more than five years and I'm member of the Plone framework and release team and

I'm responsible for the Plone testing and continuous integration team I heard three times today that people were saying that I'm the guy who yells at people if they break the build. So yeah Yeah, I like that

but today I will not yell at you, but I will talk a bit about JavaScript in Plone and how you could build Angular JS based front ends for Plone So, I hope I could I could give some answers maybe to to the questions that

that Andreas raised in his previous talk about why Plone is going to die So what's the current state of JavaScript in Plone when I talk about the current state of JavaScript in Plone, I mean right now

Pre Plone 5.0 we can at the end we can talk about About Plone 5 and the recent Improvements that have been made But when we made the decision to go with angular that was over a year ago. So that was pre Plone 5

So what what was the current state of Plone of JavaScript in Plone for 4.0? 4.x JavaScript has always been a part of the the needed skills for for a developer even I think we introduced the the search The other search autocomplete in 2.5 already or something so we're pretty early

So JavaScript was always part of our job, right? But it it wasn't it was always like you have this This thing called progressive enhancement, which means that you create a site and it will work with JavaScript disabled even and

for Improving the the user experience you you can enable JavaScript and it will you will have nicer a nice URI and stuff like that But it will still work Without JavaScript. So this is what what we did until now in the Plone community We introduced jQuery at some point, which was a great thing back then

We created a widgets that that require out of Require JavaScript like the autocomplete widgets, which are quite nice We introduced overlays, viewlit The autocomplete search and stuff like that. So we introduced more JavaScript, but only

As sugar on top of Plone, right? My experience in the last I think two or three years is that I either have smaller Plone Projects where I use Plone more more or less out of the box and I change tiny things I do a little bit of theming and

Largest larger projects where we're basically Rewrite the the entire front end for Plone and for the first kind of projects I usually fetch all the JavaScript CSS resources and I might disable some But for the second for the larger projects we use I usually start without anything from from the front end at all

We choose a Java a front-end framework like you choose bootstrap or jQuery UI or Java User interface or whatever and you build it from the scratch if the project is large enough Then that's a sensible thing to do. So this this is my experience from from

From the last couple of years you slightly try to improve things like doing things like lazy loading Parts to have a better user experience so that you load the the frame of the page and then lazy load Other parts of the of the page as well so that the users gets a quicker response and then you lazy load the rest maybe for instance if you have a

Site where have like a thousand comments say right you don't want to load that in one chunk because it takes ages then you Load the article first and when you're done you load the the thousand comments and the user Will not even notice that because once they scroll down the the comments will be loaded, right? You do stuff like that, but that's still with with jQuery and with the basic stuff that blown gives you or maybe with some enhancement

We've seen some improvement lately with with mock-up blown up widgets resource registry towards More modern JavaScript development, but we can talk about that at the end maybe

So what are the problems with those approach even even the second approach when you Write a large part of the front-end yourself and you still require like jQuery or bootstrap or whatever The problem is that usually the the page load is too slow, right? It takes a while to load the page With jQuery jQuery is really easy and and nice

and for for certain parts, but if you have larger projects, then you will end up with tons of bindings to Some actions in your in your code right you bind something you bind a JavaScript action to a button and then to something else and that that really

Gets to a point where you have lots of spaghetti code and it's really hard to maintain It's hard to test and you wish for some structure jQuery is really easy to to start with because you don't have to learn a lot of concepts But if it's at a certain scale that Don't really work So in my current project where I'm working since more than a year now

It's a larger project for a couple of portals for health and medical related information. So we have three portals one portal for Getting together content another public facing portal and a third portal that is used for telephone support

So for the first two use cases clone work really well I mean for getting content together having workflows having permissions that really works Well for a public facing website, so also still works quite. Okay but for third use case Telephone support it occurred to us at some point that we're building more of an application than really a content management

System so what we needed there is if people are on a phone Then They need to respond really quickly right if they have to to search content if they browse content If they enter data that needs to be really really fast, right?

It's not enough if they if they wait for like a second or so, it needs to be faster than that So this was our requirement But we still wanted to use blown because we had all our content in those other two portals and blown work quite Okay for us and our entire development team was blown developers

So it would have been hard to choose something else, right? So we wanted to we wanted to still use clone, but we wanted Better features we wanted some real-time application Functionality socket IO and stuff like that We wanted better widgets and one other important requirement was also that we had to improve caching a lot if you try to

to cache locked in users That's that's a bit complicated You can use edge site includes and stuff like that and you but you have to configure your entire stack So that's that's a bit complicated. So that was also One of our requirements

Since we like as it is in in projects You don't have much time to to make decisions and to do like really in-depth research So we had like we knew that something did not work as we as we wanted it to work and we had like Maybe a week to to find something better, right?

So and I'm the I'm the lead developer of of this project So I'll stop to look around for four solutions for that. I saw before Those full feature JavaScript frameworks which are pretty nice which gives you nice features which are a lot faster and I was Yeah, it's it's I was looking for a solution right and then it's hard to choose because you have like all those candy shops

And they say all hey, we're the best and come to us and we can do everything but you have to choose So I made a list of requirements what what what I wanted or what I what we were looking for, right? And what we were looking for was actually a full feature framework. We wanted to use one framework for everything

We did not want a best-of-breed solution because that means that you need to know What's the best solution for a specific use case and we had to teach that to our development team, right? And I did not want us to buy like five books for for every developer so they learn for five different frameworks and then combine them and

Even compare them and see what's the best solution I wanted to have one full-featured solution and I considered myself even though I have a Long time experience with JavaScript probably more than eight years or whatever. I Considered myself a newbie in JavaScript because the only thing that I could do is is writing spaghetti code in jQuery, right? And it never took JavaScript seriously as a programming language

So thinking about software architecture and stuff that did not fit to JavaScript in my in my world Until a couple of months ago. So we wanted to have a full feature framework It should be easy to learn it should it needs to have good documentation. It needs to have tons of books So it's so that's easy for us to to get started really quickly and improve the situation, right?

and something that I actually That people are misunderstanding if I say that but something that I that I liked about soap was that it it's even though It has a steeply learning cough. It it teaches me stuff right it or teach me stuff

I'm not sure if I should say that out loud but before I start with soap and Python I I did Java and PHP and The problem with PHP is that I even though I worked with it for a couple of years. It did not teach me anything. I Wrote crappy. I wrote crappy applications and

It and it just did not work and I was like thinking hey, what am I doing wrong? I mean either either I'm so I'm completely stupid or or what I'm using is stupid and actually both are correct I was I Was in my early years as a developer so I did not know anything and I was using a crappy framework

So both was right and then a clone came along and I wanted to have that shiny thing And I had no idea about Python or whatever. It wasn't wasn't the conscious decision I just wanted that and somebody started to pay me for for like Getting starting with with clone and then I had at the beginning

I had a hard time to understand it But every time I understood something a concept in in so like acquisition or whatever I had the feeling that it was worth the effort right and within the PHP world at the complete opposite Experience when when I understood a framework then it was like, oh man, that's so crappy

I could have done that better even though I have no idea what I'm doing and for soap I had quite the opposite So so I was aiming for something like that. I am I'm still a newbie in JavaScript and I wanted a Framework that takes me by the hand and that teaches me stuff right and I want a full feature framework and since I since

In the last couple of years I learned one or two things about software architecture I wanted to have a framework that That has components that are reusable that are testable and stuff like that So I think I my judgment about software project is a bit better now than 10 years or 12 years ago

And another requirement that that's really important. That was really important for us was That we were looking for a framework that what was here to stay for a while Because my experience from from other people that were using JavaScript was that JavaScript is going at such a Such a pace that once you create something and half a year later, it's gone and I wanted to to avoid that

so I Looked at all the solutions that are there at the major solution I looked at markup in a really early state and so alpha I looked at backbone ember knockout react and angular and In the end we choose to angular I won't do a comparison of the frameworks

You can do it yourself or that would be a topic of complete complete talk I guess So we choose to angular why did we choose angular we choose it because it's and it's a full-featured front-end framework It does everything for you, right? It's not like backbone is That's only rooting or like react. It only does the view it really does everything you just need

angular you can compare you can Combine it with other things but in the end, it's the only thing that you need angular was created in 2009 by Google when the Google engineers created Google feedback and there was one developer that had a pet project which was a pre version of angular JS and

It took the Google developer six months to create a project With 17,000 lines of code and this developer came to the project manager and said hey I have this pet project and I can do what we did in six months in two weeks And with with maybe a thousand or two thousand lines of code and a project manager was saying yeah, okay

I mean two weeks is nothing right there Google. So yeah, go ahead. Why not? I will have some fun laughing at you So and and the guy actually failed because it took him not two weeks, but three weeks But three weeks and from seventy thousand lines of code to one thousand five hundred lines of code

So Google Started to use that for other Applications and today Google is using this internally is using angular one dot X for more than 1,600 apps internally there was just Angie Europe conference last week with over one thousand one thousand two hundred attendees

Just about angular in Europe Um, so I will skip the next statistics just about like That angular is right now pretty big if you look at the the books or the number of meetups and Google Trends

I mean alone that doesn't meet anything angular can still suck and I hope I can convince you from the opposite But those are just statistics that convinced me a bit more that angular is big enough that it will stay for a while So I will now introduce like some of the basic concepts of angular and why I think that they and I will try to show you

why they How they could improve things in comparison to to what we had before the most basic principle From angular is that they do not try to reinvent the wheel. They try to improve the things that are already there They're not creating a new language something that really

Made me a bit angry on JavaScript terms every time I use those more lightweight JavaScript so it's like even jQuery they create their own template language over and over again And then they're gone like the jQuery template language use them for a project two years ago And then they said no, it's gone now and if you have another

Framework, they have their own template language as well. So I like the approach of angular to reusing stuff that is already there Angular is as I said a full feature framework and it's a model view controller framework, whatever that means. I won't go into detail But you all know model view controller or you know, at least how those browser views work, right?

You have a browser view class and you have a method maybe that returns a list of persons, right? Usually you want you would get that from it from a database But for the sake of an argument, I will just return that list and you present it right in your in your soap page And let so you iterate over the the persons and you show it Angular is pretty similar to that. You have your your model, but only in JavaScript, right?

This is this is just like it looks a bit like Python code, but it's JavaScript. It's a JSON. It's a list And you bind that to your your template So this is the angular template language. It should look pretty familiar to you

and The the basic concept is the same either the only difference is that that an angular your model or your controller In this case both are the same Lives in JavaScript code. So it so it's it lives on on the on the browser, right? Not on on the back end. You can do calls to the back end and query your database

But it's basically the same thing. So this is so page template. This is the angular template and actually I I like the angular Template more it's it looks cleaner, but it's but you will Yeah Yeah, the thing that that will drive you crazy when you use angular is this in because you look at this

You forget this in because in Python you don't have it and and you you you you think hey, this is right, right? I looked at it ten times and it's it's it's correct What am I doing wrong and it's just as in because it's so close but there are those tiny difference. Okay So This is pretty familiar. I already showed you a bit about it. They did the templates and

This is how you bind your your model that you define in your JavaScript code to your to your front end right this your name is an attribute and

That lives in in the in the controller or in the back end This is more or less one-way binding the same as As jQuery does it but jQuery does it? Just the other way around But that's basically the same idea. So angular has a bit more powerful concept Which is called a two-way binding. The idea is that usually you get a request from your

From your browser to your server and the server will respond right and you you somehow bind the Your your model to your controller to your view right you return something and this is it angular has two-way binding which means that you're not

Returning something to your browser, but also if you change something in the browser, the model will automatically change. I will show a Quick demonstration if you have here an input field and it's bind to your name to that attribute, right? And in this h1 Tag you will show the same attribute

To when binding will mean that if you change the input field the the h1 Your name will change automatically because it's the binding goes in two directions, right? If you change something in the browser, it will change in your model So let me give you a quick demo from the angular pages It's the the main example you input something into the field and we'll show it right away

Um That's actually not not the cool thing about it The the thing that I like a lot about this two-way binding is actually that if you create your application You're thinking about the model and this is a concept that that is familiar with Python if you in Python or in soap

If if you do it right in in clone You won't put any Python complex Python code in your template, right? You put it in in your in your controller and angular forces you to do the same Since you have this two-way binding. There's no need to do any complex stuff on on your in your template You do it all in your controller in your JavaScript code, right? So it's basically the same

Same approach Another concept that is that is important in angular are directives directives are basically Taking it's it's basically taking HTML and

Give it a mechanism to to Extend HTML so you can create basically custom HTML Tags that can be used and configured by people like this Portland navigation, right? That could be like the clone Portland navigation Oh, actually it is in an example that I created and you can configure it like you can configure it and in Python or in

clone And you can use it. So this is a good way to like distribute Packages or anything you just create directives and you use them, right? It's the same that mock-up does and that's quite a nice quite a nice approach Angular is just a bit bigger than mock-up and it has tons of

Add-on Frameworks and whatever you have for instance for bootstrap. You have two frameworks. You have UI bootstrap and angular strap they don't both give you give you everything that bootstrap gives you but With those directives this means that if you need a modal like exactly within with

Like exactly how it is in mock-up You can create those models without writing really JavaScript code. You can write it to customize it, but there are actually two projects you I boot server angular strap and UI bootstrap has 130 core developers and angular strap has 70 core developers another cool thing that is built on on angular is ionic, which is a

Framework for creating a mobile application and it allows you to It will create real application that you can install on the Android shop or on Google. No Google Play and The iOS shop or whatever that's called Okay, so so the third important concept is dependency injection

I'm not sure if you heard about dependency injection is it's a term from from software. It's a software development pattern or principle and it's used for instance in pytest and it's incredibly powerful and and I had actually a bit of a hard time to understand it because

It's so simple because I was like trying to understand it. No, that's too simple. I must get something wrong, right? Because the idea is basically that that you have a component whatever component a class or whatever and if you need something To work then you just declare it like here. You have a controller like in a model view controller that should

Create the model for users that you will show in your template, right? And you might need an HTTP call to the back end to get those users So you say in in the controller and the function I need to get user service that that gets me to users, right? And it automatically and magically will get you the users and not only that

It will also make sure that at runtime The get user service will be fully there Right, so if the get user service does an HTTP request Angular will automatically make sure that this code is only executed once the HTTP request is ready. That's incredibly powerful, but it took me

Like half a day and and I went crazy because I did not understand that at the first place So there are some concepts in Angular that you need to understand But there are only like a couple of and once you understood it, it's really really cool and it's worth it like So let me show you a quick demo of what I did I told you before that that we did this as a in a project and I'm not allowed to show you

This project because it's an internal project so I can't show you what we did, but I tried to Get some parts of what we did in there and put it into one of my pet projects which is called pulling up Angular JS

Which is basically the idea space I wanted to play around with angular and see what what it can do on top of clone Like I only took out the really generic parts of our projects and added it there So, yeah, that's that's a demo I did a screencast So this is the the UI I just took bootstrap and there you see the oops

So Not no fancy UI but you see that that the pages load pretty quickly right and the reason for that is that they're Running on they're just getting the JSON data and you see there. There's this Portland navigation

This is this is a form The UI bootstrap form library you see here that it does a client-side validation if I try to send that it will Complain sorry that that's in German. I don't know how this UI boots I've figured that out you see there a select two widget and there you see tiny MC for right?

So everything that we have in markup is just there and I can show you the code for that It's just a couple of lines, right? And in comparison to to mock up we're we're not creators of that. We're just users, right if something goes wrong I just go to get up and complain about that to one of the developers and I expect them to fix that So That's that's really easy. Actually. I did this yesterday evening

I was really late on preparing that and I just created this within like 10 minutes or so So yeah, this is this is for me like modern JavaScript development, right? This is how I want to Divide I mean what I showed you so far is like features that are nice, but I also really like the way

How you can develop with JavaScript? We did a lot of this also in a mock-up project with using NPM grant Bower and stuff like that And Ramon introduced me to to the school browser sync feature So I want to show you how you how you do develop how we can do development I put some effort into into this application that it works without a clone back end

There's a thing called HTTP back end in angular which allows you it's basically for end-to-end tests But it allows you to create mock back ends And then tests against that but you can also use that to create a real application and just mock the back end for now

Work on that and then implement it the backup the back end, right? So what I do usually is I have a clone instance running and I have this this just HTML View there and if I if I work only on the front end I do it the HTML part and if I need something in clone or develop I want to develop the entire application I go to

But the cool thing is that if you use Grunt or in this case, I use Gulp for I just want to play around but it doesn't really matter but you can You can use browser sync there and you can use this grunt task runner which means that if you say you have a less file or JavaScript file and you compile that together and you

Ugly fight or whatever it will automate it will watch your files and it will automatically run, right? So if you change anything grunt or Gulp, they will take care of that and they will also reload your browser So you never have to to leave your IDE again so here right is on the right side there is the blind text and left is is the application and

If you change something this is a less file right and I changed the background here to red and I saved it on the right side and you see it immediately on the left side, right? You can send it to blue and Back you can do the same not only with less but was everything that you have in your in your Gulp or grunt Configuration that is in browser sync. So that means that you can do JavaScript in there as well

So if you if you like add a an alert to your JavaScript code and you hit save it will automatically Reload on the left side and show it to you, right? So if you do it, right you don't even need the Fire back or anything, right because you can do it right in the browser

So this is the way that I want to develop right? That's that's pretty cool You couldn't combine that with with clone reload maybe but this is how the JavaScript people develop right now And that's really that's really amazing. That's that's really cool. So When I was playing around I was I was asking me the I was asking the question to myself

Can that be the future of clone because we had a pretty specific use case, right? We need we need a really responsive and fast application We need more an app than the content management system and clone is is a pretty big system, right? And does that fit? Does a single page application really fit into into what clone is doing, right?

And I still still consider that project. Yeah, my personal pet project playing around with it But I I think that it can in the future that that this approach is What what clones future could be because we're talking a lot about like new API's and stuff and and we we are moving towards

towards JavaScript and more front-end solutions and if we could move a lot of our of a lot of what clone is Or the other way around if we could if we could Remove all the parts that are not really necessary in clone and that that andreas may be mentioned in this talk

And just keep it to the to the core stuff that is good about clone like permission system like the ZUDB even though there's some There's no no concerns on that and make clone Just just the JSON storage more or less and we could develop large parts of clone in in the front end, right?

and it's really amazing to see that if you work with angular what what you What you can remove from clone because you don't need any templates and longer right because you have to run a templates You don't need controllers because you're doing that on on the JavaScript side as well. You don't need

Yeah in a different language, of course. Sure. Yeah Yeah, sure. Yeah you have 30 okay Yeah, the thing is it doesn't make any sense It doesn't really make sense to have them in Python code still right or have like viewlets and portlets and may even diazo

It it doesn't really make sense because you're writing an end product, right? So you I mean you have to think about ways to overwrite that Things then but that's more complex right now. I'm only concerned about like this is a theme, right? So and I want to see if that works So that has the potential not and that's not even bound to it to angular that that applies

I think to every JavaScript front-end framework that that we might want to use That could simplify actually clone and that could allow us in the future Maybe to rewrite if we have a good API if we are able to create a good API to replace To replace the clone back-end maybe with something more modern and for me, that's

That's a brighter future than saying we we are going to Rewrite it from scratch right away without without an upgrade path or whatever Or have an internal API So this is the address where where I put most of the stuff that I did there's still not everything in there

But we're still experimenting with it. So feel free to to go there. Have a look. There's also an how-to which is a bit outdated But it tells you how to how you can create your own angular app on top of clone But the the most important thing

Actually would be for clone in the future I think and that's my personal opinion That's not the opinion of the framework team or whatever Is that we need a restful JSON API because if you move large parts of your application to your front end You need to you still need to To talk to your back-end servers, right? And for that you use JSON because this is how the Java Java people roll, right?

But it should be in my opinion be restful there's a lot of People that you talk to do not really understand what what rest means and I don't have the time to go into detail to that but I think that a JSON API could really help us a lot no matter which JavaScript we might want to

Use in the future because everybody who works in with JavaScript and I talked To to a lot of people are saying we need a JSON API So this is really for me after plon5 the next project that I really want to work on And I would invite everybody to come talk to me or talk to Simona we started this together at the plon open garden

I also talked a lot With with Lawrence about that because he's he has this other talk that I'm really looking forward about JSON LD and react JS Which is another JavaScript framework And we'll have an open space on that on this JSON API and it's really interesting. What what's what's going on in there?

and I don't think it's see See the the future of bonus is that bad if we take that path? I think I think there's there's some like light at the end of the tunnel for me if we move to that

I'm not 100% sure that this will completely work and even even if angular is the right choice And I just can say that it worked for us really well But this is like how I see the future of clone right now just a couple of words About Good reasons not to use JavaScript there there if you think about

Your application you you have to carefully think about what what kind of frameworks you are using right and there are still some things in JavaScript That that aren't that will not be supported Say you might still have users with no JavaScript enabled right there are still around

So that won't work right there's no progressive enhancement any longer If you have you if you have an anger I have and somebody does not have JavaScript and hails they don't see anything right? So that won't work Search engine optimization is also another topic Google is not able to crawl angular even though they wrote it

so what you have to do is you you can use phantom js to actually crawl your sites and Make an image of your file and let the Google robots or Bing robots or whatever go to that page So you can't do that, but it's a bit more effort I hope there will be some improvement on that front

But this is something that you have to keep in mind, but for our application It wasn't internal application so that did not matter another thing is mobile visitors you put a lot of a Lot of logic into your into the browser of the user right and if you have an old smartphone then that smartphone might not be able to work on

Those large amounts of JavaScript code right to run it If I if I look at modern phones I'm not that concerned like for core processors and stuff like that, but there's they're still around same is true for old browsers, right? I think I'm not sure about the the the actual plans of angular

But I don't think they support IE 7 and stuff like that right so this is also something That you have to take into account right this is really modern as I said that's experimental Right now so you can use it and a lot of public and important websites are using it And I don't think really that having JavaScript disabled is is a real option these days

But you have to you still have clients that might want that so you have to keep that in mind Another thing is robustness if you have an error in your JavaScript Somewhere it will break same is true for clone right if you do a migration then It will break so JavaScript isn't there isn't very robust So you have to take a lot of effort into testing the cool thing is we already have a cool testing framework

Thanks, thanks to ask. Oh With with robot frame, but those are all only end-to-end tests right that's not enough you need integration And unit tests as well, but angular takes a strong focus on that on testing and small reusable components, so you can do Cool testing stuff with angular as well so my conclusion to that is

We're using we're looking for a full-featured Model view controller framework that is here to stay for for for a while angular fit to that very well It's it's really a huge project many many people are using it

It will be there. There are already plans for angular 2.0 Which are also pretty amazing, but there will be an upgrade path So I'm not worrying about the future of angular actually There are familiar concept there are some concepts that you have to learn, but they are worth it So it's not it's it's the learning curve is not as steep as as as so as I said

We were able within two weeks to teach all our developers, and we have developers with different skill levels to learn angular I think if you're a web developer within one or two weeks You can really and you can really learn angular in a way that is enough to write decent applications

It's It's very well documented you have like on YouTube you have tons and thousands of videos You have user groups the user group in and it's it's a bit frustrating the user group in Cologne in the Cologne area where I live the Python user group they they're

They're Doing their meetups at the same day at the angular user group and the angular user group within a couple of months grew like double The size of the Python user group and now I have to decide where to go And I show you the statistics about like only on meetup.com right worldwide there I don't know 400 groups only on angular right not not JavaScript there in addition

There are JavaScript groups, but only on angular and one thousand two hundred SMDs at a conference, it's like crazy whenever had that in clone, so it's really it's really a big thing right now I Think that this best of breed was full featured approach I Made it clear that I'm tending towards the the full feature framework

There are different opinions in the in the framework team and amongst people And I would really like us to to have a competition on on the different Possibilities that we have because I I have an adapt knowledge now on angular And I really liked it, and I talked I just talked today to Lawrence, and he's using He's using react and he liked it also a lot, and I think that's that's a really that's a brilliant sign right because

Like smart people are using different frameworks, and they all say hey, that's cool all right I like to work with that so we're all it's better to choose from good options Then not to have or have bad options right so that's a good thing And I think we all can agree on this that we need this JSON API so we can start working on this JSON API in

The next half year maybe and then after that see what we can do about about the JavaScript. We should get in in the mock-up Developers people that are using react maybe people that use amber whatever I would like to see what I did for Angular like this experimental front end to do people to let people do that for other things right so we can compare

What's best for clone and clone is a huge thing? We can't just replace it like this right even though you can do a nice demo Pretty fast in an angular or whatever framework. It doesn't mean that there will be clone you have to override things you have through the web Things you want a search engine optimization You want tons of clone is really huge, and it's not easy to replace

But with this approach we can we can just let people create front ends for Poland and choose the best one that is there Right we don't have to fight and have a big argument We can just do what we want play around with stuff and see what fits us best at some point So yeah, as I said many times for I'm really happy with angular. I would highly recommend you to to have a look

It's it's definitely worth it even though if it does not work for you in clone or will not work for us in clone It's it's really worth it to learn it if you look at frameworks And you choose maybe two or three that English definitely be one of them Um

Yeah, if you want to have a look what what I'm doing it's on github.com tisto clone of angular JS I would be happy to put it in clone but since it's really right now a pet project is experimental and I want to show that to the outside world is That's why I put it into my repository if other people are interested I'm happy to grant you access or at some point. Maybe move it even into clone if it becomes a viable option

Come to me speak to me my RC is here and This was it. Thank you. Do we have a microphone?

Hi Hi, you have been involved with the mock-up development for quite some time and Obviously you're involving on gear too I have two questions one. Do you think that the stuff that mock-up does can be done?

With angular and so not including the all the back end and all the things you mentioned but just Doing the same thing that we do with mock-up doing it with angular and if and the second question is if that is so Do you think we're we're wasting our times developing mock-up?

That's a tough question When we did this is this decision to angular it was really over a year ago So I looked at mock-up mock-up wasn't an early in alpha alpha stage. So I never really bothered to look at it I haven't been involved in mock-up at all, right? I mean, I'm a core developer and I looked at it and and I helped to make it

Work in you know, see I set up and stuff, but I never really had a close look I looked at some of the of the parts And I saw some spaghetti code that I didn't like could be that we just copy stuff. It isn't hasn't been Does not mean that this is mock-ups fault

But we had to make a decision back then and mock-up wasn't wasn't ready yet and The scope that I have a plan of angular JS is really far beyond what it's maybe it it It's close to what rock had in mind at first But but I think that the move to integrate it more into clone The work that Ramon did was was absolutely the right thing to do right because we have in clone 5

We have a way to do this and it's going in the right direction. You are using Bower NPM and stuff we have that in clone and with with angular We don't I don't have to slightest idea how to how to include that in Python packages and stuff like that, right?

And that's that was also the part where mock-up was the mock-up flip was missing some things So it's really a bit comparing apples with oranges Coming back to your first question, I think we could rewrite Parts of mock-up in in angular we could do this as well in react and rock had that in mind At the end before before I left I think and it I think it makes sense. I want to be a user of JavaScript

Frameworks and I don't want to be the creator of the end. This is where I disagreed with with rock and So the important the important question in regards to angular is or some one important thing to know is that

Angular operates on the DOM tree directly and angular does not like it if other frameworks play in the part of the DOM that angular controls right because angular does a lot of magic and cool stuff, but you can't just Hook in with jQuery and do something else, right? So if you rewrite jQuery code, you have to do it

You can use use jQuery in angular But you have to do it the angular way and actually I like that because angular forces you to have small Reusable components and if you don't have that angular screams at you like I do if you break the belt So There are two ways you can use angular one is that I was looking after

Which was using Angela for everything right and and I think that's that's a cool thing but it's a long way to that the other thing is you can use you can give angular part of the DOM and Let's it control it and Then it will work fine and you can do whatever you want outside of that, right?

So we could create widgets like in mock-up, maybe the same widgets and rewrite them as directives that could work Yeah, so But I'm I see my talk just as as a part of the ongoing discussion And I'm not standing here and saying we we have to go with angular

That's the best one because I don't know all the other frameworks and as I said before other small smart people are using other things so we should all get together and have a have a bit of a competition and see which frameworks fits our use case best and Yeah, Ramon and Nathan and you and and all the other people that were

Working on markup are doing a fantastic job and mock-up was started a long time ago So it's it's always easier to come later and use a more fancy framework Then then start from the scratch. We know that in the Flown ends of community, right? So yeah, that's that's not an easy easy

There's no easy answer and we should just get together discuss things have a beer and reach an agreement at some point Okay. Thank you Exactly to this question. I Found an answer for myself About mock-up and anglo-js directives

You can compare the functionality of anglo-js directives directed to what this mock-up is doing and Yeah, my answer to that is I Think I believe that this web components w3c draft is

Something which We will see in the near future. Say that's even more far ahead than angular, right? Web components, I mean, that's yeah sure It's a it's it's a head but still angular if web components will become an official standard and browsers implements the technologies so that they can use

Those web components like shadow dominant cetera Then anglo-js will itself switch to web components have even read something yeah, and we as markup team also would switch to Web components because just bigger and so it's exactly the same plot right ambitious

Yeah, we don't know yet if those will succeed but I guess it will and yeah, hopefully yeah Thanks, that was really such a good question. I also just want to Add something to that

Just because I'm not on a mock-up mock-up team, but I've worked quite a bit on patterns lab, which mock-up was kind of inspired by or based on and The one danger I see with angular is that if you I think I love the idea of adjacent API. I think it's great the one danger I see is that if

You have flown as this kind of JSON API This is abstracted away thing that people don't interface with anymore and you expect everybody to write an angular app on top of that You're gonna have every consultancy having to write their or prisoners Whatever writing their own UI in in Angular and I don't see a lot of reuse of code. I see a lot of stuff being done reinventing of the wheel

Whereas with mock-up? The or patterns lip that's roughly the same idea I see a lot more reuse because and it's it fits it's much less invasive It fits much more with currently how I do plumb because it's just markup You just add stuff to your page templates in your eggs as you always did

It's still it's not a different JavaScript templating language or anything like that It's just just it's declarative markup, but it does then render in the browser. It does execute stuff client-side That's how the patterns work. So I see it as less invasive and also should be more reusable because you have these

Standard patterns or mock-up patterns that you that you can include in eggs or in plain core And people can reuse all the time. Whereas with angular I see a little bit this danger of everybody just writes their own angular angular Skin or app on top of clone. Are you gonna reuse that? I don't think then then you're would do it wrong

I think angular because because I mean directives are there to be reusable by people right and if you write a directive for Say now to complete widget or whatever you can just reuse it If you go with like bootstrap, right you can you can just use those directives and if you go with a foundation

Then there might be foundation directives right and we could I don't see the difference really but I mean angular and and Mock-up are doing completely different jobs right because markup is more about like widgets and angular student like everything, right? so you can't really compare them one to one but I I think that

Angular directives have a certain degree of of flexibility or actually a lot of flexibility that you can use and I Don't maybe I don't see really or yeah directives appear to me to be the The area where they overlap or where they try to save the same problem and it this might be my ignorance of

angular but for example the controllers and and Templates and these things. I don't know how much of this stuff you can bundle in a directive and then have it reusable for other people You know if you're gonna write your own controllers you Mentioned all this stuff in clone that you would not need to use anymore if you use angular

I wonder how much of that stuff would you be able to package and bundle in such a way? That other people can also use it and it's core core clone Yeah, but the angular clone stuff or whether you would have to redo it for every for every client I don't think so because like the the angular package are distributed as as like power packages, right?

You just do a power install whatever and then you get the the template the JavaScript parts and you're just using it So this is also something that I did not understand about mock-up why we're not distributing that as power back power insoluble package I mean Yeah, at least for mock-up because I I mean I am also pretty new to the JavaScript community

But I know that that I just look at power and see if I want something I look at power I do a power search and then I installed it and I was Okay Yeah, I mean there will be an open space on a JSON API and we could maybe extend it a bit too

But this also bleeds into into the 2020 discussion and everything. So there will be plenty of room for those discussions

Yeah There was a credit that I did not deserve

Oh Yeah, that's actually a problem that that when your instance is gone it for user

It seems like the application is still there and you click around and nothing happens Actually, we haven't tackled that yet But yeah, you probably have to ensure how did you solve that

Yeah

Oh Something

But also this Jason Lee is also tackling that right giving back in the first place from the API An error message and something went wrong. Yeah, and then you have to deal with that in the application, but

There are many many things in JavaScript development that that needs to be taken care of like performance tests or warm-ups crits and all kinds of stuff that you're used to have in your Python application or getting getting

The JavaScript arrows like when you're sent me a lot level Long server and stuff like that So there are many many things that if you do this in real world Then you have to take care of and we're just at the start I mean, I couldn't talk a lot about like our Project but a lot of effort into all those kind of things that you take for granted in

I Really a bright future I think and I'm really like I'm really looking forward to work on that. It's real like playing

I Was like yeah

Actually, we're using in our project we're using pyramid for the socket I'll Communication but only for that and it's only only an additional feature, right? We're not and that's that's actually the thing where I'm thinking about like can we really do that cool stuff with clone?

Because because yeah, but but you want a different back end if you have socket I'll then you need more threats unique G event or tonight or something like that And then it gets hard to then we come to a point where we have to where we would have to think about Like rewriting the z-server and we never want to do that. So that's really the point where we would have to say, okay So it has been nice with you, but we're done and I'm a bit afraid of that

Sure sure it has but We don't have to go

Touch that

Oh

Oh

Yeah Oh

I mean, so JSON API, I think if you look at it more and more, if a developer would look into it more completely, it's almost the same as JSON API, because it's separating frontend and backend. There's a lot of things going on, like Lawrence will give a talk about JSON-LV, which is kind of a bit structured. But same as it's old, same as it's 3 or 4 years old, at least. The other problem is just if you use JSON. Because, for instance, in XML it's really easy to have a hypermedia and RESTful API, right?

Because your client will know what a link is. In JSON you don't have any schema, so there's no way of telling what string is a link, right? Because in JSON, you're just a string, so you don't know if this is a link.

You have to create a domain specific language on top of JSON, on top of JSON. Documents as well are much suited to something XML-y. I'm not sure, but I think the same is, is the domain specific language? It's almost like a bit, it's a sort of... But in XML, that's... Oh yeah, okay. It's an extension of an RSS.

And that sort of technology, it's RSS and steroids, basically, so RMS. Same in RMS? Yeah, if you dig into it. So it's a very similar idea. I only know the concepts, and we are using it and we want to connect a document management system to all the sites. What's the other thing? The object store thing, there's another acronym.

I was at the talk from Johnny O'Don on geo stuff, and I was afterwards, why do all those geo people love those three letter abbreviations? KML, CSP, VMS, EMF. The list went on and on, and then when I looked at the site, like what is CSP?

Oh, that's metadata service for geo stuff. Oh, now I get what... It all has three letters, and they go on, they go on, they go on. Is it because in geo they have always... Is it two? No, it's two letters and then... It's a bit like the coordinate system, is it?

No, in geo you have those short codes also. Yeah, they can be any letter. The three letter country. Yeah, something like that. I think there are two letters and then a number or something. I think I will grab a tea.

Hey, we're in the UK, so... Your talk was very interesting, but I was half my life here, late life... Stomach, digestion. I would have loved to show more, but actually I went really...

No, it does work. Excellent.

If you could sit there...