Rust Programming Language RustFest Paris 2018, 28 May 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: RustFest Paris 2018 - Yew a Rust+WebAssembly framework for client-side web apps by Denis Kolodin

Description

Here is Denis Kolodin for you Talk
about his framework called 'yew'
His daily work fits
to a fury of bits
and a Rust blockchain speed-trading crew

This is a talk about the architecture of yew — a Rust framework for frontend development, inspired by Elm and ReactJS and designed for creating single-page webapps with Rust. You will get to know how it was created: wasm compilation issues, JSX-like templates created with a pure Rust macro, how lifetime rules helps to avoid copying of the model, and how to create a framework without a garbage collector to compete in the JavaScript world.

(Limerick by @llogiq)

https://paris.rustfest.eu/sessions/yew-the-rust-webassembly-web-app-framework

A

Here is Dennis coloring, for you.

A

Talking about his framework called you, his daily work fits to a fury of bits and rust. Blockchains be trading crew.

B

Hi Ron, yes, I'm, Denis, Carradine and I work at axonal project in billiary company and today, I'm here to introduce, which is something special I will show you how to create front-end application completely with rust and no one line of JavaScript code.

B

Our agenda for today is quite simple.

B

At first I have I also you what is you will have an introduction about it and after that, I show you how to create a minimal application using this framework, what we will talk about what you should know to use this framework effectively and in the last topic, I will explain and show you how I created the framework from the first steps and to the final state which you can see on the github, a ok. Let's start with introduction of you and a minimal application.

B

You is a ready to use web assembly framework I created a half year ago, I released it 16 December of last year, and it was exactly four days up from my birthday, as a community community gave a great present great gift. For me, the project called I collected four thousand stars for today, it's open source and it released under two licenses which popular in rust, community, MIT for commercial proposes and apache license for GPL compatible projects.

B

You can follow this link, which you can see on the screen on the top of the slide to get more information about this. The present feature of the framework is a j6, like templates.

B

Let you put HTML templates directly into your code inside Roz code and it looks like rekt jazz framework, but some some features I was inspired by L.

B

It supports pure web assembly compilation target and you could compile front-end application without em scripting into a pure web as assembly and a bytecode, and you could find many examples on the project's page.

B

Ok, let's start with minimal application at first, you should create a simple struck: I call it mobile with one field, I called value and to turn it into a user interface component. You should implement a component trade where this trade could create instances of this of the component, and that's why it has to contain create method which returns a new campaign instance.

B

Now we can add behavior to this company because we have a struct and now we should add a messages.

B

We could add an enumeration with different events inside and this events needs changes of the model it contains in update method of the sky of the component trade and in case of increment event, it it will add, 1 to a very field in a case of decrement. It will subtract one from models field.

B

The service should render flag which trigger trigger air rendering of this company, and if you set it to true, the company will be render it again and if you return false, the range surrendering will be skipped and it is useful if you want to change hidden fields of your model.

B

Let's look: how to create looking fill of our brand new campaign and to to implement to make it renderable you have to implement, render render boot trade, which contains view method of this method, should return virtual Dom tree, and it's simple to make it with special macro, which included in the framework HTML micron.

B

It allows you to use HTML notation inside the wrath code and you could pull HTML text directly into your code.

B

You can also see the click handlers in the buttons and they send messages into update function back when you click on this button. In the browser to stop start, this application, you have to add main function, and you should just initialize this framework. I create a context. I created empty context here and use unit type, but you could create more complex contexts if you need more services.

B

I also created application instance here and mount it into to the real Dom element. I used body tag, but you could mount the application to any element of the Dom tree and stop the loop before I show you the result. How it looks have looks like let's see how to build this application to build this code, you you need a special cantillation and tag it and you could install install it with rust, app to add web assembly unknown. Take it.

B

You also may need in scripting target, and it might come in handy and I will describe why it's why you may need M script. A little later, I also recommend you to install carga web tool. It help you to watch, build and run your code, create a binary grade and food code. I showed you in to enter source folder of your project and run it with cargo web to set necessary target.

B

I use pure web as an assembly target without am scripting because it works faster and the cargo bag tool will bootstrap a web server for your application, and it will look like this.

B

You can see in the browser the application and you could push these buttons and see that Dom tree will be updated on every event.

B

