После недавней разработки кроссплатформенного настольного приложения Electron под названием DockJS я хотел бы поделиться что получилось хорошо, а что не очень, и как я попутно решал определенные технические проблемы. Размышляя над этим проектом, я надеюсь пролить свет на то, что стоит помнить о любом проекте Electron.
Райан Уэстлейк и я учимся в Turing: School of Software & Design. Мы последовательно изучаем основы JavaScript в течение этой 7-месячной программы и вот-вот закончим. У нас с Райаном есть мотивация каждый день изучать все больше и больше Javascript, совершенствовать свое мастерство и оттачивать свои инновационные способности, продвигаясь за счет более глубокого понимания основных основ нашего JavaScript.
Мы обнаружили, что один из лучших способов изучения основ — использование консоли в браузере или REPL узла в терминале. Но есть и другие альтернативы, которые значительно облегчают написание более длинных функций и эксперименты.
ScratchJS всегда был отличным вариантом с момента его выпуска в качестве расширения для Chrome, и я был в восторге, увидев гораздо лучшую альтернативу. Тем не менее, мы хотели получить доступ к REPL в автономном режиме с нашего рабочего стола и добавить несколько функций, которые выводят практику, написание и изучение JavaScript на новый уровень.
С помощью DockJS мы разработали интерпретацию традиционного настольного приложения с использованием Electron, в частности интерфейс JavaScript REPL, который полностью работает в автономном режиме и может быть доступен в доке на нескольких платформах.
Решение о создании этого приложения представляло собой определенный риск, поскольку наш срок составлял одну неделю, и мы действительно не знали, на что мы готовы пойти, особенно не имея опыта работы с Electron. К нашему удивлению, вычисление кода в поле ввода оказалось довольно простым, даже с промежуточным этапом использования babel в качестве транспилятора:
$runButton.on('click', () => {
const code = transpileToES5()
eval(code)
})
const transpileToES6 = (editorCode) => {
const transpileToES5 = () => {
const editorCode = editor.getValue()
const result = babel.transform(editorCode, {
presets: ['es2015']
})
const code = result.code
return code
}Мы даже нашли библиотеку, которая довольно легко трансформирует любой ванильный JavaScript в es6/es7 — своего рода обратный транспилятор, называемый lebab:
const transpileToES6 = (editorCode) => {
const { code, warnings } = lebab.transform(editorCode, ['let', 'arrow', 'class', 'commonjs', 'default-param'])
return [code, warnings]
}Действительно, реализация этих функций прошла успешно. У нас даже было некоторое время, чтобы добавить несколько строк, чтобы переназначить console.log нескольким псевдонимам, чтобы соответствовать нашей теме использования значка кофейной кружки, символизирующего использование DockJS в качестве ежедневного ритуала:
const brew = console.log.bind(console)
const pour = console.log.bind(console)
const run = console.log.bind(console)
Если когда-либо в моей карьере и было время, когда я создавал приложение и писал больше однострочных исполнений для функций, то это было в этом приложении. К счастью, это позволило нам глубже погрузиться в CodeMirror библиотеку и реализовать некоторые тонкие дополнительные функции, которые в основном поставляются из коробки. , в том числе выделение активной строки, визуальное указание соответствия скобок и автоматическое закрытие скобок и многие другие.
CodeMirror — универсальный текстовый редактор, реализованный на JavaScript для браузера, специализированный для написания кода. Если вы используете Node REPL или проверяете веб-страницу и возитесь в консоли — это использование CodeMirror.
Технически использование Electron с этим приложением кажется легким делом — не то, что вы обычно говорите как разработчик. Хотя масштаб этого приложения не был слишком большим, и лампочка загорелась больше, чем ожидалось, я бы сказал, что Electron — одна из самых приятных библиотек, которые я использовал для создания приложения. Документация мягко говоря неплохая.
Если бы мы продолжили работу над этим проектом, мы определенно были бы рады добавить больше языковых режимов, а это довольно длинный список. Это понравится гораздо более широкой аудитории и расширит возможности любого программиста, когда он будет играть в редакторе. Возможно, наше приложение открылось бы с окном вместо строки меню, что позволило бы пользователю использовать CMD + TAB при навигации по приложениям. Использование менюбара было конструктивным выбором, который имел для нас смысл, поскольку вы могли получить к нему доступ в доке меню в верхней части экрана, что позволяло открывать одно раскрывающееся окно, а не множество потенциально открытых.
const menubar = require('menubar')
const mb = menubar({
width: 950,
height: 600,
index: `file://${__dirname}/index.html`,
icon: './app/icons/[email protected]'
})Приведенный выше код демонстрирует простоту настройки окна вашего исходного приложения, начального шага создания приложения Electron. Понятно, что объем нашего проекта был меньше, чем у среднего приложения, но я рискну сказать, что любой разработчик, исследующий часто неизведанные, но хорошо нанесенные на карту ландшафты Электрона, был бы в восторге от приятного процесса сборки, окутанного красивой запутанностью, если бы Я могу.
Прежде всего, страсть Кинана заключается в активизации человеческого потенциала в областях технологий, здравоохранения и психологии. Он стремится довести человеческие инновации до предела и активно участвовать в эволюции сознания.
Кинан считает, что мы можем достичь этого в первую очередь за счет того, как мы разумно общаемся, поскольку программное обеспечение является основой глобальной взаимосвязи, а трансформация саморазрушительного поведения является мостом к большей человеческой связи и расширению возможностей.
Вы можете следить за его последними разработками/проектами в области программного обеспечения на kswhyte.com и узнавать больше о трансформации и развитии сознания на cosmicroots.co.
