Okay, please welcome Felix Heidegger, he's working for OnCloud and pushing the Phoenix project to the latest state and of course he has a lot of plans for the future of the OnCloud frontend.

He is caring for code style and style guides and if you have questions about style guides and if you feel like you want to start designing around OnCloud it's the right time and place as we build the frontend from scratch. We build it on latest technology and custom and you showed us why we are taking

this technology, this is a promising technology which for me strategically it has one very big benefit. You can learn it in 30 minutes. Everyone can, with JavaScript background you can just start learning it. And now Felix Heidegger will show the status of our Phoenix project so far

and after the conference we actually start a sprint with a team working on Phoenix. So the Phoenix project will evolve very quickly now and you are welcome to join the project if you like it.

Felix, show them what we have. Well thanks guys for coming, I hope you are as excited as I am. Today we are going to talk, I am going to talk especially about Phoenix and I came up with this little bird yesterday at 11pm because I had a logo and I had to change the logo because it wasn't mine and then I came up with this.

I was just kind of enjoying myself. Anyway, Phoenix up close, what is Phoenix from a technical standpoint?

We are going to talk a lot about Vue.js and how we use it and thanks to the guys for introducing Vue.js to you. I am not going to go into detail, it's more about how we use it, then we are going to talk about a little UI kit, not some UI kit and a little web pack at the end.

Phoenix is a stand alone web client that runs on a minimalistic web server and by stand alone web client I mean it's simply running in your browser.

Minimalistic web server means you just need a web server that serves static HTML, JavaScript and CSS files. So it could be the server you are running your own cloud on, it could be on your local machine actually. I have it here running on my local host and I am connected to the own cloud demo instance and it works just fine.

Could be on your phone, could be anywhere, doesn't matter and that's one of the awesome parts. I have some notes here because I usually forget what I want to say. Yeah, could be anywhere. First of all, Phoenix and Phoenix applications are written in Vue.js because as you have heard it's very easy to learn.

It has a simple yet awesome templating engine and it's highly reactive and what I mean by reactive, I'm going to talk about that later. We use it in conjunction with two major plugins, namely the Vue Router and Vuex as our data store.

Phoenix and Phoenix applications are designed using UI kits. It has a great amount of user interface elements, it's a list of HTML and CSS classes that you can use to style your interfaces.

It has a lot of components that are based on those elements. I don't know if you guys have heard of the atomic design pattern and the UI kit library kind of leans towards this approach.

We have little elements like buttons and radio boxes and headlines and bigger components are composed from those elements. It's very cool, it's easy to create new components, new elements, supply them to everybody else who wants to use it and it works great in conjunction with Vue.js.

And last but not least, Phoenix and Phoenix apps are bundled using Webpack. Webpack handles our .vue files, what those are the guys told you about Vue files, we're going to go into that a little later. And it supports asynchronous chunking, which is really awesome.

Yeah, that is the start. So Vue.js, well it's a JavaScript framework and it's used for building user interfaces.

Phoenix itself starts a single Vue instance. Phoenix provides the instance itself as well as a couple of components, components like the menu on the left, the top bar, a login functionality, all of that, a couple of components and all the other applications that

we as developers write for Phoenix are in essence Vue components or a collection of Vue components. So everything lives in one single instance. What else did I write? Down, yeah, I talked about the, I'm sorry.

And this allows for easy communication between applications. Data sharing in the front end now is one of the big and awesome features that we're going to have in Phoenix. So yeah, reactive, our smiley is kind of wondering what's reactive about.

As of now, we don't really have an awesome way to share data between front end applications. For example, I wrote the market app that fetches applications from the marketplace, installs them, but the little menu on the upper left, the menu where you have your applications listed doesn't get updated.

Why is that? Well, because the menu doesn't know about the changes. So I had to implement the update process for the menu on the top left and I kind of rewrote the whole thing.

I didn't rewrite it, but I copied the code and made the core update the upper left menu. And usually we don't want to do that. We wanted that to happen on its own. So right now we would have to pull, I guess.

So the upper left menu would have to check every other second, every so and so on seconds. Is there a new application, yes or no? Usually we just reload the whole page and it's there. But that is not the way we want to do it. So we have awkward DOM manipulation sometimes. Some guys chose to write to data attributes in DOM nodes

so other applications could read from it anyway. We want to change that and we're about to change that. There shouldn't be a question mark anyhow. Let's get reactive. What's reactive all about? And here comes Vuex into play.

