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

Using Polymer and React on Electron- Electrolysis

Jimmy Moon
September 20, 2015
37

Using Polymer and React on Electron- Electrolysis

Experiences with Javascript Frameworks and Electron

Jimmy Moon

September 20, 2015
Tweet

Transcript

  1. Using Polymer and React on Electron
    Electrolysis
    @ragingwind
    WebApplications Koreaa

    View full-size slide

  2. WebApplications Koreaa
    Hulk Vs. Iron Man's Hulk Buster! — GeekTyrant - http://goo.gl/0ZiSY

    View full-size slide

  3. WebApplications Koreaa
    dSpxkd8.jpg (1440×900) - http://goo.gl/yeZ4jF

    View full-size slide

  4. Why?
    - So much experimental
    - React is cool
    - Polymer(1.0) will become lighten
    - Electron is renamed
    - Using components in app is New Gen
    - Reusing custom components with react
    WebApplications Koreaa

    View full-size slide

  5. Electrolysis
    - Electron app
    - React framework
    - Custom element
    via Polymer 0.9
    WebApplications Koreaa

    View full-size slide

  6. Electron
    - Formerly Atom shell,
    based on iojs and
    Chromium
    - No webpack,
    No browserfy
    - Easy transform
    - Yeoman generator
    WebApplications Koreaa

    View full-size slide

  7. Electron
    - Formerly Atom shell,
    based on iojs and
    Chromium
    - No webpack,
    No browserfy
    - Easy transform
    - Yeoman generator
    WebApplications Koreaa

    View full-size slide

  8. Electron
    - Formerly Atom shell,
    based on iojs and
    Chromium
    - No webpack,
    No browserfy
    - Easy transform
    - Yeoman generator
    WebApplications Koreaa

    View full-size slide

  9. Electron
    - Formerly Atom shell,
    based on iojs and
    Chromium
    - No webpack,
    No browserfy
    - Easy transform
    - Yeoman generator
    WebApplications Koreaa

    View full-size slide

  10. Electron
    - Formerly Atom shell,
    based on iojs and
    Chromium
    - No webpack,
    No browserfy
    - Easy transform
    - Yeoman generator
    WebApplications Koreaa

    View full-size slide

  11. Components
    - Component, Component
    - Concept
    - How to use
    - Virtual DOM,
    Shadow DOM
    WebApplications Koreaa

    View full-size slide

  12. Components
    - Component, Component
    - Concept
    - How to use
    - Virtual DOM,
    Shadow DOM
    WebApplications Koreaa
    React Components are code

    View full-size slide

  13. Components
    - Component, Component
    - Concept
    - How to use
    - Virtual DOM,
    Shadow DOM
    WebApplications Koreaa
    Web Components are first-class HTML elements

    View full-size slide

  14. Components
    - Component, Component
    - Concept
    - How to use
    - Virtual DOM,
    Shadow DOM
    WebApplications Koreaa
    React could use a first-class component after importing web
    components
    Issue: Not allow to use custom attribute name

    View full-size slide

  15. Components
    - Component, Component
    - Concept
    - How to use
    - Virtual DOM,
    Shadow DOM
    WebApplications Koreaa

    View full-size slide

  16. -
    Previews, not conclusion
    - React all the way down?
    - Components ecosystem
    - Performance issues
    - Machine readable vs Human readable
    - Virtual DOM and Shadow DOM
    - Facebook and Google
    - Flux and Firebase
    WebApplications Koreaa

    View full-size slide

  17. Conclusion
    Could be but too early,
    WebApplications Koreaa

    View full-size slide

  18. References
    WebApplications Koreaa
    - [electrolysis](https://goo.gl/SJi68w)
    - [Component Interop With React And Custom Elements](http://goo.gl/Lx6w45)
    - [newtriks/generator-react-webpack](https://goo.gl/gwC01i)
    - [node-jsx](https://goo.gl/V3M9V9)
    - [Complementarity of React and Web Components —
    WebComponents.org](http://goo.gl/jCTDtI)
    - [Combining React, Flux & Web Components — Futurice](http://goo.gl/ZGEdJn)

    View full-size slide