JS Meetup Chișinău #1

Transcript

1. Converting existing apps to Electron Ivan Zarea
 @minivaaan
2. Case study
3. Unusual editing experience
4. Difficult to setup
5. Not easy to maintain //-- // This file is part of Sonic Pi: http://sonic-pi.net // Full project source: https://github.com/samaaron/sonic-pi // License: https://github.com/samaaron/sonic-pi/blob/master/LICENSE.md // // Copyright 2013, 2014, 2015 by Sam Aaron (http://sam.aaron.name). // All rights reserved. // // Permission is granted for use, copying, modification, and // distribution of modified versions of this work as long as this // notice is included. //++ // Standard stuff #include <iostream> #include <math.h> #include <sstream> #include <fstream> // Qt stuff #include <QDate> #include <QDesktopServices> #include <QDir> #include <QAction> #include <QApplication> #include <QCloseEvent> #include <QFile> #include <QFileInfo> #include <QFileDialog> #include <QIcon> #include <QMenu> #include <QMenuBar> #include <QMessageBox> #include <QDockWidget> #include <QPoint> #include <QSettings> #include <QSize> #include <QStatusBar> #include <QTextEdit>
6. In search for a solution • Extend existing editors
 (textmate, limetext, emacs) • Switch from QScintilla to something else
 (what exactly?) • Do something new
7. Electron & nw.js
8. Code // Global App skeleton for backbone var App = new Backbone.Marionette.Application(); _.extend(App, { Controller: {}, View: {}, Model: {}, Page: {}, Scrapers: {}, Providers: {}, Localization: {} });
9. Styling .loading position: absolute background-color: $BgColor1 -webkit-user-select: none width 100% height 100% opacity 1 overflow hidden margin auto left 0 right 0 padding-top $TitleHeight -webkit-backface-visibility hidden
10. Layout <ul class="nav nav-hor left"> <li class=“source showMovies” title="YTS"> <%= i18n.__("Movies") %> </li> <li class="source showShows” title=“TVApi"> <%= i18n.__("TV Series") %> </li> <li class="source showAnime” title=“Haruhichan"> <%= i18n.__("Anime") %> </li> </ul>
12. Let’s do this
13. How it works OS App Frontend Main
14. Back to my story
15. :( on a raspberry Pi it maxes out the cpu freezes the app basically and you get
 an application not responding dialog
16. Discussion Performance Look & Feel System Integration Distribution
17. Examples • Chat app • Movie player • Mac + Windows app that searches for GIFs
18. Leanote
19. Mongo management studio
20. Akiee
21. Sputnik
22. Atom
23. Hack?