Tweet
Tweet

Slide 1

Slide 1 text

5IFDIBMMFOHFTPGXFCBQQT XIBUXF`WFTPMWFEBOEXIBU`TOFYU "MFYFZ5BLUBSPW $PQFOIBHFO+4

Slide 2

Slide 2 text

'JSTU8FCTJUF .PTBJD#SPXTFS /FUTDBQF/BWJHBUPS +BWB

Slide 3

Slide 3 text

'JSTU8FCTJUF .PTBJD#SPXTFS /FUTDBQF/BWJHBUPS +BWB l 5IF/FYU#JH5IJOHz

Slide 4

Slide 4 text

l/FUXPSL$PNQVUFSz /PIBSEESJWF -JHIUXFJHIU+BWB04 'PSNGBDUPSPGB DPGGFFNBDIJOF JavaStation (1996) +BWB4UBUJPO/$ ","l,SVQTz ","UIFUPXFS

Slide 5

Slide 5 text

#PPUTVQ+BWB04#SPXTFS8FCQBHFXJUI+BWB"QQMFU

Slide 6

Slide 6 text

#PPUTVQ+BWB04#SPXTFS8FCQBHFXJUI+BWB"QQMFU

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

'JSTU8FCTJUF .PTBJD#SPXTFS /FUTDBQF/BWJHBUPS +BWB l 5IF /FYU #JH 5IJOHz &$."4DSJQU

Slide 10

Slide 10 text

'JSTU8FCTJUF .PTBJD#SPXTFS /FUTDBQF/BWJHBUPS +BWB &$."4DSJQU

Slide 11

Slide 11 text

╔═════════════════════╦════════════════════════════╗ ║ Yes&'( ║ But ║ ╠═════════════════════╬════════════════════════════╣ ║ Network Computer ║ Slow ║ ║ Browser-first ║ Poor support of HTML4 ║ ║ Java Applets ║ Outdated Java 1.0 running ║ ║ Rich Apps ║ Not enough apps available ║ ╚═════════════════════╩════════════════════════════╝ *IBEUPBQPMPHJ[FUPNZTUVEFOUTGPSUIFTMPXBOE JODPOWFOJFOUNBDIJOFT*SFNFNCFSNBLJOHTPNFKPLFT BCPVUUFDIOPMPHJDBMQSPHSFTT %S"MFY3ZCB 'PSNFS1SPGFTTPSBU.BSRVFUUF6OJWFSTJUZ 2VPUFE.BSDI

Slide 12

Slide 12 text

5IF*OOPWBUJPO4$VSWF UJNF

Slide 13

Slide 13 text

5IF*OOPWBUJPO4$VSWF UJNF +BWB4UBUJPOXBTJOOPWBUJWF CVUBSSJWFEUPPFBSMZ

Slide 14

Slide 14 text

JavaS UIJTTUPSZJTTBECZJOTQJSJOH XIBUQSPCMFNTXF`WFCFFOTPMWJOH XIBUDPNFTOFYU IPXXFCEFWFWPMWFEPWFSUJNF JOUIJTUBML tation

Slide 15

Slide 15 text

JavaS UIJTTUPSZJTTBECZJOTQJSJOH XIBUQSPCMFNTXF`WFCFFOTPMWJOH XIBUDPNFTOFYU IPXXFCEFWFWPMWFEPWFSUJNF JOUIJTUBML cript

Slide 16

Slide 16 text

1MBUGPSN %9 69 )PXGBTUDBOXF CVJMEUIJT $BOUIJTBDUVBMMZ CFJNQMFNFOUFE 8JMMJUNFFUVTFS`T FYQFDUBUJPOT

Slide 17

Slide 17 text

1FPQMFXBOUNPSFGSPNBQQTBTOFXUFDIDPNFTPVU l)FMMP z l1TTIIUʜ4IIIʜ#FFQʜ#FFQʜz

Slide 18

Slide 18 text

1PPSUPPMJOHGPSTUBUFPGUIFBSUUFDI %9 69

Slide 19

Slide 19 text

l"II UIFHPPEPMEBZTz )6."/ ώϡʔϚϯ TPNFPOF`TCFESPPN

Slide 20

Slide 20 text

l"II UIFHPPEPMEBZTz $0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ TPNFPOF`TCFESPPN

Slide 21

Slide 21 text

1MBOUPMPHZ

Slide 22

Slide 22 text

1MBOUPMPHZ

Slide 23

Slide 23 text

1MBOUPMPHZ

Slide 24

Slide 24 text

l"II UIFHPPEPMEBZTz $0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ

Slide 25