The store, our global store that every application can write to and read from live, I would say. So for example I have a little demo app called The Fridge. And The Fridge usually holds a couple of items that you have in your refrigerator.

And I'm going to talk about the store implementation in a second. What it does, it has an array of fruits and it iterates over this array and writes it out to the DOM. So here, can you see my mouse? Awesome, right? It lists all the ingredients in our fridge.

Up here before our application is mounted, I'm registering my store module to the global store. And I have computed values, the fruits, it goes out to the store, to the fridge, to the fridge state and fetches the fruits.

So this function here returns the array of fruits that I have in my store. And I have a neat little method here that I come to in a second. This is the way the store looks on the fridge side. And up here I have my states, this is where I store my fruits and my vegetables and apples and everything that I really like.

I have actions, those actions can be called from within the applications to mutate the store. Well that's all fine and dandy but what does it do? We have a third application, or in this case a second application called The Housekeeper. And The Housekeeper keeps track of the fruit count that is in our fridge.

It is not related to the fridge application in any way but what it does, it goes out to the store and asks the fridge state about the amount of fruits that it has and calculates the length and writes it out to the template.

And the awesome part here is once I go back to the fridge application that doesn't know anything about The Housekeeper application, I add vegetables to my store, the array of fruit gets larger,

there should be peaches here at the end, and automatically the amount of fruits in the store got updated. In the Housekeeper application there is nothing else that I have to do, that the app has to do,

it automatically knows about the new length of the fruits and it updates the count from three to four. Kind of awesome isn't it? Awesome? Yeah? No? Thumbs up? Alright. But that's not all because we have something else. Vue.js has an internal event system so you can emit events,

you can listen to events, you can attach a payload to an event, and for example Phoenix has a component called login and what login does, that's just an abbreviation, it does a couple of things,

you have either a full screen login page that you can use or you can have a little modal that you can put, yeah I know Phoenix is not very fond of modals, it doesn't matter, it has a little modal that can overlay your application for you to log in. So what it does here is once the user logs in,

it emits an event called phoenix colon user logged in, and as an application I can listen to that event and trigger whatever I want to trigger. So for example another app called alert me, whenever the Phoenix user logged in event is triggered,

it pops up a little event saying alert the user logged in, yeah that's kind of maybe important, who knows. But something else, as an application maybe I want to have a logged in user and I can use own cloud without being logged in, for example I can use the files application and view files as a guest,

so I don't need to log in, it's a public link, but whenever I browse over to another application that needs a login and the user is logged in, is not logged in, I can go ahead and ask Phoenix for me to trigger the login event,

so I can go over and request Phoenix to display the login. So I, as an application, I don't have to write the whole logging thingy, I don't have to go out and have a modal or whatever a form and handle all that logging stuff,

what Phoenix does here, it just listens to events like request login and whenever that happens the modal pops up, I can keep the state of my application, I just log in, hit enter, I can then in turn listen again to the user logged in event and do whatever I need to do.

Awesome again, I hope. I am jumping, looks like I forgot a slide here, I hope not. Well, as the guy said, components can be written in one single .vue file

and components like parts of applications or maybe a whole application can have its less, or CSS code, its template code and the JavaScript code all in one file, so that makes it really really easy to maintain single components

and I'm just showing that you can choose other languages, well it's not a language but, well, dialects, yeah. You can use pug if you like, I'm a fan of pug because it makes, yeah, I write less lines, you can use coffee if you like that

and you can use zas or las or whatever you would like to use for CSS and the very important part is the scoped attribute over here that means that our unordered list and our list items are gonna be red

and lime in color but only in the scope of my component. Awesome again, I'm saying awesome too much. Anyway, the hot new look, let's talk a little bit about UI Kit and maybe I need to start my thingies up here again because,

oh there was a lot I wanted to say but I think I said enough so far about that. Yeah, UI Kit, in essence it's a collection as I said before of HTML and CSS snippets that you can use to develop awesome interfaces

and at this point, yeah, right now we don't usually, sorry, we don't really have assets or templates in the current own cloud that we can use. Usually people go out, copy and paste HTML from other applications

from the core from, I don't know where they find them then attach some CSS hoping that it works and maybe it does not work in IE 11 or some other weird browser but we're gonna have something else. We don't have a real good style guide yet so people try to imitate the look of own cloud as it is now

and UX style guide, yeah, we're also missing that but we're about to change a couple of those things using UI Kit which as I said is a modular front-end framework and yeah, let's go over to getuikit.com

