文章目录

  • Web服务
  • 构建工作流
  • Gulp
  • webpack
  • KttDeploy
  • Electron
  • Electron的优势
  • Web技术
  • 开源
  • 跨平台
  • 使用Electron开发的Apps
  • 我用Electron开发的桌面应用
  • 支持🤟


Web服务

  • 搜索引擎优化 + 首屏速度优化 = 服务端渲染即SSR（Server Side Rendering）
  • 前后端同构（模板复用）
  • BFF（Backend For Frontend）

构建工作流

在没有Gulp和webpack等构建工具之前，前端工程师可能会用java、ruby、shell做一些构建工具，而这些语言对于前端工程师不是那么熟练，而用Node.js做构建工具，前端工程师将更容易的查找、修改、扩展构建工具。

Gulp

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

前端使用 stripe demo_Windows


从上图的例子我们可以看出它能给html、css、js做一些如下预处理：

  • 编译和整理 Pug 文件为相应的 HTML 文档
  • 将less文件编译为css文件
  • 将js文件打包压缩、混淆为一个文件

webpack

webpack通过一些规范把js、css、图片等打包在一起，这样就能减少前端尽可能少的HTTP连接，加速网页的加载。

前端使用 stripe demo_构建工具_02

KttDeploy

我司开发的KttDeploy就是用Node.js写的，用于打包H5资源文件给App调用。

前端使用 stripe demo_构建工具_03

Electron

Electron基于Chromium和Node.js， 让你可以使用HTML、CSS和JavaScript构建兼容Mac、Windows和Linux的桌面应用程序。

在用Electron之前我用过Delphi、C#开发Windows桌面应用。
尤其使用C#开发了很多企业级应用，C#也确实方便，但是要跨平台就难了。如果用Winform做出效果很好看的UI又没有Web技术来得快，要做出要看的UI对于C#技术栈的开发人员建议直接使用WPF吧!

Electron的优势

Web技术

因为Electron 基于 Chromium 和 Node.js，如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

开源

Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。

跨平台

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

使用Electron开发的Apps

  • Visual Studio Code
  • Facebook Messenger
  • Twitch
  • Microsoft Teams
  • InVison
  • 等等，实在是太多了