Slide 25 text

l"II UIFHPPEPMEBZTz $0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ

Slide 26

Slide 26 text

l"II UIFHPPEPMEBZTz $0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ

Slide 27

Slide 27 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4PNFPOF`TCFESPPNJO+BQBO

Slide 28

Slide 28 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4PNFPOF`TCFESPPNJO+BQBO 4&37&3 αʔόʔ 4BO'SBODJTDP

Slide 29

Slide 29 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4PNFPOF`TCFESPPNJO+BQBO 4&37&3 αʔόʔ 4BO'SBODJTDP )5.- #3084&3

Slide 30

Slide 30 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4PNFPOF`TCFESPPNJO+BQBO 4&37&3 αʔόʔ 4BO'SBODJTDP 8JUI$(* $0.165&3CFDPNFTNPSF SFTQPOTJWFBOENPSFQFSTPOBMJTFE +41 1FSM 1)1 %KBOHP 3BJMT

Slide 31

Slide 31 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4PNFPOF`TCFESPPNJO+BQBO 4&37&3 αʔόʔ 4BO'SBODJTDP $(*)5.- 8JUI$(* $0.165&3CFDPNFTNPSF SFTQPOTJWFBOENPSFQFSTPOBMJTFE +41 1FSM 1)1 %KBOHP 3BJMT

Slide 32

Slide 32 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN

Slide 33

Slide 33 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN

Slide 34

Slide 34 text

%9 69 6TFS&YQFDUBUJPOT EFTLUPQ69 *OUFSBDUJWJUZ +4 'JSTU8FCTJUFT

Slide 35

Slide 35 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %0.-FWFM "+"9 %PKP 1SPUPUZQF K2VFSZ 9)3 $(*)5.-+4 4FSWFSHFOFSBUFE)5.- +4TDSJQUT

Slide 36

Slide 36 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ 9)3 3FOEFS)5.- XJUI+4 &.15:)5.-+4 4JOHMF1BHF"QQT

Slide 37

Slide 37 text

ϒϥ΢β IUUQTQMBOUPMPHZJP -PBEJOH 4FSWFSSFTQPOETXJUIBOFNQUZQBHF

Slide 38

Slide 38 text

ϒϥ΢β IUUQTQMBOUPMPHZJP 1BHFHFUTSFOEFSFE %0.

Slide 39

Slide 39 text

1MBUGPSNBEWBODFNFOUT +BWB4DSJQUJTOPXGBTU 7 #SPXTFS)JTUPSZ"1* "+"9 %ZOBNJD%0. BOENPSF %9 69 *OUFSBDUJWJUZ +4 'JSTU8FCTJUFT $PNQPOFOUCBTFE 7JFX-JCSBSJFT

Slide 40

Slide 40 text

"OHVMBSYBOE,OPDLPVUKTIBEUPCFBUUBDIFE UPFYJTUJOH)5.-HFOFSBUFECZUIFTFSWFS #BDLCPOFKTEJEO`UIBWFBCVJMUJOUFNQMBUF FOHJOF 6OEFSTDPSFPS)BOEMFCBSTXFSFSFDPNNFOEFE "OHVMBSY ,OPDLPVUKT #BDLCPOFKT &NCFSKT 3FBDU 7%0. 5FNQMBUFCJOEJOHT

Slide 41

Slide 41 text

isLightOn true &NCFSKT DJSDB

Slide 42

Slide 42 text

isLightOn true lightStatus “ON” &NCFSKT DJSDB

Slide 43

Slide 43 text

isLightOn true lightStatus “ON” Light is “ON”!/span> &NCFSKT DJSDB

Slide 44

Slide 44 text

isLightOn true lightStatus “ON” Light is “ON”!/span> when changed:
 turn the lights off after 5s &NCFSKT DJSDB

Slide 45

Slide 45 text

isLightOn true lightStatus “ON” Light is “ON”!/span> when changed:
 turn the lights off after 5s lPCTFSWFS lPCTFSWBCMFz lDPNQVUFEz lUFNQMBUFz &NCFSKT DJSDB

Slide 46

Slide 46 text