getuikit.com and I wanted to show a couple of things namely, one second, I'm sorry for example, you want to use an alert any kind of color and whatnot

it has some little JavaScript attached to it very nice we also have things that we always use like buttons they come in every other great variety okay, I can choose buttons here

large buttons, small buttons, primary buttons, secondary buttons and the awesome part about that is that it works greatly in every browser and it usually works great in conjunction with every other UI element you have here so it takes care of padding and merging and all the little gaps that it needs

towards the other elements let's go to, yeah, something for Felix again to the modals I'm sorry to show that but we have a couple of modal integrations as well with auto-flowing inside the modals

so you can always see your save and cancel button and I'm sure it all works well in mobile devices as well so it brings a lot of CSS, it brings a lot of HTML code looking at get-uikit.com this so far is my main source of

not inspiration but of getting to know what I can do it has a lot of markup examples here so this is basically copy and paste code that you can use in your application in the future it does a couple of more things, I don't want to go into everything but here's a whole list of things you can do

oh yeah, animations are great you can attach animation classes to any other element as those elements are rendered to the DOM if you have any kind of animation class attached to it it automatically fires up that little animation so you don't have to worry about writing the CSS code

and another thing you just go ahead like the button that I showed before you just attach two classes, in this case the UK button UK stands for uikit so far, that's subject to change maybe it's going to be an OC button or something and the default button

which is the default white button with a little greyish outline and when you click on it it pops a uikit notification with a message and a status, and the status here refers to the notification being blue and you can always access the uikit methods

via this uikit and then whatever you want to use in this case the notification and yeah, Vue.js loves uikit, it works great together the current uikit2 has

I don't know, there's another framework and it's not a framework, but some kind of wrapper for Vue that uses uikit2 right now it's not there for uikit3 but as I showed you it still works fine OK, let's go over to Webpack

and Webpack is something that I haven't yet wrapped my head around very much we use it to bundle all our data like JavaScript files or Vue files or LES files or images could be a JPEG as well, into a single bundle the Webpack robot takes all that stuff

crunches it and puts it out to a bundle this bundle gets loaded on startup but yeah, it also has all the dependencies that you would use in your application the bundle can get big so loading only this

at startup might be a bit heavy so there's an awesome thing called chunking and what Webpack can do is it takes separate parts of your bundle and puts them out into a chunk and this chunk gets loaded as it's needed

for example this is what we call the boot file and the boot file is there to create the file that gets loaded on Phoenix Start so every application has a little tiny file

that should be less than, I don't know, a few kilobytes which gets loaded at the start that tells Phoenix about the applications and the plugins and the routes that my plugins or applications need so there are two ways to import to import a component from my applications

I can import it the Webpack way import button row item from this view component and in this case it's going to be a little button that lives in the sidebar of the files application so it extends this extension point over here and the component is the one that I just imported up here

and this is going to get compiled into the very first tiny loading bundle because in this case it's simply a button with, I don't know, a couple of lines of code so it's okay that this can live in this application no need to load that later

but we also have a component called demo show config that's going to be a little bit bigger in this example there are going to be a couple of libraries that we use so it's, yeah, maybe, let's say it's a megabyte still great but what I can use here I can ask Webpack to import the component

but this shows Webpack that this part over here should get chunked into its own chunk and once we use the Phoenix front end we click through the slides and when we go over to the show config application

it then loads the chunk of the app that it needs right there so it's just collecting over time all the applications, all the chunks that it needs while we are using Phoenix and yeah, we have to to export

to export the routes as well and this is usually yeah, we have to find our routes and our plugins and this is what we give to Phoenix to know about my app future music, yeah, it's who comes to music and I know that's not a very good translation

anyway, I thought it was funny at the end because you guys aren't laughing as much as I would hope yeah, there's going to be offline functionality we have some of that already works if you open up Phoenix and you get detached from your wife or whatnot

a little pop-up shows up that you're offline right now but you can still browse the file tree as it has been loaded to this point so you can go into folders, go out of folders look at files that you have already in your browser

so this kind of works right now but we need to have a heavier emphasis on that to use PVAs and maybe little applications using Cordova or Ionic or whatnot we're also going to have hopefully in the near future

a very good user experience documentation on how to use the UI elements that you just saw just using them is not not the whole UX thing there's a couple more things that you need to be aware of and we need a good documentation about that, better developer documentation

as well and we still have a few issues that we haven't solved yet, namely the chunk loading part is very awesome but right now chunk loading in combination with a view router that sometimes sometimes Phoenix doesn't find

