﻿1 00:00:00,623 --> 00:00:02,910
(upbeat music) 2
everyone. 3
this video 4
explain to you 5
Components compilation works
6 00:00:12,740 --> 00:00:14,050
under the hood. 7
Alba Rivas. 8
Salesforce 9
contact details 10
ask me anything later. 11
a Lightning Web Component 12
organization, 13
if you inspect the code 14
component 15
of code that get added 16
code that we have written 17
Components. 18
Web Components compiler 19
20 00:00:57,790 --> 00:01:01,120
So let's take a look at how the Lightning Web
Components 21
works. 22
to an organization, 23
to happen 24
statically analyze your code 25
are following 26
practices 27
configuration for LWC. 28
parsing. 29
that is going to make sure 30
that you are using 31
language, right? 32
we try to keep up to date. 33
very often. 34
the latest syntax features 35
36 00:01:50,270 --> 00:01:51,260
From that point, 37
outputs, 38
to work in modern browsers 39
to work in old browsers. 40
support ES6 features. 41
So for those two outputs, 42
transformation. 43
some ES6 plus features 44
compatible in all the cases. 45
are going to do in both cases. 46
the modern browsers version, 47
those syntax features 48
ES6. 49
compatibility version, 50
those features down to ES5. 51
yourself what happens 52
syntax feature 53
down to ES6 or ES5, right? 54
feature will be supported 55
supports it. 56
using a modern browser, 57
highly probable 58
feature. 59
step I want to talk about 60
bundling. 61
compiler 62
file and your CSS file. 63
some JavaScript code 64
component, 65
HTML and CSS dynamically. 66
extra lines 67
in the JavaScript file 68
with Chrome developer tools. 69
both the ECMAScript six output 70
are going to be generated. 71
to know is that 72
production mode, 73
are going to be minified 74
performance. 75
happen in the back mode 76
break points in a easier way. 77
78 00:04:16,310 --> 00:04:17,470
Very easy. 79
first of all, 80
Web Components application, 81
agent 82
browser 83
is running. 84
modern browser, 85
the ECMAScript six version 86
that's it. 87
older browser, 88
ECMAScript five version 89
90 00:04:44,990 --> 00:04:49,370
And we are going to also
load some polyfills. 91
features 92
available 93
browsers. 94
a similar question, 95
an API 96
version higher than ES6, 97
polyfilling. 98
use an API, for instance 99
replace all 100
polyfilling.