const RoomLight = Ember.Object.extend({ isLightOn: false, lightStatus: Ember.computed('isLightOn', function () { return this.get('isLightOn') ? 'On' : 'Off'; }), autoTurnOff: Ember.observer('isLightOn', function () { if (this.get('isLightOn')) { Ember.run.later(this, function () { this.set('isLightOn', false); #$ Turn off the light }, 5000); } }), }); Light is “{{lightStatus}}”!/span> &NCFSKT DJSDB

Slide 47

Slide 47 text

const RoomLight = Ember.Object.extend({ isLightOn: false, lightStatus: Ember.computed('isLightOn', function () { return this.get('isLightOn') ? 'On' : 'Off'; }), autoTurnOff: Ember.observer('isLightOn', function () { if (this.get('isLightOn')) { Ember.run.later(this, function () { this.set('isLightOn', false); #$ Turn off the light }, 5000); } }), }); Light is “{{lightStatus}}”!/span> PCTFSWBCMF &NCFSKT DJSDB DPNQVUFE PCTFSWFS UFNQMBUF

Slide 48

Slide 48 text

VTFQSPQFSUJFTUIBUDBOCFPCTFSWFE USBDLEFQFOEFODJFTVTJOHBHSBQI VQEBUFPOMZUIFQBSUTPGUIFWJFXXIFSF UIFTFWBMVFTIBEDIBOHFE &NCFSQSFGVMMUFNQMBUFSFSFOEFS

Slide 49

Slide 49 text

3FBDU &NCFS

Slide 50

Slide 50 text

ϒϥ΢β IUUQTQMBOUPMPHZJP '0#1l'MBTIPGBCMBOLQBHFz BTUFQCBDLJO69

Slide 51

Slide 51 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ TFSWFSSFOEFSFE )5.- 4FSWFS4JEF3FOEFSJOH

Slide 52

Slide 52 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ TFSWFSSFOEFSFE )5.- *OUFSBDUJWF 4FSWFS4JEF3FOEFSJOH

Slide 53

Slide 53 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ TFSWFSSFOEFSFE )5.- 4FSWFS4JEF3FOEFSJOH

Slide 54

Slide 54 text

l *TPNPSQIJD+BWB4DSJQUz 3FBDU 7VF l3FBDUIBTIBETFSWFSTJEFSFOEFSJOHTJODFJUXBT SFMFBTFEJO TUPQQSFUFOEJOHJUTOFX 3FEEJU renderComponentToString() 2 "OHVMBS "OHVMBS6OJWFSTBM &NCFS'BTU#PPU #SPXTFSJGZ l4DBMJOH*TPNPSQIJD+BWBTDSJQU$PEF /PEFKJUTV#MPH 8FCQBDL &4'JOBM%SBGU

Slide 55

Slide 55 text

8IFO443TVQQPSUXBTP⒏DJBMMZJOUSPEVDFE 3FBDUDBNFPVU XJUI443 TVQQPSU BUUIFSJHIUUJNF

Slide 56

Slide 56 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN )ZESBUJPO &YQMBJOFE

Slide 57

Slide 57 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN )ZESBUJPO &YQMBJOFE 443)5.-JTTFOUCZ UIFTFSWFS

Slide 58

Slide 58 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN )ZESBUJPO &YQMBJOFE ) *OUFSBDUJWF

Slide 59

Slide 59 text

5VSOTPVU HFUUJOH443UPXPSLSFRVJSFEBMPUPGTFUVQ

Slide 60

Slide 60 text

1MBUGPSNBEWBODFNFOUT &$."UI&EJUJPO &4 %ZOBNJDJNQPSU GFUDI 7BSJFUZPGJTPNPSQIJDQBDLBHFTPO/1. %9 69 *OUFSBDUJWJUZ +4 'JSTU8FCTJUFT $PNQPOFOUCBTFE 7JFX-JCSBSJFT 443"QQT

Slide 61

Slide 61 text

1MBUGPSNBEWBODFNFOUT &$."UI&EJUJPO &4 %ZOBNJDJNQPSU GFUDI 7BSJFUZPGJTPNPSQIJDQBDLBHFTPO/1. %9 69 *OUFSBDUJWJUZ +4 'JSTU8FCTJUFT $PNQPOFOUCBTFE 7JFX-JCSBSJFT 443"QQT 'VMM4UBDL'SBNFXPSLT

Slide 62

Slide 62 text

/FYUKT 4WFMUF,JU 3FNJY /VYUKT 2XJL$JUZ 3FEXPPE+4 %9/&&%4

Slide 63

Slide 63 text

/FYUKT 4WFMUF,JU 'JMFCBTFESPVUJOH EJSFDUPSZDPOWFOUJPOT DBOTIJQNPSFDPNQMFYBQQTXJUINPSFEFWUFBNTJOWPMWFE 3FNJY /VYUKT 2XJL$JUZ 3FEXPPE+4 %9/&&%4

Slide 64

Slide 64 text

/FYUKT 4WFMUF,JU 'JMFCBTFESPVUJOH EJSFDUPSZDPOWFOUJPOT DBOTIJQNPSFDPNQMFYBQQTXJUINPSFEFWUFBNTJOWPMWFE 443TFUVQPVUPGUIFCPY TBWFSFTPVSDFTPODPOpHVSJOHCVOEMFS USBOTQJMFS TFSWFSQPMZpMMT 3FNJY /VYUKT 2XJL$JUZ 3FEXPPE+4 %9/&&%4

Slide 65

Slide 65 text

/FYUKT 4WFMUF,JU 'JMFCBTFESPVUJOH EJSFDUPSZDPOWFOUJPOT DBOTIJQNPSFDPNQMFYBQQTXJUINPSFEFWUFBNTJOWPMWFE 443TFUVQPVUPGUIFCPY TBWFSFTPVSDFTPODPOpHVSJOHCVOEMFS USBOTQJMFS TFSWFSQPMZpMMT 3FDPNNFOEFEUPPMJOHBOECPPUTUSBQUFNQMBUFT RVJDLTUBSUMPXFS55) UJNFUPIBDLJOH 3FNJY /VYUKT 2XJL$JUZ 3FEXPPE+4 %9/&&%4

Slide 66

Slide 66 text

)6."/ ώϡʔϚϯ NPSFDPNQMFYXFCBQQTIFBWJFSCVOEMFT NPSF+4FYFDVUJPOJODSFBTFE)5.-SFOEFSJOHQFSQBHF +-------------------------+ | My standards are higher | | now! | +-------------------------+ /

Slide 67

Slide 67 text

%&7&-01&3 σϕϩούʔ +--------------------+ | Oh, NO! | +--------------------+ \ 3FSFOEFSJOH1FSGPSNBODF*/1 )PXGBTUUIFBQQDBOSFBDUUPVQEBUFT */1*OUFSBDUJPOUP/FYU1BJOU 55*5JNFUP*OUFSBDUJWF

Slide 68

Slide 68 text

%&7&-01&3 σϕϩούʔ +--------------------+ | Oh, NO! | +--------------------+ \ 3FSFOEFSJOH1FSGPSNBODF*/1 )PXGBTUUIFBQQDBOSFBDUUPVQEBUFT )ZESBUJPO1FSGPSNBODF55* )PXTPPODBOUIFBQQCFDPNFTJOUFSBDUJWF */1*OUFSBDUJPOUP/FYU1BJOU 55*5JNFUP*OUFSBDUJWF

Slide 69

Slide 69 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ 443

Slide 70

Slide 70 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ 443 *OUFSBDUJWF

Slide 71

Slide 71 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ 443 3FBEZ

Slide 72

Slide 72 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ 443 )ZESBUJPOBOESFSFOEFSJOH BSFCPUUMFOFDLT