its own chunks even though Phoenix knows where they are if you look at the network tab it loads them but it throws out an error saying it couldn't find them that's probably because I'm not a huge web pack expert and I hope some of you guys

are so maybe you can join in about that and we haven't solved the app installation itself yet, something else that we need to work on and at this point I want to invite you to the little Vue.js Phoenix workshop that I'm going to have at I guess 1 am

I don't know, maybe you guys can have a look at the schedule and we can hack a little bit, maybe we can write small applications I can show you more about Phoenix, about how Phoenix works and how to compile applications because applications, those components are compiled inside Phoenix

Phoenix also works as an SDK and every application is compiled separately and this was so we had the need of having this boot file so we kind of invented something

in order to go around not having Node.js on the server and that's about wraps it up, it was made with love and lots of time by me and I hope you guys enjoyed it and know more about Phoenix and hopefully want to use it and help create it in the future

questions? Well no

some components, oh the question I was asked if it was easy to

have a responsive UI element or responsive UI elements, do I have to write more, do I have to do more and I would say yes and no most greater components are responsive from the get go but you can use like for example maybe I can go back

to what I did here hopefully there's a great system inside of Vue.js by the way all of that that you see here is written

using UIKit and it has I would say maybe 10 or 15 lines of additional CSS code and there are a couple of classes like UK-width 1, UK-width 1-2 so you really have to decide how to use your

breakpoints there are a couple of breakpoints that are in place already with defined width, I don't know what the plural is and then you can decide maybe to the sidebar yeah this needs to be I don't know the quarter size of the screen

and on my iPad I want to have an even smaller or a bit larger maybe down below so what you usually do is you just attach more classes and you need to wrap your head around a little bit this class over here needs to work with the other class over here so if you have items side by side

both can't be 100% width because then they would be in other places yeah it's yeah wrapping your head around it a little bit knowing CSS well helps a lot but there's a lot of stuff you can read from

any more questions that I can yeah yeah this is the Phoenix frontend it's running on my local machine and I'm logging in right now to the demo.owncloud.com instance

and right now it says welcome we love you I don't know why I put that in but it sticks to this day yeah this over here the top bar that's part of Phoenix the sidebar the menu over here that's part of Phoenix as well when I'm saying part of Phoenix it's a component that

Phoenix provides for everyone to use the login on the upper right as well this little icon here may not be the greatest item in this case but this is an extension this application called serve stats has a full screen a full screen app as well

and it brings a little plugin and the plugin plugs in at the upper right corner and tells you about the server URL and a couple of things as you can see we have a demo and the server status and if a transition between those applications that's seamless so there's no reloading

PVA action going on here the demo app as well showing you the current configuration file and this application has two extension points one above and one below and the serve stat plugin plugs into the plugin point below so those applications over here

they just show how to use extension points how to extend those extension points let's go back to the files app I have a little folder over here and yet again the demo application just plugs in to this little list over here and tells you to have fun with folder number one

and as I said before all of this is written in Vue.js using UIKit the filter is not working the filter is just for it does nothing, absolutely nothing

the sidebar is a separate component within the files app and as you can see it reacts well to any kind of changes there's no manual updating, no manual fetching information on what file has been selected and it just does that automatically

lot of magic going on yeah so far it's gonna change we haven't come around to everything yet but this is over here is about to change might only look like this

in the future, anyone else? yeah, angular the question was did we think about using angular no, never

at the very beginning I thought or maybe we thought about using the facebook thingy react, yeah and there was I don't know there was back then an issue about licensing and we didn't know if we wanted to use it Felix came forward yeah, anyway Felix came

forward and said there's an awesome thing called Vue and we have a mutual friend that told us about Vue I guess and then we said let's do Vue, Vue is awesome and this is one of my first one of my first, not the first, one of my first

greater Vue.js product so I'm still learning as well I don't know everything especially about Webpack so I hope you guys can help with Webpack but yeah things are gonna go forward from now on

exactly right should I repeat, Vue.js is awesome

the rest sucks ass yeah angular is from my point of view angular it's a bit harder and Vue.js is one of the easiest JavaScript frameworks I've seen so far and there was another question up there

there will be a lot of changes also on the API level

to support Phoenix and the iOS client

so we will learn with building the clients and we will learn by talking to you and to others building clients or applications based on OnCloud yeah of course, so some APIs are really old in OnCloud and it's a project living for some time this is basically pain for us

we know that legacy APIs are very good and it's not state of the art what we have on the API level and we will change that, I think Winston is really eager and striving for new technologies also on the API level and I don't know how they will look like

