Changeslog since v1.0 - Electron Teck Talks in Korea

What changes in Electron from its released v1.0 in terms of Chromium, V8 and Node

Transcript

1. TechTalk 2017‑04‑27, Seoul, Korea. Hosted by @Jimmy Moon 1
2. Sponsor 2
3. Electron Korea Meetup.com: Closed Facebook electronkorea: https://www.facebook.com/groups/electronkorea/ Slack: https://electron‑kr.slack.com/messages Join us: https://electron‑kr.herokuapp.com/ 이후 미트업: 웨비나(Webinar) 고려중 3
4. Agenda ‑ 일렉트론 v1.0.0 이후 변경사항 ‑ @Jimmy Moon / CodeBusking ‑ electron‑forge 사용기 ‑ 김정용 / 엔트리교육연구소 ‑ 자동 업데이트 서버 및 클라이언트 제작 스토리 ‑ 이웅재 / 스튜디오씨 드 4
5. Changeslog in Electron since v1.0.0 5
7. Electron: 1.6.6, Node: 7.4.0, Chromium: 56.0.2924.87, V8: 5.6.326.50 7
8. Electron APIs app: relaunch() / dock.downloadFinished() / dock.isVisible() / setBadgeCount(count) / getBadgeCount() / setLoginItemSettings() / getLoginItemSettings() / setUserTasks() / app.setJumpList() / getJumpListSettings() / app.getFileIcon() / setContentBounds() / getContentBounds() / setThumbnailToolTip() / setAboutPanelOptions() / previewFile() net: HTTP/HTTPS requests using Chromium's native networking library menuItem, quit, togglefullscreen, zoomin, zoomout, resetzoom startspeaking, stopspeaking roles 8
9. Electron APIs (Cont') web‑contents: startDrag() / capturePage() / copyImageAt() / cursor‑changed event / Zoom methods / isMainFrame parameter / executeJavaScript now returns a Promise / context‑menu event / before‑input‑event browser‑window: setIcon() / setThumbnailClip() / thickFrame option / toolbar type / capturePage() / etAutohideCursor() / postData option at loadURL() / webPreferences supports devtools option touch‑bar 9
10. Electron APIs (Cont') clipboard: readBookmark() / writeBookmark() / readFindText() / writeFindText() / readBuffer download‑item: getSavePath() / setSavePath() system‑preferences: isSwipeTrackingFromScrollEventsEnabled() / postNotification() / postLocalNotification() / subscribeLocalNotification() / unsubscribeLocalNotification() shell: showItemInFolder() and openItem() return values / writeShortcutLink() / readShortcutLink() / openExternal() is asyn session: getBlobData() / createInterruptedDownload () / clearAuthCache() 10
11. Electron APIs (Cont') native‑image: crop() / resize() / getAspectRatio() / createFromBuffer() / addRepresentation() / toBitmap() / getBitmap() crash‑reporter: get/setUploadToServer to dynamically configure / renamed the autoSubmit option protocol.interceptHttpProtocol() / tray.getBounds() / webview.capturePage() / dialog.showHiddenFiles option / webFrame.getResourceUsage(), clearCache() / autoUpdater more details to error message / process.defaultApp Support for native PDF rendering / ELECTRON_NO_ASAR environment variable / Node integration in web workers / PDB files in releases for Windows 11
13. V8 Performance improvements New pipeline, Ignition Interpreter and TurboFan optimizer Improving page startup time Greatly improved ES2015 performance, destructing, for‑of‑array, generator, spread and ... for‑in, Object.assign/keys/hasOwnProperty, Math.floor/round/ceil, Array.prototype.push/isArray/join/toString, flattening repeat strings e.g. '.'.repeat(1000), Promise 13
14. V8 Ignition Interpreter and TurboFan pipeline Ignition Interpreter: optimized performance for peak‑memory and low‑memory Turborfan: optmizer for more powerfuloptimizing compiler of ES.next 14
15. Reduce off‑heap peak memory usage by up to 20% Improved the parser's runtime performance 15
16. V8 ECMAScript support Symbol.species c l a s s M y A r r a y e x t e n d s A r r a y { / / O v e r w r i t e s p e c i e s t o t h e p a r e n t A r r a y c o n s t r u c t o r s t a t i c g e t [ S y m b o l . s p e c i e s ] ( ) { r e t u r n A r r a y ; } } v a r a = n e w M y A r r a y ( 1 , 2 , 3 ) ; v a r m a p p e d = a . m a p ( x = > x * x ) ; c o n s o l e . l o g ( m a p p e d i n s t a n c e o f M y A r r a y ) ; / / f a l s e c o n s o l e . l o g ( m a p p e d i n s t a n c e o f A r r a y ) ; / / t r u e 16
17. V8 ECMAScript support (cont') Function name inference c l a s s C o n t a i n e r { . . . S y m b o l . i t e r a t o r { . . . } . . . } l e t c = n e w C o n t a i n e r ; / / L o g s " [ S y m b o l . i t e r a t o r ] " . c o n s o l e . l o g ( c [ S y m b o l . i t e r a t o r ] . n a m e ) ; 17
18. V8 ECMAScript support (cont') Symbol.hasInstance, custom instanceof behavior c l a s s M y A r r a y { s t a t i c [ S y m b o l . h a s I n s t a n c e ] ( i n s t a n c e ) { r e t u r n A r r a y . i s A r r a y ( i n s t a n c e ) ; } } c o n s o l e . l o g ( [ ] i n s t a n c e o f M y A r r a y ) ; / / t r u e 18
19. V8 ECMAScript support (cont') for‑of, loop iterating over iterable objects (including Array, Map, Set, String, TypedArray, arguments l e t i t e r a b l e = [ 1 0 , 2 0 , 3 0 ] ; f o r ( l e t v a l u e o f i t e r a b l e ) { v a l u e + = 1 ; c o n s o l e . l o g ( v a l u e ) ; } / / 1 1 / / 2 1 / / 3 1 19
20. V8 ECMAScript support (cont') Exponentiation operator l e t n = 3 * * 2 / / 9 20
21. async / await / / p r o m i s e f u n c t i o n l o g F e t c h ( u r l ) { r e t u r n f e t c h ( u r l ) . t h e n ( r e s p o n s e = > r e s p o n s e . t e x t ( ) ) . t h e n ( t e x t = > { c o n s o l e . l o g ( t e x t ) ; } ) . c a t c h ( e r r = > { c o n s o l e . e r r o r ( ' f e t c h f a i l e d ' , e r r ) ; } ) ; } / / a s y n c / a w a i t v e r s i o n t r y { c o n s t r e s p o n s e = a w a i t f e t c h ( u r l O p e n S o u r c e c o n s o l e . l o g ( a w a i t r e s p o n s e . t e x t ( ) ) ; } c a t c h ( e r r ) { c o n s o l e . l o g ( ' f e t c h f a i l e d ' , e r r ) ; } } s Custom elements V1‑ Mobile target features: Pointer event, persistent storage, rich notification Web Share API, Web Bluetooth API, WebVR, WebGL 2.0 21
22. Node.js ES2015 Support Table, Node 6.4 이후 대부분의 ES2015 지원 22
23. Today Open Source Apps Sarah‑Seo/Inpad An 'alt+space' launcher for Windows 윈도우즈 스크린세이버 샘플 Touchbar sample rhysd/electron‑touchbar‑example electron‑builder 를 이용한 일렉트론 자동 업데이트 앱 23
27. Today Open Source Packages OAuth authenticates your Electron app React Hot Module Loading forge beta site: Electron Forge Spell Check, 한글가능 Automatically move Electron apps to the Applications directory Platform detection for Electron, Web Browser and Node Quickly inspect an element at mouse position Templates bundled with Electron Forge 27
28. Today Demo react‑ionize: A React renderer for building your entire Electron apps Angular2 + Electron custom render 를 이용한 electron app 28