Alice Lee deep into extra features you should know to use the framework effectively Campanian sleeve in a context. Environment and context is a short state.

B

You could add requirements for the context. Even a simple button could require something like a timer or network connection.

B

For example, we may need a WS connection for our company and an implementation of required trade. We should implement it to satisfy the requirements of our company. You couldn't compile this code if your context doesn't fit your requirements.

B

You contains some services which you could use in the context.

B

Timeout service, which said use, set timeout a function of JavaScript and will send a single message when timer elapsed, interval service you, which use set, interval function of JavaScript and we'll send a sequence of messages to your component, fetch, let you connect connect to HTTP servers and WebSocket service.

B

Let you connect by a WebSocket protocol and to your web server. You also could implement your own service and even publish it on, creates IO and use it from the central repository.

B

Even could put confidence in director into templates. This feature uses Road types without any wrappers. You could use I put counter into the template, like you can do in. If you familiar with rag, jazz and jazz vi, template language and company could contain properties. Properties is a simple struct use. Pure rust types inside templates said types you need, and you could use these types in the template and also you have to implement default trade because all properties, optional.

B

Also, the framework uses virtual Dom or presentation and first view method, call a rendering rendering.

B

There so Dom over real Dom tree in a second, a rendering call creates a patch which applied to the existing Dom tree and only changes. Things will be changed on real Dom tree.

B

It it works fast and reactive.

B

There are five types of no nodes which you can use, first, is virtual company and which holds a component struct inside virtual list, which has a list of other nodes, and it will put it as a fragment into the Dom tree virtual Tech, which produces a real Dom element and virtual text, which produces a real text node and the last type of node is a virtual reference which keeps a reference to an existing element. The last is useful for embedding JavaScript components into a visual tree.

B

If JavaScript create element, you could use reference to put it directly into your real rendered Dom tree.

B

To create to collect and build a tree, you could use three approaches. First is HTML macro. This is the common and the simplest way to create the tree.

B

You can also create the tree manually and you could create a parser and first text like mark up any markup like markdown, for example, and create visual tree from markdown representation to a virtual Dom representation and render it over the real Dom tree, and it also will works effectively.

B

This is a way of creation of this framework. In a few slides. You should remember that web assembly works in a sandbox and you have to write some integration code.

B

If you do it manually, it's impossible to go fast and create a good framework, because you should waste time for creating every band binding to JavaScript, to send callbacks to JavaScript and to call web assembly from JavaScript, and it's it's a hard way, but there is a more simple way to use.

B

Std web great and I replaced that raw approach with SD web crate. It provides, provides browsers, API and contains awesome.js macro, which helps you to create callbacks writing JavaScript code into the rest code.

B

First version of the framework contains some JavaScript code, and now it was replaced with cells and reference counters, and there is no any JavaScript code in the sources over the framework.

B

Html macro was another challenge. I tried to purse at first I tried to purse whole tag cursory, but it exceeded recursion limits of the compiler to fast. Actually, it doesn't work. This probably doesn't work and I replaced it with separate rules for opening tag and for closing text and, as add some special rules for passing attributes.

B

Now, macro implementation holds a stack inside and it creates an element for every opening tag and put the rest into the previous element on every closing tag, and in this way HTML micro collects and builds a visual tree representation using stack and rules for opening, closing tags and HBU's.

B

You can develop and compile front-end applications with rust and nothing more. It works, but there are some restriction restrictions. First, some crates won't work in a simple environment.

B

You you don't have threads, but you could use web workers API I, but I can't ambit and use grades like Diane programming language, because it's extensible excessively uses threads and I can't compile it into web assembly it. It won't work in the browser, but maybe in another web assembly environment, but not in the browsers there are. There is no system API, it's not available, but you could emulate some with inscription. If you compile your application with inscription- and some crates will work of that, but it takes some overhead for him. Scoob.

B

The backing is a hard topic and bugger exists, but doesn't work properly. You could use a logging where I took like a business logic of your front-end application and I. Remember the things that's hard to debug low level cases.

B

You can use a textual representation of web assembly for that, but it's really hard think back low level integrations of with web assembly.

B

What is the next I want to do with the framework?

B

The first I want to improve integrations with JavaScript I want to adapt and cover popular JavaScript. Libraries provide examples: how to use existent JavaScript files, because just world is huge and we could reuse useful libraries which exists in that world.