in two or three months but they will develop very quickly we will document everything we will have versioning for the API so we will do it in a proper way, we will not break everything apart and remove the old stuff, we will just have we will do it

with care and love and I think your question is very good about let's also have new APIs, this is why the Phoenix yeah exactly so this is exactly how we see that that the Phoenix is just another client and

strategically it's very cool to have the client, the web client split from the core backend because we can maintain both parts better and we can design the API much better and this is a big chance also for the server core, it becomes smaller and we can maintain it better, we can release it

independently of the frontend, we can have a better QA, also the API level is used for testing a lot so all of this gets more and more easy for us yes and I bet you want to have better APIs for the Smashbox testing also

okay louder again

the Phoenix is just, if you compile the whole code you get just HTML and JavaScript files

and a bit of CSS and stuff so you can iterate everyday and get a new frontend and it's just okay so we will deliver the web frontend client in two ways this is also very interesting

it's a standalone web frontend that means you can just put it in your server wherever you want on a different machine than the own cloud server basically or on the same and we will deliver it as an app so an own cloud app will be able to just ship the whole frontend and this is just because it's

working and it's easy the app framework of own cloud is very flexible and can just do it so we can we can deliver the whole web frontend as an own cloud app and if you want you can just not install the app and have your web frontend installed in multiple other servers if you want on several hosts you can scale it out very

nicely that's all not a problem it will be offline capable so the whole state in the Vue X will live in your browser and you can cut off your internet connection and the state will be there so you can't load the latest file of course of the backend server but you can use the

information you have already so as far as that you can think of progressive apps you can make desktop clients out of that maybe to browse stuff don't know if that is really what you need but all this technology is ready for that so you could even make a desktop application out of that

we don't think so far to make mobile apps out of that so we will keep our mobile apps we are building a new iOS app right now so we continue to stick to that strategy but maybe there's potential for some parts I don't know I don't know yet you will play around with that right you will tell us

and about the API about the API changes there's another project that was written last year during the Google Summer of Code the JavaScript own cloud client and it takes JSON converts it

over to web.dev talks to the backend receives web.dev back and translates it to JSON and this library is also available in Phoenix so if there are any changes in the API on the server side the JavaScript own cloud clients get updated and you

as an app developer you don't have to react to those changes the changes will be done in the library and you can still use OC client log in or log out or fetch this and fetch that so changes will be made elsewhere if API changes happen makes it easier

yeah? who said no? the guy who needs to deploy it I'm fond of them let's say there are a couple of things that we are not going to use that I would love to use

maybe you guys would love to use you can write an app and use web sockets so it's completely independent of that the Phoenix SDK will not bring it from scratch that is not planned right now you can convince us of course

it's very reactive and dynamic already so we will need to find some reasons for doing that of course so maybe we can talk a bit about the next steps in the Phoenix project I said there will be a development sprint so there will be a team working on the Phoenix project and you are welcome to join the team

the communication about all of that is on talkoncloud.com it's a public chat you can register there and join the whole communication and the whole staff and team to work together there's a

Phoenix channel where you can join and this is all about the Phoenix project so you can join the you can find the code on github and you can find all the communication in the chat so there's more the project next steps will be the next alpha release of the Phoenix

yes there's going to be an alpha release alpha 0.1.0 in essence it's going to be what I have showed you so far it's mainly browsing files from the demo

instance it's going to be in applications you can download it from the market install it and hopefully we can do this this week next week and after that there's going to be a beta and you guys

can come forward and test it and use it we need to lay down the road that we would like to have

night owl we're using a night owl in conjunction with I need to have a look at that I heard Cyprus from Carsten

so there are different ones we have started with one we have not chosen maybe the final we will see what's living there in the future you can see the status of the project and the feature specs of course and the functionalities

and I think we had also a nice project going on in collaboration around the Phoenix project and there was a Google Summer of Code project going on you were working closely together I was working with Ivata

he was working for the GSoC project in conjunction with CERN and he developed most of the current state that we have here, the file browsing all the implementation, well most of the implementation

of creating folders and stuff this is part of the next talk actually he's here and he will show you what he's done on the GSoC project now so please welcome, come here if there's anymore questions if there's anymore questions on the Phoenix

we have that after lunch there's a Phoenix workshop so we want to sit down with you giving you feedback, listening to you or you as a developer if you want to join the project we will introduce around the details also how to build and how to work

about the style guides or whatever you are interested in so that we can kick start the project together with you in the development