Slide 73

Slide 73 text

├── │ └── ├── │ ├── │ ├── │ └── │ └── │ ├── #1 │ ├── #2 │ └── #3 └── BOBQQSFSFOEFSTCFDBVTFUIFTUBUFPGPOFPGJUT DPNQPOFOUTIBTDIBOHFE

Slide 74

Slide 74 text

├── │ └── ├── │ ├── │ ├── │ └── │ └── │ ├── #1 │ ├── #2 │ └── #3 └── BOBQQSFSFOEFSTCFDBVTFUIFTUBUFPGPOFPGJUT DPNQPOFOUTIBTDIBOHFE

Slide 75

Slide 75 text

├── │ └── ├── │ ├── │ ├── │ └── │ └── │ ├── #1 │ ├── #2 │ └── #3 └── BOBQQSFSFOEFSTCFDBVTFUIFTUBUFPGPOFPGJUT DPNQPOFOUTIBTDIBOHFE

Slide 76

Slide 76 text

├── │ └── ├── │ ├── │ ├── │ └── │ └── │ ├── #1 │ ├── #2 │ └── #3 └── BOBQQSFSFOEFSTCFDBVTFUIFTUBUFPGPOFPGJUT DPNQPOFOUTIBTDIBOHFE

Slide 77

Slide 77 text

├── │ └── ├── │ ├── │ ├── │ └── │ └── │ ├── #1 │ ├── #2 │ └── #3 └── BOBQQSFSFOEFSTCFDBVTFUIFTUBUFPGPOFPGJUT DPNQPOFOUTIBTDIBOHFE

Slide 78

Slide 78 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN

Slide 79

Slide 79 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN

Slide 80

Slide 80 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN "%%&%50:063 $0--&$5*0/

Slide 81

