Melihat perkembangan JavaScript di Indonesia dari berbagai perspektif dan sudut pandang. Ini merupakan materi keynote di JSDay 2019.

1. eKoSISTEm
jaVascRIPT
DI inDonESIa

2. ABouT mE

3. eKoSISTEm

4. environment
interactions
organisms
community“An ecosystem is a community of
living organisms and their
interactions with their abiotic
(non-living) environment.”
Ecology of ecosystems

5. 1P - sumBER BELaJaR
2P - kELEngKaPan aLaT BanTu
3P - duKungan komunITaS
4P - foKuS DI fRonTEnD
eKoSISTEm
jaVascRIPT
Time
000
Coin

6. 1P - sumBER BELaJaR
2P - kELEngKaPan aLaT BanTu
3P - duKungan komunITaS
4P - foKuS DI fRonTEnD
eKoSISTEm
jaVascRIPT
Time
000
Coin

7. 1P - sumBER BELaJaR
2P - kELEngKaPan aLaT BanTu
3P - duKungan komunITaS
4P - foKuS DI fRonTEnD
eKoSISTEm
jaVascRIPT
Time
000
Coin

8. 1P - sumBER BELaJaR
2P - kELEngKaPan aLaT BanTu
3P - duKungan komunITaS
4P - foKuS DI fRonTEnD
eKoSISTEm
jaVascRIPT
Time
000
Coin

9. lEVEL
1 2 3pEmuLa pRoFESIonaL MaSTER
Time
000
Coin

10. lEVEL 1
pEmuLa
Time
000
Coin

11. lEVEL 1-1:
MuLaI DaRI mana
Time
005
Coin

12. Time
005
Coin
Harus belajar JavaScript dulu? (Ya)
Harus menguasai HTML dan CSS dulu? (Ya)
> Belajar framework apa?
> Lingkungan sekitar banyak pengguna apa?
> Berapa banyak buku yang tersedia?
> Video course yang tersedia?
MuLaI daRI Mana

13. Time
010
Coin
bELaJaR
fRamEwoRK APa
Angular
Ember
jQuery
React
Svelte
Vue

14. Time
015
Coin
MEETuP
pER koTa
MedanJS BaliJS SurabayaJS JogjaJS BandungJS JakartaJS
3.829
2.555
545510474
334

15. Time
020
Coin
MEETuP
pER fRamEwoRK
Vue Angular React
3.829
2.555
545

16. Time
025
Coin
foRum OnLInE
fb GrouP
Svelte Ember Vue React Angular jQuery
288
1.020
1.8002.160
1
8
12.0009.875
7.0006.400
1412
86
444
1
Tahun
Anggota
Percakapan / tahun

17. Time
030
Coin
Angular Vue React
6.364
2.906
1.977
5.142
4.625
3.257
Anggota
Percakapan
foRum OnLInE
tELEgRam
carik.id
Agustus 2019 - 13 September 2019

18. lEVEL 1-2:
buKu
Time
040
Coin

19. buKu tERSEDIa
React Vue Angular jQuery
0
22
1
10
111
Gramedia
Ebook
Time
045
Coin

20. lEVEL 1-3:
kuRSuS vIDEo OnLInE
Time
050
Coin

21. kuRSuS vIDEo
OnLInE
jQuery Vue React
7
66
5
11
2
1
0
2
00 0
1
0
Malescast
Dumbways
IDRails
KODE
Sekolah Koding
Time
055
Coin

22. vIEwER vIDEo
OnLInE
React Vue jQuery
98.015
73.380
55.796
Total Views
Time
060
Coin

23. UnDERSTanDIng ConcuRREncy
In NoDE js
eVan puRnama
Co-Founder, CTO at Qiscus

24. lEVEL 1
ComPLETED!
****

25. lEVEL 1:
pEmuLa
✓ Pilihan Frontend Framework
✓ Dukungan Komunitas
✓ Buku yang tersedia
✓ Video course yang tersedia

26. lEVEL 2
pRoFESIonaL
Time
070
Coin

27. CaRa
bELaJaR

28. > Contoh aplikasi
> Tutorial berbahasa Indonesia
> Kelengkapan alat bantu, boilerplate, dll
> Mulai menggunakan framework
Time
070
Coin
CaRa bELaJaR

29. lEVEL 2-1:
ConToH
APLIKaSI
Time
075
Coin

30. Ember Svelte jQuery Angular Vue React
1.917.080
227.426
67.70133.8034.273108
ConToH APLIKaSI
Time
080
Coin
codesandbox.com

31. lEVEL 2-2:
tuToRIaL BaHaSa
inDonESIa
Time
085
Coin

32. tuToRIaL baHaSa
inDonESIa
Svelte Ember Angular jQuery React Vue
14
1212
11
11
Time
090
Coin

33. lEVEL 2-3:
ALaT BanTu Dan
boILERPLaTE
Time
100
Coin

34. ALaT banTu
Angular
Ember
jQuery
React
Svelte
Vue
CDN CLI Generator
*
Time
105
Coin
Routing State DevTools
* *

