Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Changeslog since v1.0 - Electron Teck Talks in Korea

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

Jimmy Moon

May 03, 2017
Tweet

More Decks by Jimmy Moon

Other Decks in Programming

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. 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. 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. 24

    View Slide

  25. 25

    View Slide

  26. 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. 29

    View Slide