Slide 81 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN cSFSFOEFSJOH cTUBUFDIBOHF c7%0.JTSFBEZ cSFDPODJMJBUJPO cEJ⒎7%0.7%0. c%0.7%0. c%0.7%0.

Slide 82

Slide 82 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN cSFSFOEFSJOH cTUBUFDIBOHF c7%0.JTSFBEZ cSFDPODJMJBUJPO cEJ⒎7%0.7%0. c%0.7%0. c%0.7%0.

Slide 83

Slide 83 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN cSFSFOEFSJOH cTUBUFDIBOHF c7%0.JTSFBEZ cSFDPODJMJBUJPO cEJ⒎7%0.7%0. c%0.7%0. c%0.7%0.

Slide 84

Slide 84 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN "%%&%50:063 $0--&$5*0/ cSFSFOEFSJOH cTUBUFDIBOHF c7%0.JTSFBEZ cSFDPODJMJBUJPO cEJ⒎7%0.7%0. c%0.7%0. c%0.7%0.

Slide 85

Slide 85 text

l8IZ3FBDU3F3FOEFSTzCZ+PTI$PNFBV ϒϥ΢

Slide 86

Slide 86 text

$PNQJMF5JNF3FBDUJWJUZ $PNQJMFDPNQPOFOUTJOUP FGGJDJFOUEJSFDU%0.VQEBUFT 4WFMUF 4PMJE Dealing with Inefficient re-rendering

Slide 87

Slide 87 text

$PNQJMF5JNF3FBDUJWJUZ $PNQJMFDPNQPOFOUTJOUP FGGJDJFOUEJSFDU%0.VQEBUFT 4WFMUF 4PMJE 3FBDU$PODVSSFOU.PEF #SFBLSFOEFSJOHJOUPTNBMMFS JOUFSSVQUJCMFDIVOLTPGXPSL MJLF04TDIFEVMFS Dealing with Inefficient re-rendering

Slide 88

Slide 88 text

$PNQJMF5JNF3FBDUJWJUZ $PNQJMFDPNQPOFOUTJOUP FGGJDJFOUEJSFDU%0.VQEBUFT 4WFMUF 4PMJE 3FBDU$PODVSSFOU.PEF #SFBLSFOEFSJOHJOUPTNBMMFS JOUFSSVQUJCMFDIVOLTPGXPSL MJLF04TDIFEVMFS 3FBDU$PNQJMFS $PNQJMFUJNFDPNQPOFOU NFNPJTBUJPOBOEQSPQDBDIJOH Dealing with Inefficient re-rendering

Slide 89

Slide 89 text

4JHOBMT 3FBDUJWFTUBUFNBOBHFNFOUQSJNJUJWFT TJHOBMDPNQVUFEF⒎FDU 3YKT"OHVMBS 4WFMUF3VOFT 4PMJE4JHOBMT 5$1SPQPTBM 1SFBDU4JHOBMT +PUBJ OBOPTUPSFT

Slide 90

Slide 90 text

import { signal, computed, effect } from "@preact/signals"; const isLightOn = signal(true) const lightStatus = computed(() /0 isLightOn ? "ON" : "OFF") effect(() /0 { if (isLightOn) isLightOn.value = false }) 4JHOBMTJO1SFBDU

Slide 91

Slide 91 text

let isLightOn = $state(true) let doubled = $derived(isLightOn ? "ON" : "OFF") effect(() /0 { if (isLightOn) isLightOn = false }) 3VOFTJO4WFMUF

Slide 92

Slide 92 text

isLightOn true lightStatus “ON” Light is “ON”!/span> when changed:
 turn the lights off after 5s lFGGFDUz lTJHOBMz lDPNQVUFEz +49 #VU&NCFSKTJOWFOUFEJUJO

Slide 93

Slide 93 text

8IZ&NCFSKTPCKFDUNPEFMEJEO`UMJGUP⒎ 'PVOEBUJPOXBTO`UUIFSFZFU1SPYZ "1* &4$MBTTFT +49 DPNQJMFST FUD 4JHOBMT

Slide 94

Slide 94 text

Dealing with slow hydration

Slide 95

Slide 95 text

1SPHSFTTJWF&OIBODFNFOU 3FNJY 4WFMUF,JU 2XJL #FGPSFIZESBUFE UIFBQQDBO XPSLXJUIOP+BWB4DSJQUBUBMM Dealing with slow hydration

Slide 96

Slide 96 text