35. buILDIng a faST & seO
fRIEnDLy spA wITH AnguLaR
jEcELyn YEEn
Developer Expert Web, Angular
Google Developer Expert

36. lEVEL 2-4:
MuLaI MEnggunaKan
Time
110
Coin

37. AnguLaR
Time
115
Coin

38. $ npm install -g @angular/cli
$ ng new jsday
$ cd jsday
$ ng serve --open
AnguLaR
Time
120
Coin

39. AnguLaR
Time
125
Coin
// src/app/jsday.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'jsday',
template: '<h2>JSDay 2019!!!</h2>'
})
export class JSDayComponent {}

40. AnguLaR
Time
130
Coin
// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { JSDayComponent } from './jsday.component';
@NgModule({
declarations: [
AppComponent,
JSDayComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

41. AnguLaR
Time
135
Coin
<!-- src/app/app.component.html -->
<jsday></jsday>

42. AnguLaR
Time
140
Coin

43. emBER
Time
150
Coin

44. $ npm install -g ember-cli
$ ember new jsday
$ cd jsday
$ ember serve
emBER
Time
155
Coin

45. emBER
Time
160
// app/components/jsday.js
import Component from '@ember/component';
export default Component.extend({
componentMessage: 'JSDay 2019!!!'
});
Coin

46. emBER
Time
165
<!-- app/templates/components/jsday.hbs -->
<h2>
{{componentMessage}}
</h2>
Coin

47. emBER
Time
170
Coin
<!-- app/templates/application.hbs —>
{{jsday}}
{{outlet}}

48. emBER
Time
175
Coin

49. JQuERy
Time
180
Coin

50. JQuERy
Time
205
Coin
$ mkdir jsday
$ cd jsday

51. JQuERy
Time
185
Coin
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSDay 2019!!</title>
<script type="text/javascript" src="https://code.jquery.com/
jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>

52. JQuERy
Time
190
Coin
// app.js
$(document).ready(function() {
$("#app").html("<h2>JSDay 2019!!!</h2>");
});

53. JQuERy
Time
195
Coin

54. rEacT
Time
200
Coin

55. rEacT
Time
205
Coin
$ mkdir jsday
$ cd jsday

56. rEacT
Time
210
Coin
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSDay 2019</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-
dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script src="app.js">
</script>
</body>
</html>

57. rEacT
Time
215
Coin
// app.js
'use strict';
class App extends React.Component {
render() {
return React.createElement('h2', {}, 'JSDay
2019!!!');
}
}
ReactDOM.render(React.createElement(App),
document.getElementById('root'));

58. rEacT
Time
220
Coin

59. sVELTE
Time
230
Coin

60. sVELTE
Time
235
$ npx degit sveltejs/template jsday
$ cd jsday
$ npm install
$ npm run dev
Coin

61. sVELTE
Time
240
Coin
<!-- src/JSDay.svelte -->
<h2>JSDay 2019!!!</h2>

62. sVELTE
Time
245
Coin
<!-- src/App.svelte -->
<script>
import JSDay from './JSDay.svelte';
</script>
<style>
</style>
<div>
<JSDay />
</div>

63. sVELTE
Time
250
Coin

64. vuE
Time
260
Coin

65. vuE
Time
265
Coin
$ mkdir jsday
$ cd jsday

66. vuE
Time
270
Coin
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>JSDay 2019</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'JSDay 2019!!!'
}
})
</script>
</body>
</html>

67. vuE
Time
280
Coin

68. lEVEL 2-6:
duKungan
komunITaS
Time
290
Coin

69. tanya jawaB
sTacKoVERFLow
Svelte Ember Vue React Angular jQuery
95.162
35.86929.9028.1572.65833
966.423
179.868156.642
40.12123.331252
Pertanyaan
Belum terjawab
Time
295
Coin

70. socIaL MEDIa
jQuery Svelte Ember Vue React Angular
335.000331.000
137.000
39.500
11.1006.314
Followers
Time
305
Coin

71. rEPoSIToRI
Ember Svelte Angular jQuery React Vue
146.580
134.875
52.07950.449
22.54321.148
5.9796.6353.4653.2524731.026
Watches
Stars
Time
310
Coin

72. Svelte Angular Vue React Ember jQuery
6.411
8.92011.258
3.034
15.111
4.985
150
761
1.307
279
978
189
108
66
4
2
Ages
Contributors
Commits
Time
310
Coin
rEPoSIToRI

73. UngguL & bERDIKaRI DEngan
OPEn-SouRcE
ARIya hIDayaT
Technology Leader Hyperjump

74. lEVEL 2-7:
puSTaKa
pEnDuKung
Time
320
Coin

75. Svelte Ember jQuery Vue Angular React
46.193
15.89114.511
3.929
672311
puSTaKa
pEnDuKung
Time
325
Coin

76. lEVEL 2-8:
pERFoRma
Time
330
Coin

77. pEnggunaVue
1%
React
7%
jQuery
90%
Angular
2%
Time
335
Chrome UX Report
Coin
2014-2019

78. Vue
8%
React
73%
Ember
3%
Angular
17%
pEngguna
Time
340
Chrome UX Report
Coin
2014-2019

79. pERFoRma
tERBaIK
Ember Svelte jQuery Angular Vue React
0,442
0,397
0,3810,374
0,345
0,322
0,0580,0520,0560,048
0,03
0,052
1st Input Delay (AVG)
1st Contentful Paint (AVG)
Time
345
Chrome UX Report
Coin
2014-2019

80. hanDS on pERFoRmancE
dEBuggIng wITH THE BRowSER
dEVtooLS
ALEx laKaToS
JavaScript Developer Advocate
at Nexmo

81. lEVEL 2-9:
lowongan
PEKERJaan
Time
350
Coin

82. lowongan
PEKERJaan
Svelte Ember Vue Angular React jQuery
1.274
691
520
208
32 24
243
81
2490
Stackoverflow Jobs
Upwork
Time
355
Coin

83. lowongan
PEKERJaan
Ember Vue Angular React jQuery
2.832
605
325316
61
LinkedIn Indonesia
Time
360
Coin

84. lowongan
PEKERJaan
Ember Vue Angular jQuery React
57
32
21
8
2
Time
360
Coin
Urbanhire

85. lEVEL 2
ComPLETED!
*********

86. lEVEL 2:
pRoFESIonaL
✓ Contoh Aplikasi
✓ Tutorial Berbahasa Indonesia
✓ Alat Bantu dan Boilerplate
✓ Mulai Menggunakan
✓ Dukungan Komunitas

87. ✓ Pustaka Pendukung
✓ Performa
✓ Lowongan Perkerjaan
lEVEL 2:
pRoFESIonaL

88. lEVEL 3
MaSTER
Time
400
Coin

89. lEVEL 3-1:
taLEnTa
tERSEDIa
Time
405
Coin

90. taLEnTa
tERSEDIa
Svelte Ember Vue Angular React jQuery
2.289.094
725.882
612.797
410.402
41.6391.351 20.4987.7832.5624.7141526
Indonesia
Dunia
Time
410
Coin
Linkedin

91. Svelte Ember Vue React Angular jQuery
15.718
5.1425.040
3.124
7338
taLEnTa
tERSEDIa
Time
415
Coin
Geekhunter

92. lEVEL 3-2:
MaTuRITy
Time
415
Coin

93. rELEaSE
CycLE
Svelte Angular React Vue Ember jQuery
427
1.115
505
1.876
3.777
2.492
15
4841,33
19,67
87,75
139
10866
4
2
Ages
Releases / year
Commits / year
Time
420
Coin

94. iSSuES
Svelte jQuery Ember React Vue Angular
2.662
23166221971334
16.001
8.101
7.275
5.813
1.830
160
Closed
Open
Time
430
Coin

95. puLL rEquESTS
Vue Svelte jQuery React Ember Angular
436862011727113
13.265
8.5928.364
2.050
1.5091.499
Merged Open
Time
435
Coin

96. tESTIng
jQuery Svelte Vue Ember React Angular
738.525
393.078
186.631184.092
97.181
53.441 30.709
5.2665.7601.2672.351872
Test Case
LOC
Time
445
Coin

97. lEVEL 3
ComPLETED!
**

98. lEVEL 3:
MaSTER
✓ Talenta Tersedia
✓ Maturity

99. MIcRo fRonTEnD: A JouRnEy
SHIFTIng monoLITH To mIcRo fe
dIKy ARga AnggaRa
Frontend Developer at Bukalapak

100. MaTERI kEREn
laInnya
lEVERagIng CLouD buILDIng
bLocKS To CREaTE hIgH-
pERF WEB APP
Irving Hutagalung, Microsoft
MacHInE lEaRnIng on
THE WEB
Galuh Sahid, Gojek
dESIgnIng wITH CoDE
Adityo Pratomo, Tetrate
MIcRoSERVIcE paTTERn wITH
WoRKFLow engInE uSIng
NoDEjs
Rheza Satria, BRI
how To buILD 12-facToR
APPLIcaTIon In NoDEjs uSIng
docKER
Aditya Satrya, Jabar Digital Service

101. bonuS lEVEL:
rEcaP

102. Yohan Totting
@tyohan
Ahmad Rizqi Meydiarso
@rizqme
Herlambang Srihartono
@herlambang_srihartono
Hisma Mulya
@hismamaz
Jecelyn Yeen
@JecelynYeen
Ken Ratri Iswari
@kenratriiswari
konTRIBuToR

103. suRVEy
http://ekosistemjs.herokuapp.com
Saya butuh bantuan kontribusi
teman-teman untuk mengisi survey
agar mendapatkan insight yang lebih
menarik kedepannya.

104. tERImaKaSIH
@rizafahmi22
fb.me/rizafahmi
linkedin.com/in/rizafahmi
rizafahmi.com
riza@hacktiv8.com