Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Download as PPTX, PDF0 likes325 views
This document discusses using Node.js and the Electron library for desktop application development. It covers topics like using Electron to build cross-platform desktop apps with a single codebase, initializing Electron projects using Electron Forge, the main and renderer processes in Electron, UI development with frameworks like Aurelia, debugging, testing, and packaging desktop apps.
Володимир Дубенко "Node.js for desktop development (based on Electron library)"
- 1. Volodymyr Dubenko Materialise Node.js for desktop development (based on Electron library)
- 2. About me Was working as Asp.net developer, tech lead, team lead, project and product manager Now: Architect at Materialise
- 3. Node.js for desktop development (based on Electron library)
- 5. Need: Product for manufacturing
- 6. Technology
- 7. Experiment!
- 9. Electron
- 10. … and many more Visual Studio Code
- 11. Cross-platform Single code for all platforms
- 12. Community 24 460 GitHub repositories 1875 npm packages
- 14. install Node.js & Git $ npm install -g electron-forge $ electron-forge init hello-world $ cd hello-world $ electron-forge start
- 18. Mainprocess Renderer process #1 Renderer process #2 Renderer process #3
- 19. UI development
- 23. $ npm install electron –g $ npm install aurelia-cli –g $ au new electron-au-app $ npm install electron --save-dev Add to index.html Modify package.json electron quick start -> electron-index.js
- 25. $ au run --watch
- 27. Debugging
- 29. Communication
- 33. Main process Renderer process A microservice
- 34. >> Testing
- 37. Main process Renderer process Test runner Jasmine Karma Test framework Jasmine Jasmine Debugging VS Code Chrome
- 38. Packaging
- 39. AU • Transpile • Markup, CSS • Bundle Electron • Build config • Pack
- 40. electron-builder
- 41. Challenges
- 42. WCF + NTLM authentication =
- 50. From what to start
- 52. Thanks!
Editor's Notes
- #3: Спочатку трохи про себе
- #5: Чому я обрав Електрон для розробки?
- #6: Нам потрібно було створити продукт для автоматизації 3D друку. Багато розповісти не можу, тільки скажу, що це виробництво окулярів для одного відомого бренда
- #7: Мені потрібно було вибрати на чому писати новий продукт
- #8: Було сильне бажання поексперементувати з технологіями і, можливо, обрати для компанії альтернативу для Майкрософт технологій
- #9: Виникла ідея, що можна спробувати створити продукт на веб технологіях
- #10: Основні варіанти: Electron – в минулому Atom-shell, створена і підтримується GitHub командою NW.js – в минулому node-webkit – створена Intel командою Архітектура цих бібліотек різна, але обидва вони мають багато інструментів, велику ком’юніті і однаково можуть бути використані для ваших проектів Мій вибір пав на Електрон через більшу ком’юніті,
- #11: Також при виборі імпонувало те, що вже багато смачних речей написано на Електроні
- #12: Також треба сказати, що за допомогою Електрона можна створити кросс-платформ продукт і з єдиним code base запускати продукт на Wim, Mac, Linux
- #13: На даний момент Електрон має чималу ком’юніті Можна знайти на гітхабі велику кількість репозиторіїв і NPM пакетів, пов’язаних з Електроном
- #14: Щоб зрозуміти чи Електрон підходить нашим цілям ми вирішили почати з неличкого Proof of Concept
- #15: Для створення ходячого костяка нам допоможе electron-forge – це CLI створений електрон командою
- #16: Після запуску ми побачимо ось такий результат Електрон використовує Хроміум для рендерингу інтерфейсу
- #17: Давайте подивимось на код створеної аппки У нас є стандартна структура Node.js аплікухи – package.json файл із залежностями і конфігурацією нашої аппки
- #18: Давайте подивимось на index.js файл. В ньому вся логіка по керування нашим основним процесом app – class for app lifecycle BrowserWindow – створення і керування вікнами
- #19: Електрон аппка складається з: Основного процесу, який створює і керує вікнами Кожне вікно запускається в окремому ізольованому процесі, яке хоститься в Хроміумі V8 ES2017
- #20: Далі нам треба було створити інтерфейс Враховуючи як Електрон створює і працює з вікнами ми вирішили, що найпростішим рішенням було б – створення Single Page Application
- #21: Ось як виглядає інтерфейс нашого продукту Давайте подивимось як ми зробили
- #22: Ми вибирали між наступними фреймворками. Для всіх фреймоворків можна знайти Quick-start гайди і Boiler plates на гітхабі, а також велику кількість блог постів. Зупинились ми на Аурелії через простоту створення темплейтів сторінок і контролів
- #23: Якщо хтось із вас не знайомий з Аурелією, то ось як виглядає теплейт view на Аурелії Як ви бачите – це звичайний HTML з атрибутами Аурелії
- #24: 1. Нажаль electron-forge не мав теплейту для Аурелії, тому ми пішли іншим шляхом 2. … code 3. Цим шляхом можна конвертувати будь-який веб продукт (написаний чи на Аурелії, чи на будь-чому іншому) – на Електрон додаток
- #25: Дизайн нашого продукту був побудований на Material Design Lite
- #26: 1. UI Dev -> web mode За допомогою CLI Аурелії (au run --watch) після змін в коді, відбувався live reload сторінки
- #27: Також при розробці інтерфейсу допомогли VS плагіни для Аурелії
- #31: Як була організована комунікація між Node і Chromium процесами
- #32: 1. Для комунікації між процесами ми обрали ipc-promise пакет. Це wrapper над вбудованим в Електрон пакетами ipcMain + ipcRenderer, який дозволяє використовувати promises як результат вашої функції Add packet + include into Au bundle 2. Main process: ipcPromise = EventEmitter – subscribing for named events 3. Renderer process - call
- #33: Як була організована комунікація між App і Microservices
- #34: 1. Для отримання даних від microservices ми організували наступну схему: Рендерер процес робить запит в основний процес, а той в свою чергу звертається до microservice І зворотнім чином дані ідуть назад 2. Ось приклад коду, який робить запит до microservice і повертає promise Цікавою особливістю роботи пакету ipc-promise є те, що promise не може бути rejected, інакше рендерер процес не отримає response Така схема була обрана для того, щоб не мати проблем з cross-damain викликами (CORS) Також можна звертатись до мікросервісів із рендерер процесу, тоді ви уникнете дублювання коду, але потрібно буде вирішити питання з cross-damain викликами
- #36: Для тестування ми використовуємо дещо різні підходи для Main process і Renderer Process
- #37: Для тестування main process -> jasmine test runner Для дебагу використовуємо VS Code
- #38: Для Renderer process ми використовуємо тест раннер – Карму. Тест фреймворк – Jasmine Для дебагу використовуємо Chrome Як результат у нас немає інтеграційних тестів між двома процами
- #41: Icon added, product name from package.json, ярлик на робочу столі – all with help of small configuration No configuration installer Size installer – 57 MB, Installed app – 262 MB
- #43: Біль / Challenge – це інтеграція із WCF сервісом, який використовує тільки NTML аутентифікацію Ми перепробували з 4-5 Node.js різних пакетів із різними налаштуваннями ->
- #44: В кінці запрацював солюшен із пакетом httpntlm for calls and xml2js for parsing results
- #46: Generation: JSReport – in Electron App, in microservice, in Wim virtual machine on Azure, finally on Linux App service
- #47: Printing: For saving time FoxitReader (via spawning process) Alternative – node-printer Node module, which is native and require recompilation
- #48: Ще хочу поділитись декількома цікавими ідеями
- #49: Ще одною цікавою комбінацією для вас може бути наступна пара Ionic – це веб фреймворк для побудови мобайл додатків. Він так само як Електрон дозволяє використовувати HTML, CSS, JS Електром, як ви вже знаєте дозволяє будувати десктоп додатки Якщо їх об’єднати, ви зможете робити на єдиному code base і кросс-платформенні десктоп і мобайл продукти
- #50: Ця ліба для десктоп Node додатків. Вона дозволяє контролювати клавіатуру, мишку і читати монітор Вжє є багато створених додатків для запису дій користувача і їх повтору, або для sharing’у екрану
- #52: electronjs.org – сайт електрона Awesome electron – репоситорій з усіма цікавими речами зібраними в одному місці – boilerplates, video, libraries Так що. Якщо ви закоренелий фронтендщик, але вас попросили зробити якийсь десктоп продукт, то ви тепер знаєте що є вихід із ситуації