1BSUJBM)ZESBUJPO "TUSP*TMBOET 34$ 8IBUJGOPUBMMQBSUTPG UIFBQQBSFFRVBMMZEZOBNJD 1SPHSFTTJWF&OIBODFNFOU 3FNJY 4WFMUF,JU 2XJL #FGPSFIZESBUFE UIFBQQDBO XPSLXJUIOP+BWB4DSJQUBUBMM Dealing with slow hydration

Slide 97

Slide 97 text

Light2/button> Dark2/button> 2/form> 1SPHSFTTJWF&OIBODFNFOUJO3FNJY ╔═════════════════════╦════════════════════════════╗ ║ Non-Interactive ║ Submit Form (Navigation) ║ ║ Hydrated ║ fetch + setState (React) ║ ╚═════════════════════╩════════════════════════════╝

Slide 98

Slide 98 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN 1BSUJBM)ZESBUJPO /POJOUFSBDUJWF)5.-

Slide 99

Slide 99 text

ϒϥ΢β IUUQXXXQMBOUPMPHZDPN 1BSUJBM)ZESBUJPO ) ) *OUFSBDUJWF

Slide 100

Slide 100 text

3FBDU4FSWFS$PNQPOFOUT 'JSTU*OUSPEVDFE "TUSP*TMBOET 34$JO/FYUKT 2XJLIZESBUJPO )POPW $MJFOU$PNQPOFOUT 5JNFMJOFPGQSPHSFTTJWFIZESBUJPOTVQQPSU

Slide 101

Slide 101 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %$JO4BO'SBODJTDP 4PNFPOF`TCFESPPN 5PLZP

Slide 102

Slide 102 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %$JO4BO'SBODJTDP 4PNFPOF`TCFESPPN 5PLZP

Slide 103

Slide 103 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %$JO4BO'SBODJTDP 4PNFPOF`TCFESPPN 5PLZP NT

Slide 104

Slide 104 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %$JO4BO'SBODJTDP 4PNFPOF`TCFESPPN 5PLZP &%(&4&37&3 Τοδαʔόʔ %$5PLZP NT 4FSWFSMFTT+4POUIF&EHF $MPVEqBSF8PSLFST -BNCEB!&EHF %FOP%FQMPZ 4VQBCBTF&EHF'VODUJPOT FUD

Slide 105

Slide 105 text

1MBUGPSNBEWBODFNFOUT 7*TPMBUFT 8"4.POUIFFEHF 8FC4UBOEBSETGFUDI 3FRVFTU3FTQPOTF 8FC$SZQUP"1* FUD %9 69 *OUFSBDUJWJUZ +4 'JSTU8FCTJUFT $PNQPOFOUCBTFE 7JFX-JCSBSJFT 443"QQT 'VMM4UBDL'SBNFXPSLT 1FSGPSNBOU 3FOEFSJOH)ZESBUJPO

Slide 106

Slide 106 text

1MBUGPSNBEWBODFNFOUT 7*TPMBUFT 8"4.POUIFFEHF 8FC4UBOEBSETGFUDI 3FRVFTU3FTQPOTF 8FC$SZQUP"1* FUD %9 69 *OUFSBDUJWJUZ +4 'JSTU8FCTJUFT $PNQPOFOUCBTFE 7JFX-JCSBSJFT 443"QQT 'VMM4UBDL'SBNFXPSLT &EHF$PNQVUJOH 1FSGPSNBOU 3FOEFSJOH)ZESBUJPO

Slide 107

Slide 107 text

%9 69 *OUFSBDUJWJUZ +4 'JSTU8FCTJUFT $PNQPOFOUCBTFE 7JFX-JCSBSJFT 443"QQT 'VMM4UBDL'SBNFXPSLT &EHF$PNQVUJOH 1FSGPSNBOU 3FOEFSJOH)ZESBUJPO

Slide 108

Slide 108 text

%9 69 *OUFSBDUJWJUZ +4 'JSTU8FCTJUFT $PNQPOFOUCBTFE 7JFX-JCSBSJFT 443"QQT 'VMM4UBDL'SBNFXPSLT &EHF$PNQVUJOH 1FSGPSNBOU 3FOEFSJOH)ZESBUJPO .VMUJ3VOUJNF

Slide 109

Slide 109 text

“WRITE ONCE, DEPLOY ANYWHERE”

Slide 110

Slide 110 text

3FNJY SFNJYSVO "EBQUFSTGPS%FOP /PEF 7FSDFM $MPVEGMBSF8PSLFST 7FSDFMFUD “WRITE ONCE, DEPLOY ANYWHERE”

Slide 111

Slide 111 text

