Liya Gebre

Liya Gebre

1603738080

Electron+ vue3+ viteIntegration

electron-sight-quickly

Electron+ vue3+ viteIntegration

Short book address

How and Why

  • There are two main purposes for writing this Demo project
  1. vue@3.x Released, want to try new features
  2. With work umi+ electronprojects big, start-up speed is not ideal; with the vitetry count a reserve program ^ _ ^

Command

  • npm run dev
  • npm run build

Note 踩坑记

  • This form of import {write} from’fs’ will be compiled by vite into /@modules/fs?import
  • const {write} = require(‘fs’) This form can be used 😉
  • const {ipcRenderer} = require(‘electron’) the same
  • Although require can be used to avoid Vite compilation problems during development, but there is a problem with rollup during packaging;
  • Take const Store = require(‘electron-store’) as an example, in vite.config.ts you can convert it to EMS form by custom rollup plug-in
  // vite.config.ts -> rollupInputOptions -> plugins
  plugins: [
    {
      name: '@rollup/plugin-cjs2esm',
      transform(code, filename) {
        if (filename.includes('/node_modules/')) {
          return code
        }

        const cjsRegexp = /(const|let|var)[\n\s]+(\w+)[\n\s]*=[\n\s]*require\(["|'](.+)["|']\)/g
        const res = code.match(cjsRegexp)
        if (res) {
          // const Store = require('electron-store') -> import Store from 'electron-store'
          code = code.replace(cjsRegexp, `import $2 from '$3'`)
        }
        return code
      },
    }
  ],

to sum up

  • 2019 13-inch mac-pro boot speed is about 4 seconds
  • Pentium G4560 computer CPU Shenzhou notebook startup speed is about 6 seconds
  • There is no doubt that vite’s solution has a lot more advantages than @vue/cli, umi, create-react-app and other webpack-based scaffolding startups.
  • Technology is always iterating and progressing rapidly, with the goal of solving some existing or upcoming problems; continue to treat, learn, and cheer~

Download Details:

Author: caoxiemeihao

Source Code: https://github.com/caoxiemeihao/electron-vue-vite

#vuejs #vue #javascript

What is GEEK

Buddha Community

Electron+ vue3+ viteIntegration
Milton Langworth

Milton Langworth

1656586800

Fast Vite Nestjs Electron: Vue3, Vite, Electron, Nestjs with Esbuild

⚡Vite + Electron + Nestjs & Esbuild Template

This template is used to build vite + electron + nestjs projects. Build whit esbuild, crazy fast!

NOTE: Main process is built with esbuild. After some modifications, it currently supports emitDecoratorMetadata.

Introduce

This is a template based on my repo: fast-vite-electron. In the main process, I integrated nestjs. In the main process, you can build your code just as you would write a nestjs backend. Desktop clients built from this template can quickly split the electron when you need to switch to B/S.

How to use

  • Click the Use this template button (you must be logged in) or just clone this repo.
  • In the project folder:
# install dependencies
yarn # npm install

# run in developer mode
yarn dev # npm run dev

# build
yarn build # npm run build

Note for PNPM

In order to use with pnpm, you'll need to adjust your .npmrc to use any one the following approaches in order for your dependencies to be bundled correctly (ref: #6389):

node-linker=hoisted

public-hoist-pattern=*

shamefully-hoist=true

Relative

My blog post:

Author: ArcherGu
Source code: https://github.com/ArcherGu/fast-vite-nestjs-electron
License: MIT license

#vite #nestjs #electron #vue3 #typescript 

Darren Watsica

Darren Watsica

1594580460

Electronic Football Goal System Will Make Score Markers a Thing of the Past

This electronic foosball goal system will make score markers a thing of the past

Like most of us, Joey Cumeras Khan has been stuck inside for the last couple of months. As a foosball fan, this not only meant plenty of time to play with his fellow housemates but also the perfect opportunity to tech out his table with an automated scoring system.

Khan’s setup works by tracking goals via an LED and LDR pair situated in each player’s scoring tray. When a ball drops into the net, the score state is picked up by the sensor as a lack of light, thus signaling the controlling Arduino Nano that a goal has been made. This info is sent to an Orange Pi Zero, which runs a web app to display the current score on both players’ phones.

To get started, one simply has to scan a QR code on the side of the table. This prompts the scoreboard along with some custom sounds and a reset interface to enhance your game experience!

#arduino #nano #electron #electronic

Milton Langworth

Milton Langworth

1656576000

Fast Vite Electron: Vue3 + Vite + Electron with Esbuild.

⚡Vite + Electron & Esbuild Template

This template is used to build vite + electron projects.

NOTE: Main process is built with esbuild. After some modifications, it currently supports emitDecoratorMetadata.

Motivation

In the past, I've been building desktop clients with vue + vue-cli-plugin-electron-builder, and they work very well. But as the project volume grows, webpack-based build patterns become slower and slower.

The advent of vite and esbuild greatly improved the development experience and made me feel lightning fast ⚡.

It took me a little time to extract this template and thank you for using it.

How to use

  • Click the Use this template button (you must be logged in) or just clone this repo.
  • In the project folder:
# install dependencies
yarn # npm install

# run in developer mode
yarn dev # npm run dev

# build
yarn build # npm run build

Note for PNPM

In order to use with pnpm, you'll need to adjust your .npmrc to use any one the following approaches in order for your dependencies to be bundled correctly (ref: #6389):

node-linker=hoisted

public-hoist-pattern=*

shamefully-hoist=true

Relative

My blog post:

Author: ArcherGu
Source code: https://github.com/ArcherGu/fast-vite-electron
License: MIT license

#vite #electron #vue #typescript 

Amelia Williams

1618401013

The Role of Electronic Medical Records in Telehealth

Electronic medical records are the digital patient records that medical care providers use to give patients treatments. Many hospitals use electronic medical records to help them handle their patient care easily. EMR software development systems are built into the hospital’s software system and these can be used easily by authorized people only. Hospitals, clinics and other medical care providing centres can gain many benefits from the use of electronic medical records software. These systems are developed to make the lives of healthcare workers much easier and to easily transfer data from anywhere and anytime.

#emr software development #electronic medical records software #electronic medical records development, #ehr software development #electronic health records software #webdevelopment

Darren Watsica

Darren Watsica

1594398720

Things I Wish I Knew Before Working with Electron.js

In this article, I’ll share how you can avoid some of the mistakes I made when learning about Electron.js. I hope it helps!

A couple of months back, I decided to focus more on building my side product, taggr. I was inspired to build it because of how many photos I have on my computer.

For those of us that keep a backup of their pictures, those collections often get so big and complex that they become a full-time job to manage. A mix of folders and sub-folders may contain instant messaging picture backups, hi-resolution pictures from your trip to Bali, your uncle’s wedding, or last-year’s bachelor party.

Always keeping such collections tidy is tedious (believe me, I have tried for years). It’s also hardto discover the shots that you love the most, hidden deep within the folders.

So taggris a desktop app that solves that problem. It lets users rediscover their memories while keeping their privacy.

I am building taggr as a cross-platform desktop application. Here I’ll share some of the things I’ve learned about cross-platform app development with Electron.js that I wish I knew from the beginning. Let’s get started!

Background

Before presenting my takeaways on this ongoing journey with Electron, I would like to give a little more background about myself and the requirements of taggr.

Every developer comes from a different background, and so do the requirements of the applications they develop.

Contextualizing the choices I made for this project may help future developers select the right tools based on their needs and expertise (rather than what is hyped out there – GitHub 🌟, I am looking at you).

J

As mentioned earlier, from the beginning I envisioned taggr as a cross-platform application. The app would perform all the required pre-processing and machine-learning computations client-side due to the focus on privacy.

As a one-person show, I wanted to be able to write my app once and ship it to different systems without losing my sanity.

From my side, I am a front end engineer in love with the web and JavaScript. I previously worked with Java and C#, but I enjoy the flexibility that the web provides and its vibrant ecosystem.

Having experienced first hand the pain of using tools like Eclipse RCP to build client-side apps before, I knew I didn’t want to work with that tech again.

In short, my stack requirements for taggr boiled down to something like the following:

  • It should provide cross-platform support, ideally at the framework level.
  • It should allow me to** write the code once**, and tweak for each platform if needed.
  • It should enable access to machine-learning capabilities, regardless of the host environment, without specific runtimes to be installed. It should be painless to set up.
  • If feasible, it should use web technologies. It would be great to leverage my existing knowledge.

As you can see, the requirements do not read as: I should use React with Redux, observables, and WebSockets. Those are lower-level implementation details, and they should be decided upon_ when and if_ the need arises.

Pick the right tool for the job rather than picking a stack from the beginning, disregarding the problems at hand.

So, after furious googling, I decided to give Electron a try. I hadn’t used that framework before, but I knew that many companies were using it successfully in products such as Atom, VS Code, Discord, Signal, Slack and more.

Open-source and with out-of-the-box compatibility with both the the JS and Node ecosystems (Electron is build using Chromium and Node), Electron.js was an attractive tool for the work at hand.

I won’t go too much into detail regarding the rest of the stack, as I repeatedly changed core parts (persistence and view layers) when needed, and it falls out of the scope of this article.

However, I would like to mention Tensorflow.js, which enables running training and deploying ML models directly in the browser (with WebGL) and Node (with C bindings), without installing specific runtimes for ML in the host.

So back to Electron – thinking it was perfect, the fun began.

Enough talk about the background. Let’s dive into the takeaways.

#electron #electron.js