electron程序大小
是什么赋予了？ (What Gives?)
I’ve always felt a little intimidated when it comes to fully learning JavaScript, mostly because there are so many different frameworks and libraries already established and associated with the language. Don’t get me wrong, it’s incredible to see the thriving, active JS community with all the npm packages and frontend frameworks (React, Vue, Angular), however, that definitely doesn’t help for a semi-beginner (like me) wanting to dive into the world of JS.
完全学习JavaScript时，我总是感到有些胆怯，这主要是因为已经建立了许多与语言相关联的不同框架和库。 不要误会我的意思，看到所有npm软件包和前端框架(React，Vue，Angular) 蓬勃发展，活跃的JS社区真是令人难以置信，但是， 这绝对对半入门者 (像我一样) 没有帮助 想深入JS世界 。
I’ve also wanted to write my own app (whether it be on desktop or mobile) ever since I’ve started programming. Python is great and simple (and is, f.y.i, my first language), but is probably not the best pick for creating GUIs; I’ve known Tkinter and other python GUI frameworks, but I’ve personally found it requires much more effort to create fluid and unique UIs with them.
自从开始编程以来，我还想编写自己的应用程序(无论是在台式机还是移动设备上)。 Python既好又简单(我的第一语言是fyi)， 但可能不是创建GUI的最佳选择 。 我知道Tkinter和其他python GUI框架，但我个人发现它需要更多的工作来使用它们创建流畅而独特的UI 。
So, that’s when I coincidently heard of Electron, which goes by this phrase:
所以，那是我偶然听到Electron的意思 ，这个短语是这样的：
Build cross-platform desktop apps with Javascript, HTML, and CSS.
使用Javascript，HTML和CSS构建跨平台的桌面应用程序。
No way, I’ll be killing two birds with one stone over here: I’ll be getting the customization power that comes with HTML/CSS, while finally learning more intermediate Node.js JavaScript! The gist of how Electron works goes as follows: you are essentially rendering some HTML and CSS on a disguised chromium window, and all lower-level logic is handled in an entry-point JavaScript file.
没办法，我要在这里用一块石头杀死两只鸟：我将获得HTML / CSS附带的自定义功能，最后学习更多的中间Node.js JavaScript！ Electron的工作原理如下： 本质上，您是在伪装的Chrome窗口上渲染一些HTML和CSS，并且所有较低层的逻辑都在入口点JavaScript文件中处理。
最终产品 (The Final Product)
After giving a week and a half, I came up with this:
给了一个半星期的时间后，我想到了：
Put simply, eyePause is an app that will notify you (the user) when to take breaks from your screen — simple and nifty if you’d ask me. I’m sure the name could have some improvements, but I suppose it’s good enough. If you would like to view the source code, click below:
简而言之， eyePause是一款可通知您(用户)何时在屏幕上休息的应用程序-如果您要问我，这很简单也很漂亮。 我确定该名称可以进行一些改进，但我想它已经足够好了。 如果您想查看源代码，请单击下面：
From this, I’ve certainly learned a lot more not only about JS, but also the basics of app/software development. Here, I’m sharing three main points I’ve gotten out of this mini-project.
由此，我当然不仅学到了很多关于JS的知识，而且还学到了许多应用程序/软件开发的基础知识。 在这里， 我将分享我从这个小型项目中学到的三个要点 。
1. JavaScript(和Node)杂乱无章 (1. JavaScript (and Node) is messy)
Oh boy. Just to make it clear, what I will be stating here is entirely my opinion, and is only based upon my experience from having learned Python and recently just working on eyePause. Below are some gripes I have on the language and Node.
好家伙。 为了明确起见 ， 我在这里要说的完全是我的观点 ，并且仅基于我从学习Python以及最近刚从事eyePause方面的经验 。 以下是我对语言和Node的一些了解。
“异步”甚至意味着什么？ (What does “Asynchronous” even mean?)
This was one of the biggest roadblocks I’ve encountered in learning this language. Before I could go on to Electron, I had to learn the gist of Node.js. As I see it, Node makes it possible to run JS outside of the browser, and is especially useful for backend programming. Why? Node is Asynchronous — it doesn’t have to wait for expressions and methods to be fully completed before executing code below.
这是我学习这种语言时遇到的最大障碍之一。 在继续学习Electron之前，我必须学习Node.js的要旨。 如我所见，Node使在浏览器之外运行JS成为可能，并且对于后端编程特别有用 。 为什么？ Node是异步的 - 在执行下面的代码之前，不必等待表达式和方法完全完成。
That doesn’t sound too convoluted, until realizing the concept of Asynchronous code also introduces even more stuff: Promises, async, await, and then keywords, and the idea of callbacks. I’m not going to dive into the specifics of each term (because I’m also still a bit shaky on these), but here is a good video explaining all of this that I’ve found along the way:
听起来并不太费劲，直到意识到异步代码的概念也引入了更多的东西： Promises ， async , await , and then关键字以及回调的概念。 我不会深入探讨每个术语的细节(因为我对这些术语仍然有些犹豫)，但是以下是一个很好的视频，解释了我在此过程中发现的所有这些信息：
轻微不一致和混乱 (Minor Inconsistencies & Confusion)
The equality sign conundrum ( == and === ) is already an easy example of this. When I first learned JavaScript (a long time ago), I’ve never seen === ever. Obviously, this led to a lot of unpredictable behavior. In fact, there is a Git repo just dedicated to documenting the inconsistencies and weird quirks of JavaScript 😐.
等号难题 ( ==和=== )已经是一个简单的例子。 当我第一次学习JavaScript(很久以前)时，我从未见过=== 。 显然，这导致了许多不可预测的行为。 实际上，有一个Git仓库专门用于记录JavaScript的不一致和怪异之处 😐。
I also find inconsistencies in syntax and features supported. For example, while working on the app I didn’t even know ES6 imports wasn’t supported in Node, but async/await and arrow functions were— huh? Instead, I’ll have to make changes to my package.json or change the file extension to .mjs. Maybe I’m missing something or it’s just me, but it bugs me that Node is stuck with require() while allowing almost every other ES6 feature.
我还发现所支持的语法和功能不一致。 例如，在开发该应用程序时，我什至不知道Node不支持ES6导入 ，但是 async/await 和arrow函数是 — 嗯？ 相反，我将不得不更改package.json或将文件扩展名更改为.mjs 。 也许我遗漏了某些东西，或者仅仅是我一个人，但是让我感到困惑的是，Node一直使用require()同时允许几乎所有其他ES6功能。
好吗 (The Good?)
Definitely not all about JavaScript is bad. Arrow functions, despite its strong association with callbacks and asynchronous functions, are quite awesome—it’s (in my opinion) a short and elegant way to define anonymous functions.
绝对不是有关JavaScript的全部内容都是不好的。 尽管箭头函数与回调和异步函数有很强的联系，但它们还是很棒的-在我看来，这是定义匿名函数的一种简短而优雅的方法。
Additionally, npm gives me pip vibes (Python), but from what I see is much larger. Language package managers such as these are really nice, since it means you don’t have to reinvent the wheel over and over again. I needed a module to manage and store a config file for the user’s preference in my app, so I used an npm package for that ( electron-store ). I needed an easy interface to set countdown timers for my app to work, so I used an npm package for that ( easytimer.js ). You get the point.
另外， npm给我带来pip共鸣(Python)，但从我的角度来看，它要大得多。 诸如此类的语言包管理器非常好，因为这意味着您不必一遍又一遍地重新发明轮子。 我需要一个模块来管理和存储配置文件，以便在我的应用中根据用户的喜好进行配置，因此我为此使用了一个npm软件包( electron-store )。 我需要一个简单的界面来为我的应用程序设置倒数计时器，因此我为此使用了一个npm包( easytimer.js )。 你明白了。
2. Electron很棒 (2. Electron is pretty awesome)
After doing this, I realize why really popular apps such as Slack, Discord, and Visual Studio Code are made with Electron: It’s extremely simple to get started, and it’s very customizable.
完成此操作后，我意识到了为什么用Electron制作真正流行的应用程序(例如Slack ， Discord和Visual Studio Code) ： 入门非常简单，并且可自定义 。
简洁灵活 (Simplicity & Flexibility)
Firstly, Electron doesn’t require a special interface/procedure to develop your app: it’s all done through HTML and CSS, so you would design and code your UI just like you would a website. Then, you attach event listeners to buttons with JavaScript, where you can assign those elements to perform setting changes, toggles, etc.. In fact, it’s typical for a simple Electron app to have two JS files, one to show window instances and perform low-level operations( main.js ) and one to create dynamic HTML and bind event listeners to elements ( render.js ), in layman’s terms.
首先，Electron不需要特殊的界面/程序来开发您的应用程序： 都是通过HTML和CSS完成的 ，因此您就像设计网站一样设计和编写UI。 然后，将事件侦听器附加到具有JavaScript的按钮上，您可以在其中分配这些元素以执行设置更改，切换等。实际上， 简单的Electron应用程序通常有两个JS文件 ，一个显示窗口实例并执行。低级操作( main.js )，一种创建动态HTML并将事件侦听器绑定到元素的方法( render.js )，以render.js的方式讲。
You can communicate between the main JS file and multiple renderer processes with Electron’s IPC (inter-process communication) API, and will essentially be how you can get HTML elements in your UI to perform lower-level tasks (e.g. showing notifications, pulling up your file manager, etc.). Or, you can use Electron’s remote module to bring some functionality from main.js to your render JS files. It’s entirely up to you how you would want to operate this.
您可以使用Electron的IPC (进程间通信)API在主JS文件和多个渲染器进程之间进行通信，从本质上讲，这就是如何在用户界面中获取HTML元素以执行较低级别的任务(例如，显示通知，拉起您的文件管理器等)。 或者，您可以使用Electron的远程模块将main.js某些功能main.js渲染JS文件。 完全由您决定如何操作。
许多定制选项 (Many Customization Options)
You can configure your windows to always show on top, start fullscreen, be resizable, and much more! Additionally, you can configure how your app is installed, as well as auto-updates. In fact, you can visit the documentation just to see how many methods are baked into one Electron API element.
您可以将窗口配置为始终显示在顶部，全屏启动，可调整大小等等！ 此外，您可以配置应用程序的安装方式以及自动更新。 实际上，您可以访问文档只是为了查看将多少种方法烘焙到一个Electron API元素中。
3.出发前计划 (3. Plan before you go)
I have a bad habit of jumping right into coding any project. This came back to bite me when I decided to make this app. Contrary to my expectations, it became extremely hard to keep track of what to take care of, even if an app like eyePause is relatively elementary compared to Slack. I realized I needed to formulate my ideas into some sort of blueprint or diagram, so I quickly drew up this:
我有一个坏习惯，就是要马上编写任何项目的代码 。 当我决定制作此应用程序时，这又让我很伤心。 与我的预期相反，即使与Slack相比，诸如eyePause之类的应用程序相对而言， 要保持关注变得极为困难 。 我意识到我需要将自己的想法表达为某种蓝图或图表，因此我Swift制定了这一点：
Yes, its not appealing nor professional (and that my handwriting could get some improvement). In fact, parts of this “blueprint” doesn’t match the final product. At the end, does it matter that your blueprint/diagram is slightly incorrect or unpolished? No. What matters is that you have a better clue as to what each JS, HTML, or CSS file would be doing, and you indirectly find yourself solving implementation details of the project.
是的，它既不吸引人，也不专业(并且我的笔迹可能会有所改善)。 实际上，该“蓝图”的某些部分与最终产品不符。 最后，您的蓝图/图表是否稍微不正确或未打磨是否重要？ 否 。重要的是，您对每个JS，HTML或CSS文件的工作都有一个更好的了解，并且您间接地发现自己正在解决项目的实现细节 。
Doing this is analogous of making a draft of a longer paper you’ll have to write; the concepts are similar, if not the same.
这样做类似于编写您必须写的更长的草稿 ; 如果不相同，这些概念是相似的。
结论 (Conclusion)
Tl;dr: JavaScript is weird, but Electron’s pure awesomeness makes up for that. Also, plan your code before coding.
Tl; dr ： JavaScript很奇怪，但是Electron的纯正精妙弥补了这一点。 另外，在编码之前请计划您的代码。
That’s pretty much it as to what I got out of embarking on this mini-endeavor. It was definitely fun, and finally nice to see I’ve made something that could be used on a daily basis for someone like me, always on my screen. I’ll be sure to update eyePause (or give it a new name 😓) once in a while.
关于我从从事这项小型工作中得到的成果，这差不多就是它了。 绝对很有趣，最后很高兴看到我做出了可以像我这样的人每天都在屏幕上使用的东西。 我一定会不时地更新eyePause (或给它起一个新的名字😓)。
If you’ve any questions or suggestions, feel free to let me know!
如果您有任何疑问或建议，请随时告诉我！
翻译自: https://codeburst.io/what-i-learned-from-building-my-first-electron-js-app-ae41d3f69379
electron程序大小
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