3FNJY SFNJYSVO "EBQUFSTGPS%FOP /PEF 7FSDFM $MPVEGMBSF8PSLFST 7FSDFMFUD “WRITE ONCE, DEPLOY ANYWHERE” )POP IPOPEFW .VMUJSVOUJNFXFCTFSWFS

Slide 112

Slide 112 text

3FNJY SFNJYSVO "EBQUFSTGPS%FOP /PEF 7FSDFM $MPVEGMBSF8PSLFST 7FSDFMFUD “WRITE ONCE, DEPLOY ANYWHERE” )POP IPOPEFW .VMUJSVOUJNFXFCTFSWFS 445 TTUEFW 4JOHMFDPOGJHGPSQSPWJEFST

Slide 113

Slide 113 text

"MMJO0OF5PPMDIBJOT3VOUJNFT %FOP #VO #JPNF 0YD #BDLFOE'JSTUPS/0#6*-% 3BJMT 1SPQTIBGU )5.9 What’s Trending now? -FBWJOHUIF$MPVE #BTFDBNQ /FYUKT7FSDFMMPDLJO

Slide 114

Slide 114 text

╔════════════════════╦══════╦══════╦═══════╦══════╗ ║ Feature/Tool ║ Deno ║ Bun ║ Biome ║ Oxc ║ ╠════════════════════╬══════╬══════╬═══════╬══════╣ ║ Runtime ║ YES ║ YES ║ NO ║ NO ║ ║ Test Runner ║ YES ║ YES ║ NO ║ NO1 ║ ║ Package Manager ║ YES ║ YES ║ NO ║ NO ║ ║ Bundler ║ NO ║ YES ║ NO ║ WIP ║ ║ Formatter ║ YES ║ NO ║ YES ║ WIP ║ ║ Linter ║ YES ║ NO ║ YES ║ YES ║ ║ Resolver ║ NO ║ NO ║ NO ║ YES ║ ║ Minifier ║ NO ║ NO ║ NO ║ YES ║ ╚════════════════════╩══════╩══════╩═══════╩══════╝ $BO7JUFTUCFDPNF0YD`TSFDPNNFOEFEUFTUSVOOFS

Slide 115

Slide 115 text

"MMJO0OF5PPMDIBJOT3VOUJNFT %FOP #VO #JPNF 0YD What’s Trending now? #BDLFOE'JSTUPS/0#6*-% 3BJMT 1SPQTIBGU )5.9 -FBWJOHUIF$MPVE #BTFDBNQ /FYUKT7FSDFMMPDLJO

Slide 116

Slide 116 text

+---------------------------+ | Give us the ownership of | | the infrastructure back! | | | #leavethecloud | +---------------------------+ / \ +---------------------------+ | Say NO to transpilation | | and bundling! | | #NOBUILD | +---------------------------+ #VOEMJOH$PEF4QMJUUJOH +495VSCPQBDL 3PMMEPXO7JUF 8FCQBDL48$ FTCVJME3PNF 5VSCPQBDLNJDSPCVOEMF 5ZQF4DSJQU$44JO+4 1PTU$44$44.PEVMFT 4FSWFSMFTT%#T)FBEMFTT"VUI #BCFM4UBUJD1SPQT %ZOBNJD3PVUFT44344( ).3-B[Z-PBEJOH 5SFF4IBLJOH.PEVMF'FEFSBUJPO &EHF'VODUJPOT%FOP 1SFBDU4PMJE+4 ;VTUBOE+PUBJ 341BDL.FUSP 3PMMVQ.JOJGJDBUJPO $IVOLJOH"TTFU0QUJNJ[BUJPO 4PVSDF.BQT)PU3FMPBEJOH

Slide 117

Slide 117 text

-PDBMpSTUTPGUXBSF:PVPXOZPVSEBUB JOTQJUFPGUIFDMPVE *OL4XJUDI ϒϥ΢ 5IFDMPVEHJWFTVTDPMMBCPSBUJPO CVU PMEGBTIJPOFEBQQTHJWFVTPXOFSTIJQ $BO`UXFIBWFUIFCFTUPGCPUIXPSMET

Slide 118

Slide 118 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %# σΟʔϏʔ 4PNFPOF`TCFESPPNJO+BQBO $PSQPSBUJPO

Slide 119

Slide 119 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %# σΟʔϏʔ 4PNFPOF`TCFESPPNJO+BQBO $PSQPSBUJPO

Slide 120

Slide 120 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %# σΟʔϏʔ 4PNFPOF`TCFESPPNJO+BQBO $PSQPSBUJPO

Slide 121

Slide 121 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %# σΟʔϏʔ 4PNFPOF`TCFESPPNJO+BQBO $PSQPSBUJPO