B

I also want to do some research with type it CSS and I want to try, add more reusable components to make creating front-end application simpler and faster by existing components which you could download from crates I and use it in your application and put it into your templates as a components like front-end developers who uses Jess, Jess, X and Reggie's uses this approach, and you could use, creates and put components directly into templates benchmarks is the most demanded top topic, but I haven't checked it in the right way, because it's a little tricky a little hard topic.

B

I will do it in the future and I believe it could hit JavaScript in in many cases, because web rust and webassembly don't use garbage, collector and other overheads and I believe it. It will work fast, but I haven't been Mitch McConnell now and I can't answer the question: how fast is it I want to involve more contributors to the project, search external contributors already sent their pull requests and I've noticed them.

B

You are welcome with your changes too, and finally, I want to write guides for rookies and improve the documentation of the framework.

B

Maybe even I will write a book about using you in how to create your front-end application, but for today you could see how to use the framework in examples in the repository of them all the framework and I believe for aroused developers. It's it's enough to start using and use our tool.

B

Examples is a good teacher for the loving something something you remember, the things that rust is ready for creating front and applications. It's real! It's true! You can do this right now start start for today, and you should this.

B

You should use this advantage and it's it's really not hard. You could use your own, the raht compiler you already have on the computer and start using disadvantages from today. Thank you.

B

Yeah, you could have some questions. You could ask some about front-end development about creating the framework, maybe using it, for your projects. I.

B

Will have to answer your questions. You're welcome. Thank.

C

You so you stands in a gigantic ecosystem of other libraries that do a similar thing with components. Is there a plan for integrating react, components, say or calling or embedding them in new programs.

B

Did you say I said about existing correct, come a component story in integrate existing companies right I haven't tried this, but I think you could you could do it with virtual reference node if you bootstrap create the instance of direct component and put it into the virtual reference believe it, it will work.

D

Years of computer architecture do something similar to react and over here on the right, III.

B

D

Do you see the potential to build something based on you, something similar to react native, so.

E

You can use.

D

It to build applications that are both web and native compatible.

B

Iii created this framework when I I used to erect a wreck Jess, but but I I inspired visit a little and I, don't see so far to integral with with that, but but actually I created this framework.

B

When I have some issues with ell programming language and after that, when I created the framework which works similar like L I found that I could replace templates, which looks like which, which could work like rect, rect, Jess template languages, but a language but in question with resurrect it's not because you framework has own direction of improve, improving and, for example, now I'm considering to use actors which I I, don't I haven't seen another frameworks. I I want to try to use actors to.

B

Run some tasks in parallel and you could create your campaigns, which will interact by message passing and with you from Brooke. You could create really parallel and safe application for the browser.

E

Thank you, um I wanted to ask you: do you have any advice for like selling moving to a framework like this from traditional JavaScript frameworks, for maybe bosses who have no idea what you're talking about.

B

It's it's it's. Maybe it's a boy or not Sam. What questions I I!

B

Don't know how to answer this exactly but I I don't go to to beat other and to compete with other frameworks and I see I've see that you has on direction and for.

B

Inter person with other frameworks, I think it could replay replace JavaScript frameworks for some cases, but actually you have to provide JavaScript, environment and web.

B

You should remember that that web assembly lives in in the sandbox, and you have to use you need to feed that sandbox with JavaScript API and actually web assembly represented frameworks, in any case, we'll use, JavaScript, API and and I think the good future position of the framework when you could create, with you components and ambled it into existing applications, but add some features which is simpler to implement with rust, like capital, cryptography and other high-performance things, and you could create a component which solves we feel solve issues which we use fire flesh for that.

F

I hope it will be short, so the main point is: have you tried to make the backhand swappable in the sense now it is a framework that manipulates HTML. It could manipulate any kind of tree like do 3d, rendering or a scene graph or a set of web sockets or whatever have you have you taught the backend as a swappable thing.

B

As one of the main feature for the framework is, is creating something like several server-side, rendering and and I think it's possible to to use framework in two in two cases, when you could interact directly with your server or create you application and compile it into a product which serves your HTML like PHP, does it or other thing and they will sense static templates which will be generated generated and when you push some buttons, it will fire events back to the server when the companies will be rendered again and will return as static static, page web patient.

B

There are some cases and I want to implement some interesting features about better into integrations with the hands.