JavaScript lightning talks
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Gasc, Ludovic et al.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 490 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/46967 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 202089 / 490
4
7
9
10
14
15
16
25
26
29
31
33
34
35
37
40
41
42
43
45
46
47
50
51
52
53
54
58
60
64
65
66
67
70
71
72
74
75
76
77
78
82
83
84
86
89
90
93
94
95
96
98
100
101
105
106
109
110
116
118
123
124
130
135
137
141
142
144
146
151
154
157
159
164
166
167
169
172
174
178
182
184
185
186
187
189
190
191
192
193
194
195
200
202
203
204
205
206
207
208
211
212
214
218
222
225
228
230
232
233
235
236
240
242
244
249
250
251
253
254
258
261
262
266
267
268
271
273
274
275
278
280
281
282
283
284
285
286
288
289
290
291
293
295
296
297
298
301
302
303
305
306
307
310
311
315
317
318
319
328
333
350
353
354
356
359
360
361
370
372
373
374
375
379
380
381
383
385
386
387
388
391
393
394
395
397
398
399
401
409
410
411
414
420
421
422
423
424
425
427
429
430
434
438
439
444
449
450
454
457
458
459
460
461
464
465
466
468
469
470
471
472
480
484
486
487
489
490
00:00
Formal languageComputer hardwareSoftware engineeringLibrary (computing)Extension (kinesiology)Pairwise comparisonProjective planeAeroelasticityGraphical user interfaceoutputOpen sourceDifferent (Kate Ryan album)Android (robot)Software developerComputer architectureSoftwareLimit (category theory)AeroelasticityoutputSoftware developerComputer animation
02:10
CodeComputer hardwareType theoryFunctional (mathematics)ResultantDataflowSystem callAeroelasticityBridging (networking)Module (mathematics)GUI widgetDifferent (Kate Ryan album)Computing platformRight angleAndroid (robot)Mobile appCodeBridging (networking)View (database)Computing platformService (economics)Computer animation
06:12
SicComputer animation
06:42
Software frameworkMultiplication signRight angleComputer animation
07:11
CodeCodeStructural loadConnectivity (graph theory)Software frameworkOpen sourceCode
08:04
Order (biology)Variable (mathematics)State of matterBitoutputKeyboard shortcutComputer virusConnectivity (graph theory)
08:38
QuicksortConnectivity (graph theory)CuboidElement (mathematics)Library (computing)BuildingVariable (mathematics)CompilerGroup actionPower (physics)Connectivity (graph theory)CollisionSoftware frameworkDefault (computer science)Bookmark (World Wide Web)Computer animation
09:54
Library (computing)Variable (mathematics)InternetworkingConnectivity (graph theory)Declarative programmingStatement (computer science)Sign (mathematics)Block (periodic table)1 (number)Programmable read-only memoryIntelElectronic data interchangeRandomizationDeclarative programmingStatement (computer science)FluxBit rateBlock (periodic table)Computer animationSource code
11:34
InternetworkingSoftwareMoment of inertiaPiComputer virusConnectivity (graph theory)Data storage deviceComputer animation
12:02
BitStructural loadPower (physics)Connectivity (graph theory)Data storage devicePower (physics)Computer virusConnectivity (graph theory)Mobile WebXMLComputer animation
12:33
BitArtistic renderingCuboidCartesian coordinate systemSoftware frameworkMobile appBuildingSoftware testingPower (physics)Suite (music)
12:56
Order (biology)Variable (mathematics)State of matterHydraulic jumpRevision controlConnectivity (graph theory)Proper mapWeb browserSoftware frameworkWritingVolumenvisualisierungIdeal (ethics)Software frameworkOverhead (computing)VirtualizationCross-site scriptingSoftware developerComputer animationSource code
15:14
SoftwareComputer programmingBitFunctional (mathematics)Object-oriented programmingCartesian coordinate systemEqualiser (mathematics)Connectivity (graph theory)Computer animation
16:16
Category of beingFlow separationBenchmarkVisualization (computer graphics)Connectivity (graph theory)Arithmetic progressionData miningView (database)WebsiteSuite (music)Rational numberVisualization (computer graphics)Computer animation
17:31
BenchmarkMetric systemPairwise comparisonSoftware frameworkIn-Memory-DatenbankXMLComputer animationSource code
18:09
CodeLine (geometry)Cartesian coordinate systemRight angleCodeLine (geometry)Convex hullSoftware frameworkXMLComputer animation
18:47
Library (computing)Structural loadPay televisionData storage deviceCartesian coordinate systemDeutscher FilmpreisBenchmarkConnectivity (graph theory)Computer animation
19:13
Library (computing)State of matterPhysical systemConnectivity (graph theory)Exterior algebraHill differential equationComputer virusData storage deviceComputer animation
20:11
Software testingComputer virusComputer animation
20:40
BitSlide ruleLaptopDisk read-and-write headMultiplication signDemo (music)Computer animation
22:25
Formal languageImplementationComputer programmingProduct (business)Scheduling (computing)Menu (computing)Pointer (computer programming)Cartesian coordinate systemEvent horizonEndliche ModelltheorieMobile WebComputer animation
22:51
CodeVideo gameFormal languageProgramming languageString (computer science)Computer programmingType theoryVariable (mathematics)Functional programmingVideoconferencingArithmetic meanProjective planeSubsetWeb browserJava appletElectronic mailing listFile formatVideo game consoleWebsiteWeb 2.0Pattern languageFormal languageComputer programmingCompilerMaxima and minimaExecution unitMatching (graph theory)Pattern matchingArray data structureSource codeComputing platformNo free lunch in search and optimizationComputer animation
25:56
CodeFormal languageComputer programmingLibrary (computing)Macro (computer science)Equivalence relationArithmetic meanBitCompilerProjective planeCASE <Informatik>Flash memoryOpen source2 (number)CodeNetwork topologyLibrary (computing)Type theoryMacro (computer science)Fluid staticsRing (mathematics)Functional (mathematics)Adelic algebraic groupMatching (graph theory)Pattern matchingInsertion lossSource codeOpen sourceSelectivity (electronic)Abstract syntax treeRule of inferenceStandard deviationPattern languageComputer animationSource code
28:07
TwitterMedical imagingAnalytic setTwin primeResultantLaurent seriesService (economics)TwitterFacebookComputer animation
28:30
Open setPoint cloudOpen source
Transcript: English(auto-generated)
00:06
You can start. Hi. Hello everyone. I'm Taim. I'm software engineer at Signify, formerly Philips Lighting. So, my quick, my light talk is about Flutter and React Native. It's not a comparison.
00:20
It's just, I'm not comparing. It's just the end. It was VS, then I removed them. I put end. I just want to clarify what's different between them. So, let's first speak about how we used to develop a mobile app before. So, there is native solution, and that is also a hybrid solution. So, for native solution,
00:41
so you have two most used platforms, Android and iOS. So, for Android, you have your kernel, and then you have your hardware, and then you communicate with the hardware with some C and C++ library, and then they see C++ library provide an API, for example, for Android, for Java, and Kotlin,
01:00
and for iOS is most same, but with another language like Swift and Objective-C. But people start to, development becomes really hard, so you cannot do something really quick. So, we got another solution, which is a hybrid solution. So, the idea is that you have an app, but the inside app, you just run an extension of a browser,
01:23
for example, Chrome or something, and then you write to your JavaScript and your CSS, and actually these JavaScript CSS communicate with the native APIs. But the issue with this one is that people start really feeling that the app, it's really slow, because you are loading a lot of JavaScript and CSS in your app,
01:42
and then there is a latency and there is an issue. So, people start to think about something new, not native and not a hybrid solution. So, they come with compile to a native solution. It's actually started to direct native, it's an open source project from Facebook,
02:01
and then there's another solution like Flutter or NativeScript. So, let's take a look at how actually React Native works. So, React Native use React, React is a JavaScript library, which means we will use JavaScript. So, the idea that you use JavaScript or Flow or Type for typing.
02:23
So, you have your app, actually your app create a bridge. So, we know that JavaScript can communicate with low, example with C++ and C. So, the idea you have a bridge which exposes native APIs. So, you see, actually that's why they call it React Native.
02:40
The idea is that you are not rewriting, but that you are calling the real native widget and the real native API. So, the example, I want to use Bluetooth. So, what I need to do, I need to write a Bluetooth module for Android, let's say from Java, and then for Objective-C or Swift for iOS,
03:00
and then I call them to the bridge which React Native built it. So, I write the React Native model, then you will call this function. So, it's great solution, and actually it's still relevant, biggest company using it, but people start to have issue that we are writing one code to get two apps, right?
03:22
But we will have, we're starting to get an issue that sometime we write one code and then you expect to run the same, but you've got different result. This is because of the bridge. Actually, bridge does not make sure that you will have right result, but why? Because when you run an app,
03:41
actually you are running it in different devices, different API level, different versions, so you are not really make sure that the UI will be the same. So, also from here, people start thinking about the new solutions. So, comes the flutter solution. So, they say, okay, we're writing one code
04:02
to run two different platforms. So, why we just make sure that the UI is not depend on the platforms? Actually, we don't call UI APIs. Let's create our own API, which is rendering the UI,
04:22
and then let's call the Native only one we want to use in hardware API, like Bluetooth or something. So, what actually they did, actually there is a Skia Canvas engine, which is used in Chrome. They actually used it to build the UI in the app. So, what they do, they actually use Dart to build the UI.
04:42
So, the whole Flutter app UI is just in Canvas, which is rebranded and redrawed. And when they need to draw a button or anything, everything is not platform-specific, which is not React Native. React Native called the button from Android. But here, we actually recreate our UI.
05:04
But okay, you say, but how we can now communicate with APIs? So, actually they said, let's use this for building the Native, and then let's call the Native API. So, they create the channels, which is like a normal channel to communicate from your Dart code to iOS, Android.
05:25
The same thing what React Native is doing, but only for Native API. So, we don't use UI. So, we don't expose UI. Let's keep UI in Dart, and then we expose the Native API through these two solutions.
05:45
Yes? Actually, it was this. Yeah, thanks. Thank you. Yeah. We have a few minutes for questions. Do you have some questions about this talk?
06:02
No? Okay, thanks. Next speaker.
06:24
Okay. Okay, maybe put that in your pocket. Okay. Yeah.
06:42
And you have 10, even 15 minutes in that. Okay, yeah. Don't be cool, and I will give you the time. I will show you how many times, how many minutes. Okay. All right. Let's go, cool.
07:04
Hello? Hi, I'm Dexter. Today I'm gonna talk about my favorite framework for a couple of years. It's a new-ish framework. It's getting popular. That's good. It's fully open source. It's called Svelte,
07:20
and it is better than all the other frameworks, because you write less code. You make better code, it's more readable, and you don't have to worry about adding extra codes to your application,
07:40
which might be heavy. Every code you write will be specifically tailored for your components, so you don't have extra added loads to your application, which you don't need. I didn't really prepare this talk, but just go at it. So, Svelte component looks like this.
08:02
Can you see this? Where you define your variables inside a scope like you would do in plain JavaScript, but it's actually a bit special. Whenever this value changes, it would update this name. So, if I create an input, and I bind the value
08:21
of the input to this name variable, I get an input, and whenever I change this, it will update. It's very nice. No extra added benefit, no this.set state or having to have React hooks in order to do this. It's very nice.
08:40
You get cells out of the box, and those are scoped to your component. So, whenever you have a nested component, which also has the same structure, it doesn't leak. These styles don't affect the nested element. It's pretty cool.
09:01
You trigger efficiently, like I showed. You can have an onClick handler where you just update the state, it works. And there's quite nice things in Svelte ecosystem where you have a bunch of animations and other useful things you want to use,
09:21
which are sort of supported out of the box. Very easy to add. Well, what you do is, whenever this if book triggers, for instance, the in expand will make sure this path will expand after 400 milliseconds
09:40
because the path also first will draw. So, there's a lot of examples and much more involved things. There's something wrong with the internet.
10:00
But I wanted to show you reactive assignments and declarations. Oh wait, these ones. Whereas, with our dollar sign semicolon, the label statement in JavaScript is all plain JavaScript, but it's special in Svelte where this will be recomputed
10:20
whenever the used variables change. So, whenever this updates, it will automatically rerun this code or assign it to the variable, and it's all done. You can make more complicated statements, like an if block, you can click it
10:41
and you'll get an alert. There are if blocks, if blocks. There's also some special syntax for promises to have an await scope, like here.
11:01
And it's all very simple, very readable. Like any, I did not show you this, like you can nest components, if it loads. You can nest components because it's a component library.
11:24
Then there are stores.
11:44
We do need internet for it. Stores, oh well.
12:08
Stores are very useful. They look like React hooks, but they're a bit more useful. But stuff doesn't load.
12:20
Anywho, there's also this Svelte native setup where it's just Svelte, but it powers native components. I haven't really used this, but it works quite well. I heard. And then there's Sepr, Sepr is this app framework where you can build fully-fledged applications with routing and surface-height rendering.
12:43
You can preload things, it works out of the box. It's a bit like Nuxt and Next, if you know these from the Vue and React worlds. It works really well. It's still alpha, but it's very solid. And then there are a bunch of nice posts
13:01
talking about Svelte. And I think this is an important thing. Like Vue and React use virtual DOM in order to update your state. Svelte doesn't. It compiles to plain JavaScript where it just updates the DOM directly based on what has changed. And it doesn't need to figure out what has changed because you updated a new virtual DOM.
13:22
This virtual DOM, you have to iterate over all the state and this will, this is costly. You don't have to do this if you know what's gonna update whenever you change a certain variable. And Svelte knows this because it's compiled. There are a bunch of things.
13:41
But I guess that's it. Any questions? Hi, thanks for this great framework. My question is that Sol React uses virtual DOM because they said that managing the DOM is really costly.
14:01
And Svelte also manages DOM. They do manage DOM, but also React needs to manage the DOM because how do you update the DOM if you don't want to manage the DOM? You always need to go to the DOM in order to push your state. React does this, Vue does this. They need to do this because they work with the DOM. Updating the DOM is not as costly as it used to be.
14:22
Browsers are much more efficient. It is tricky maintaining this state properly. And that's why they sort of say, render everything and just apply what has changed because it's much easier to just do everything again instead of just knowing what has changed. But Svelte does know what has changed.
14:40
So it can update the DOM accordingly. Hey, which framework have you used before using Svelte? I've used Angular, React, and Vue. Okay, and what is the main reason why you switched to Svelte if you would say one main thing? Or is it just because it's the new hype framework which came out and you're gonna jump on it?
15:02
Or is there really something that says, okay, now this is... It's the writing less code. And the way, and I started with Svelte in version one. Now we're at version three. So the, how it looks like writing the components and like this, you can just describe a variable
15:23
and update it. Like this way is very close to just plain JavaScript. Okay, to me it looks a bit like how Vue just does it. But in Vue you do need to say this.name equals... Yeah, true, but... Where you always have this variable
15:42
which is sort of weird and funky. The special this? The special this, yes. You don't need it anymore in React because everything is in a scope. Like I prefer the functional style of programming instead of the object-oriented style of programming. Last question. Can I ask what kind of application do you write?
16:00
I mean what kind of software do you build with Svelte? Is it small application or really large? Mediocre or middle-sized, medium-sized applications. But you can, you also use it for small applications. I use it for making visualizations as well and with SVG, I don't know if it will load.
16:27
These things are all mine in Svelte and the site runs on separate. Okay, nice, thank you.
16:44
Does it work with TypeScript? So they're working on it. I believe some guys have made it work, but it's still a work in progress. But I think if you really want to, you could get to write your components in TypeScript and have typed properties and stuff like that.
17:02
It looks pretty sweet. I haven't really touched TypeScript myself, so... Do you have any benchmark of Svelte versus the no React view or other frameworks? So what was the question? If you have any benchmark of Svelte.
17:21
There are benchmarks. I think they're also in the normal benchmark suites. I'm not that interested in doing benchmarking, but it should be at Google away.
18:04
I think it's still Svelte, yeah. So it's also the Olog, this is old. Is it, what? Yeah, so this is the,
18:21
it makes really small applications. Not because your application is small, but because it writes out less code. Lines of code, it's right there.
18:47
One more question. So for complex state, do we need a library for it? And for custom syntax, do you need the bubble plugin?
19:00
No, there is a store library inside of Svelte, and it exposes a subscription style store, which you can use inside of the application. I tried to show you, but it wasn't loading. This is the way you want to share, or you can use any library if you want.
19:21
You can use Redux or whatever you like, but this is the Svelte way of doing sharing state between components. No more questions?
19:40
Hello, I heard that Svelte doesn't use Webpack, but some alternative to it. Is there some reason for that? So Svelte is agnostic to either built or set up, but you can use Webpack or Rollup or other built systems.
20:01
No reason for that, yeah? There's no reason, but it also just works with Webpack. No more questions? Is there a way to do unit testing,
20:22
like testing those components? There is, but I can't really inform you about that. No more questions? Okay, thanks. Thank you.
20:42
Thank you, Bob. We're not going to go through the lighting talk. So I'm sure there is one person here who does have a project, but who is a little bit unsure. So you have, I don't know, how many are we? Like 150, 100, something like this? So now is your chance.
21:02
We do have a little bit of time. We have like five minutes or so. So you don't have any slides. You might have a GitHub. You might have a live demo or something. You just need HDMI. We're not even have my laptop. So who wants to step in? Because I know some of you have projects.
21:24
Don't, yeah, I see heads nodding. Okay, I'll put, okay, too late, guys. You need to act fast.
21:41
Okay, at the same time, please live on this side. And when the people has left, you can enter. Please live by this side. Can you browse them with the connection?
22:00
Yeah, yeah, yeah. Thanks.
22:22
At the same time, yeah, this is in your pocket.
22:42
So if you move, do move, but be quiet because we'll have another little lighting talk. It's impromptu. So if you see any like silly notifications or whatnot, it's my browser. Don't judge me. At least don't judge that person, please. But hopefully nothing silly will just show up.
23:00
Yeah, I just, I don't know if you, you hear me? No. No. Can you close it? Like that. Can you hear me? Yeah. Yeah? Then you hold it. Maybe. Like that. Yeah. I'm here this morning. I heard about JavaScript and TypeScript,
23:22
but I don't know if you know Axe in the room. Yeah, that's what, okay. That's what I expected. It's another solution to write JavaScript. I use it for more than four years now on my daily work. Axe is a programming language that's,
23:43
it's used for two kind of a project. It's mainly used on a video programming for make a video game, on a console for native video game on the web. And it's also used on the JavaScript format to create a website.
24:02
The main purpose of the Axe language is you written your project in Axe and you can export on any language that is on the list. That's the original goal for Axe. And because it's a strictly type programming language,
24:21
it's make your project very stable and it's a way to written code very safely. That's the goal for TypeScript. But because TypeScript is just a subset of JavaScript, it cannot achieve very, it cannot, on my point, it cannot achieve that goal very efficiently.
24:44
I haven't prepared anything. I don't know what I can show you. This is Axe code. This look like if you are familiar with Java or C-Chop, it's very close. You have class, but you can also make some functional programming.
25:02
This is the list of feature, I guess. Yeah, you have the type inference, very efficient, more than what we have in TypeScript. The pattern matching, yeah, I really love this feature. For example, if I took a re-matching,
25:21
yeah, everything in Axe return a value like we can have in our OCaml. This mean here I have an array and based on the case, that will return a value that I can directly catch in variable. I'll use it after. It's a way to decompose.
25:40
I can took another example. Yeah, here I can add a if. Yeah, I will check if there are two value in b and we'll check if b is greater than a and I will return the string. I can go back.
26:06
Yeah, macro. It's like a black magic. That's because Axe is transpelling in a native language. That could be C-sharp, Java, PHP,
26:22
and JavaScript in our case. That we have a way to modify the code generated at compile time. That mean you can check your code. You can directly inject programs that are some assets. You can embed it. What we are doing with repack in JavaScript,
26:43
we can do it, but directly at compile time, it's like in millisecond you can modify your code. It's very efficient for big project. For example, I was working on a big project that originally was made in ActionScript, like I don't remember, around 10,000 classes,
27:01
and we put it in Axe and we compile in a few seconds. That's because the guy that created the language, it's already well known to create an open source project called M-Task. It was an open source compiler for Flash back in the day.
27:22
And yeah, what can I tell to you? Yeah, we have Axe-lib, is the equivalent of NPM to manage library. And maybe for JavaScript to be more, because we generate JavaScript at the end, we can embed it in a JavaScript library.
27:43
We can use React, we can use Vue, we can use everything that exists in JavaScript. So thank you so much. Yes, welcome. And where can they find you to ask you more questions and dig deeper?
28:01
Not here, because we'll have a speaker in a bit. On Twitter, I can just put my name. Just don't look at my history, please. Yeah, no, it's me, wonderful.
28:20
And this is my account on Twitter. Super, thank you so much. Yeah, welcome. So.