Slide 122

Slide 122 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ %# σΟʔϏʔ 4PNFPOF`TCFESPPNJO+BQBO $PSQPSBUJPO %# σΟʔϏʔ

Slide 123

Slide 123 text

1MBUGPSNBEWBODFNFOUT 8"4. 'JMF4ZTUFN"1* $3%5MJCSBSJFT 8FC4PDLFUTPOUIF&EHF QFSGFDUUJNJOH

Slide 124

Slide 124 text

'SBNFXPSLT-JCSBSJFT 5JOZ#BTF 3FBDUJWF%#XJUI$3%5 :KT %BUBUZQFTGPS$3%5 "VUPNFSHF Local-First *O#SPXTFS%#T 5VSTP 42-JUFDPNQBUJCMF %VDL%# .VMUJ3VOUJNF BOBMZUJDBM 1(-JUF XWFDUPSTFBSDI 1SPQSJFUBSZ *OTUBOU 3FBM5JNF 4ZOD GPS3FBDU7BOJMMB +B[[UPPMT DMPVEPSTFMGIPTUFE 3FTPVSDFT MPDBMGJSTUXFCEFW MPDBMGJSTUGN MPDBMGJSTUDPOGDPN

Slide 125

Slide 125 text

)6."/ ώϡʔϚϯ

Slide 126

Slide 126 text

"* ΤʔΞΠ )6."/ ώϡʔϚϯ

Slide 127

Slide 127 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ &%(&4&37&3 Τοδαʔόʔ

Slide 128

Slide 128 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ &%(&4&37&3 Τοδαʔόʔ "* ΤʔΞΠ

Slide 129

Slide 129 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ &%(&4&37&3 Τοδαʔόʔ

Slide 130

Slide 130 text

$0.165&3 ίϯϐϡʔλʔ )6."/ ώϡʔϚϯ 4&37&3 αʔόʔ &%(&4&37&3 Τοδαʔόʔ

Slide 131

Slide 131 text

1MBUGPSN"EWBODFNFOUT 8"4. 8FC(16 8FC//8$$BOEJEBUF3FD the State of in-browser AI *O#SPXTFS7FDUPS4FBSDI 5VSTP 42-JUFDPNQBUJCMF 1(-JUF QH@WFDUPS .PEFMT (FNJOJ/BOPAXJOEPXBJA 8FC4UBCMF%JGGVTJPO 5SBOTGPSNFSTKT 8FC--.

Slide 132

Slide 132 text

ϒϥ΢ -MBNB#3VOOJOHJOUIFCSPXTFS 8FC--. ϒϥ΢ %PPEMF%BTI 7JTJPO5SBOTGPSNFS . SVOOJOHPO5SBOTGPSNFSTKT

Slide 133

Slide 133 text

ϒϥ΢ -MBNB#3VOOJOHJOUIFCSPXTFS 8FC--. ϒϥ΢ %PPEMF%BTI 7JTJPO5SBOTGPSNFS . SVOOJOHPO5SBOTGPSNFSTKT

Slide 134

Slide 134 text

8FC"*4VNNJU $ISPNFGPS%FWFMPQFST

Slide 135

Slide 135 text

"MM"QQMJDBUJPOTBSF#FDPNJOH %JTUSJCVUFE4ZTUFNT %BWJT5SFZCJH ϒϥ΢ GPS3"(TZTUFNTXJMMOFFEUPDPOTJEFS XIFOUPSPVUFUPUIFTNBMMFS MPDBMNPEFM WTUIFTNBSUFS CJHHFS SFNPUFNPEFM

Slide 136

Slide 136 text

ZFBSTBHP

Slide 137

Slide 137 text

*XBTGFFMJOHPVUEBUFEBOEPWFSXIFMNFE

Slide 138

Slide 138 text

CVUOPX*GFFMFYDJUFEBCPVUXFCEFWFMPQNFOUBHBJO

Slide 139

Slide 139 text

CVUOPX*GFFMFYDJUFEBCPVUXFCEFWFMPQNFOUBHBJO

Slide 140

Slide 140 text

5IFDIBMMFOHFTPGXFCBQQT XIBUXF`WFTPMWFEBOEXIBU`TOFYU "MFYFZ5BLUBSPW NPMFGSPHDPN *MMVTUSBUJPOTCZ-J[B;BGU JOTUBHSBNDPNDSJNJOBJ[B 'POUTVTFE+JT,BO *0TFWLB 1JYFM/&4

Slide 141

Slide 141 text

*OTUBHSBN!DSJNJOBJ[B #FIJOEUIFTDFOFT