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
   

   View Slide

2. Sponsor
   2
   

   View Slide

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
   

   View Slide

4. Agenda
   ‑
   일렉트론 v1.0.0
   이후 변경사항 ‑ @Jimmy Moon / CodeBusking
   ‑ electron‑forge
   사용기 ‑ 김정용 /
   엔트리교육연구소
   ‑
   자동 업데이트 서버 및 클라이언트 제작 스토리 ‑
   이웅재 /
   스튜디오씨
   드
   4
   

   View Slide

5. Changeslog in Electron since v1.0.0
   5
   

   View Slide

6. View Slide

7. Electron: 1.6.6, Node: 7.4.0, Chromium: 56.0.2924.87, V8: 5.6.326.50
   7
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. View Slide

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
    

    View Slide

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
    

    View Slide

15. Reduce off‑heap peak memory usage by up to 20%
    Improved the parser's runtime performance
    15
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. V8 ECMAScript support (cont')
    Exponentiation operator
    l
    e
    t n = 3 *
    * 2 /
    /
    9
    20
    

    View Slide

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
    

    View Slide

22. Node.js ES2015 Support Table, Node 6.4
    이후 대부분의 ES2015
    지원
    22
    

    View Slide

23. Today Open Source Apps
    Sarah‑Seo/Inpad
    An 'alt+space' launcher for Windows
    윈도우즈 스크린세이버 샘플
    Touchbar sample rhysd/electron‑touchbar‑example
    electron‑builder
    를 이용한 일렉트론 자동 업데이트 앱
    23
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

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
    

    View Slide

28. Today Demo
    react‑ionize: A React renderer for building your entire Electron apps
    Angular2 + Electron custom render
    를 이용한 electron app
    28
    

    View Slide

29. View Slide