Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Ekosistem JavaScript di Indonesia

2.202 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

Ekosistem JavaScript di Indonesia

  1. 1. eKoSISTEm jaVascRIPT DI inDonESIa
  2. 2. ABouT mE
  3. 3. eKoSISTEm
  4. 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. 5. 1P - sumBER BELaJaR 2P - kELEngKaPan aLaT BanTu 3P - duKungan komunITaS 4P - foKuS DI fRonTEnD eKoSISTEm jaVascRIPT Time 000 Coin
  6. 6. 1P - sumBER BELaJaR 2P - kELEngKaPan aLaT BanTu 3P - duKungan komunITaS 4P - foKuS DI fRonTEnD eKoSISTEm jaVascRIPT Time 000 Coin
  7. 7. 1P - sumBER BELaJaR 2P - kELEngKaPan aLaT BanTu 3P - duKungan komunITaS 4P - foKuS DI fRonTEnD eKoSISTEm jaVascRIPT Time 000 Coin
  8. 8. 1P - sumBER BELaJaR 2P - kELEngKaPan aLaT BanTu 3P - duKungan komunITaS 4P - foKuS DI fRonTEnD eKoSISTEm jaVascRIPT Time 000 Coin
  9. 9. lEVEL 1 2 3pEmuLa pRoFESIonaL MaSTER Time 000 Coin
  10. 10. lEVEL 1 pEmuLa Time 000 Coin
  11. 11. lEVEL 1-1: MuLaI DaRI mana Time 005 Coin
  12. 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. 13. Time 010 Coin bELaJaR fRamEwoRK APa Angular Ember jQuery React Svelte Vue
  14. 14. Time 015 Coin MEETuP pER koTa MedanJS BaliJS SurabayaJS JogjaJS BandungJS JakartaJS 3.829 2.555 545510474 334
  15. 15. Time 020 Coin MEETuP pER fRamEwoRK Vue Angular React 3.829 2.555 545
  16. 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. 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. 18. lEVEL 1-2:
 buKu Time 040 Coin
  19. 19. buKu tERSEDIa React Vue Angular jQuery 0 22 1 10 111 Gramedia Ebook Time 045 Coin
  20. 20. lEVEL 1-3:
 kuRSuS vIDEo OnLInE Time 050 Coin
  21. 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. 22. vIEwER vIDEo OnLInE React Vue jQuery 98.015 73.380 55.796 Total Views Time 060 Coin
  23. 23. UnDERSTanDIng ConcuRREncy In NoDE js eVan puRnama Co-Founder, CTO at Qiscus
  24. 24. lEVEL 1 ComPLETED! ****
  25. 25. lEVEL 1: pEmuLa ✓ Pilihan Frontend Framework ✓ Dukungan Komunitas ✓ Buku yang tersedia ✓ Video course yang tersedia
  26. 26. lEVEL 2 pRoFESIonaL Time 070 Coin
  27. 27. CaRa bELaJaR
  28. 28. > Contoh aplikasi > Tutorial berbahasa Indonesia > Kelengkapan alat bantu, boilerplate, dll > Mulai menggunakan framework Time 070 Coin CaRa bELaJaR
  29. 29. lEVEL 2-1: ConToH APLIKaSI Time 075 Coin
  30. 30. Ember Svelte jQuery Angular Vue React 1.917.080 227.426 67.70133.8034.273108 ConToH APLIKaSI Time 080 Coin codesandbox.com
  31. 31. lEVEL 2-2: tuToRIaL BaHaSa inDonESIa Time 085 Coin
  32. 32. tuToRIaL baHaSa inDonESIa Svelte Ember Angular jQuery React Vue 14 1212 11 11 Time 090 Coin
  33. 33. lEVEL 2-3: ALaT BanTu Dan boILERPLaTE Time 100 Coin
  34. 34. ALaT banTu Angular Ember jQuery React Svelte Vue CDN CLI Generator * Time 105 Coin Routing State DevTools * *
  35. 35. buILDIng a faST & seO fRIEnDLy spA wITH AnguLaR jEcELyn YEEn Developer Expert Web, Angular Google Developer Expert
  36. 36. lEVEL 2-4: MuLaI MEnggunaKan Time 110 Coin
  37. 37. AnguLaR Time 115 Coin
  38. 38. $ npm install -g @angular/cli $ ng new jsday $ cd jsday $ ng serve --open AnguLaR Time 120 Coin
  39. 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. 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. 41. AnguLaR Time 135 Coin <!-- src/app/app.component.html --> <jsday></jsday>
  42. 42. AnguLaR Time 140 Coin
  43. 43. emBER Time 150 Coin
  44. 44. $ npm install -g ember-cli $ ember new jsday $ cd jsday $ ember serve emBER Time 155 Coin
  45. 45. emBER Time 160 // app/components/jsday.js import Component from '@ember/component'; export default Component.extend({ componentMessage: 'JSDay 2019!!!' }); Coin
  46. 46. emBER Time 165 <!-- app/templates/components/jsday.hbs --> <h2> {{componentMessage}} </h2> Coin
  47. 47. emBER Time 170 Coin <!-- app/templates/application.hbs —> {{jsday}} {{outlet}}
  48. 48. emBER Time 175 Coin
  49. 49. JQuERy Time 180 Coin
  50. 50. JQuERy Time 205 Coin $ mkdir jsday $ cd jsday
  51. 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. 52. JQuERy Time 190 Coin // app.js $(document).ready(function() { $("#app").html("<h2>JSDay 2019!!!</h2>"); });
  53. 53. JQuERy Time 195 Coin
  54. 54. rEacT Time 200 Coin
  55. 55. rEacT Time 205 Coin $ mkdir jsday $ cd jsday
  56. 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. 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. 58. rEacT Time 220 Coin
  59. 59. sVELTE Time 230 Coin
  60. 60. sVELTE Time 235 $ npx degit sveltejs/template jsday $ cd jsday $ npm install $ npm run dev Coin
  61. 61. sVELTE Time 240 Coin <!-- src/JSDay.svelte --> <h2>JSDay 2019!!!</h2>
  62. 62. sVELTE Time 245 Coin <!-- src/App.svelte --> <script> import JSDay from './JSDay.svelte'; </script> <style> </style> <div> <JSDay /> </div>
  63. 63. sVELTE Time 250 Coin
  64. 64. vuE Time 260 Coin
  65. 65. vuE Time 265 Coin $ mkdir jsday $ cd jsday
  66. 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. 67. vuE Time 280 Coin
  68. 68. lEVEL 2-6: duKungan komunITaS Time 290 Coin
  69. 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. 70. socIaL MEDIa jQuery Svelte Ember Vue React Angular 335.000331.000 137.000 39.500 11.1006.314 Followers Time 305 Coin
  71. 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. 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. 73. UngguL & bERDIKaRI DEngan OPEn-SouRcE ARIya hIDayaT Technology Leader Hyperjump
  74. 74. lEVEL 2-7: puSTaKa pEnDuKung Time 320 Coin
  75. 75. Svelte Ember jQuery Vue Angular React 46.193 15.89114.511 3.929 672311 puSTaKa pEnDuKung Time 325 Coin
  76. 76. lEVEL 2-8: pERFoRma Time 330 Coin
  77. 77. pEnggunaVue 1% React 7% jQuery 90% Angular 2% Time 335 Chrome UX Report Coin 2014-2019
  78. 78. Vue 8% React 73% Ember 3% Angular 17% pEngguna Time 340 Chrome UX Report Coin 2014-2019
  79. 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. 80. hanDS on pERFoRmancE dEBuggIng wITH THE BRowSER dEVtooLS ALEx laKaToS JavaScript Developer Advocate at Nexmo
  81. 81. lEVEL 2-9: lowongan PEKERJaan Time 350 Coin
  82. 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. 83. lowongan PEKERJaan Ember Vue Angular React jQuery 2.832 605 325316 61 LinkedIn Indonesia Time 360 Coin
  84. 84. lowongan PEKERJaan Ember Vue Angular jQuery React 57 32 21 8 2 Time 360 Coin Urbanhire
  85. 85. lEVEL 2 ComPLETED! *********
  86. 86. lEVEL 2: pRoFESIonaL ✓ Contoh Aplikasi ✓ Tutorial Berbahasa Indonesia ✓ Alat Bantu dan Boilerplate ✓ Mulai Menggunakan ✓ Dukungan Komunitas
  87. 87. ✓ Pustaka Pendukung ✓ Performa ✓ Lowongan Perkerjaan lEVEL 2: pRoFESIonaL
  88. 88. lEVEL 3 MaSTER Time 400 Coin
  89. 89. lEVEL 3-1:
 taLEnTa tERSEDIa Time 405 Coin
  90. 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. 91. Svelte Ember Vue React Angular jQuery 15.718 5.1425.040 3.124 7338 taLEnTa tERSEDIa Time 415 Coin Geekhunter
  92. 92. lEVEL 3-2: MaTuRITy Time 415 Coin
  93. 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. 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. 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. 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. 97. lEVEL 3 ComPLETED! **
  98. 98. lEVEL 3: MaSTER ✓ Talenta Tersedia ✓ Maturity
  99. 99. MIcRo fRonTEnD: A JouRnEy SHIFTIng monoLITH To mIcRo fe dIKy ARga AnggaRa Frontend Developer at Bukalapak
  100. 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. 101. bonuS lEVEL: rEcaP
  102. 102. Yohan Totting @tyohan Ahmad Rizqi Meydiarso @rizqme Herlambang Srihartono @herlambang_srihartono Hisma Mulya @hismamaz Jecelyn Yeen @JecelynYeen Ken Ratri Iswari @kenratriiswari konTRIBuToR
  103. 103. suRVEy http://ekosistemjs.herokuapp.com Saya butuh bantuan kontribusi teman-teman untuk mengisi survey agar mendapatkan insight yang lebih menarik kedepannya.
  104. 104. tERImaKaSIH @rizafahmi22 fb.me/rizafahmi linkedin.com/in/rizafahmi rizafahmi.com riza@hacktiv8.com

×