Electronを触ってみた

We Are JavaScripters! @2nd (2016/12/26) yamap_55

スライドとか

  • スライドはここで公開しています。
  • 間違えやツッコミがありましたら口頭、Twitterpull requestなどお気軽にどうぞ。

自己紹介

icon

  • twitter : yamap_55
  • Javaっ子。
  • Groovy好き
  • 最近JavaScriptが好き

Electron概要

  • デスクトップアプリケーションの開発/実行フレームワーク
  • マルチプラットフォーム
  • Web技術を使用して開発
    • HTML5、Node.js、JavaScript、CSS

開発元

Repository

github

3ヶ月前

github

GitHubのリポジトリスター数ランキング

17位!(2016/12/26 1:46時点)

github

事例

  • Visual Studio Code
  • Atom
  • Slack(デスクトップ版)
  • ChatWork(デスクトップ版)
  • Kobito for Windows

デスクトップアプリケーション

  • メインプロセスはNode.js
  • レンダリングプロセスはChromium
  • Webアプリケーションとブラウザを1つのパッケージとして、デスクトップアプリケーションを動作させる。

マルチプラットフォーム

  • Node.js、Chromiumが共にマルチプラットフォーム
  • 基本的にはWindows、Mac、Linuxでそのまま動く
    • メニューとか一部動かない部分もあるらしい

Web技術を使用して開発

  • HTML5、Node.js、JavaScript、CSS
  • 既存の技術がそのまま利用可能
  • 一番のメリットはここ!

既存の技術がそのまま利用可能

  • 新しく覚えることが少ない
  • Chromiumなので、最新の仕様で動作
    • HTML5、ES2015、2016、CSS3、WebComponents(参考)など
  • Webと違ってブラウザ毎の動作確認不要

デモ

  1. Hello World
  2. react + babel
  3. bulpでビルド

まとめ

  • Web技術を使用してデスクトップアプリケーションが開発可能
  • 最新の仕様で開発可能
  • Nodeのライブラリで色々便利

ご静聴ありがとうございました。