Using Polymer and React on Electron- Electrolysis

Experiences with Javascript Frameworks and Electron

Transcript

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 Slide

17. Conclusion
    Could be but too early,
    WebApplications Koreaa
    

    View 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 Slide