DEV Community: Rajvir Singh

Tauri is the best Electron alternative....

Rajvir Singh — Sat, 20 Aug 2022 14:49:00 +0000

Every web developer who uses electron for making desktop applications with ease knows that electron is slow. But the team over Tauri is not only trying to surpass Tauri but wants to make a more secure and faster-performing framework for building desktop applications with ease.

What is Tauri?

Tauri is an app construction toolkit that lets you build software for all major desktop operating systems using web technologies. The core libraries have been written for you in Rust and the user interface can be written using virtually any frontend framework. It includes an optional and tree-shakeable JavaScript API for comfortable low-level system access, a desktop binary bundler with code signing and artifact verification, a secure updater to keep your users on the latest version, an extensive plugin system, and support for OS-level integrations such as notifications and app trays.

Tauri is as simple to use as it is easy to extend. For those new to the Rust programming language, Tauri provides a comfortable learning environment that will grow with you. Once you have installed Rust, creating your first app is a mere running of create-Tauri-app. But you don't have to use Node.js at all if you would prefer to remain in the safety and comfort of 100% Rust.

Security First

In today's world, every honest threat model assumes that the user's device has already been compromised. This puts every developer in a complicated situation because if the device is already at risk, then the software is also at great risk.

Tauri takes Defense's in-depth approach. Tauri makes you take every precaution possible to minimize the surface area you present to attackers. Tauri lets you choose which API endpoints to ship, whether or not you want a localhost server built into your app, and it even randomizes functional handles at runtime. These and other techniques form a secure baseline that empowers you and your users.

Slowing down attackers by making static attacks crushingly difficult and isolating systems from one another is the name of the game. And if you are coming from the Electron ecosystem - rest assured - by default Tauri only ships binaries, not ASAR files. Which is a huge security pain.

Tauri takes security as a guiding force, And it gives you every opportunity to take a proactive security posture.

Performance

Tauri also gives the user and developer a performant application, which improves user experience and it also doesn't take a lot of work from the developer. You can see benchmarks on Tauri's official website.

Environment

Tauri's team loves nature and also takes action to protect it.

Tauri enables you to make apps that are lean and performant, which reduces electricity, storage space, and general natural resource consumption. Every byte saved is a leaf on a tree that gets to grow.

To illustrate this, the Tauri team compiled some numbers on the ecological impact of a Tauri app's size. As you can see, even small increases in size have a hefty impact on the environment!

The transmission of 1 GB of information takes an estimated 0.1kWh, which is equal to 0.06 kilograms of CO2. (https://www.emergeinteractive.com/insights/detail/does-irresponsible-web-development-contribute-to-global-warming/)

Although the carbon absorption capacity can vary, it is generally considered that a tree can store about 167 kg of CO2 per year or 1 ton of CO2 per year for 6 mature trees (https://climate.selectra.com/en/news/co2-tree)

Love for open source community

Tauri's team is driven by the passion and love of the open source community which is supporting the work and contributing to making the Tauri and world a better place.

We know that open source software is a means of fostering equality and collaboration, which is why we placed the ownership of the code at the Commons Conservancy. You can rest assured knowing that the code base will never be rug-pulled or locked behind open-core pay-to-play feature gates. We believe in open collaboration and safe spaces for all. We have an open working group, accessible to any competent contributors. And we love you all. ❤️ - From Tauri Team

Future Plans

After the release of the 1.0 release, the Tauri team is already setting sights on the next steps for Tauri. Tauri team plans to work on:-

1. Mobile support for both iOS and Android

The mobile support for IOS and Andriod is certainly exciting, as it will be a big game changer for the industry.

2. Alternative renderers

Alternative renders will surely help developers to improve the performance of their application by choosing the right render for app.

3. IPC enhancements to enable improved debugging

This will be very useful

4. Runtime plugins

It is very exciting to hear that there will be runtime plugins for the Tauri apps, as they will save a lot of time and will help the developer, also it will be exciting what plugins will the community would make

5. Support for additional bindings in other languages

It would be crazy if we will be able to use python as a backend...Ah can't wait to see

Conclusion

Tauri is gonna be a game changer in a few years, and as an electron developer, I see it is going to be a valuable skill to know Tauri and work with it. So I would suggest you guys go test the Tauri and let the Tauri team know if you have any feedback.

And also follow me on Twitter and Github to be updated with more web development tips and news.

Have a good day,
Rajvir Singh

MongoShare - Share Code

Rajvir Singh — Wed, 12 Jan 2022 20:15:18 +0000

Overview of My Submission

MongoShare helps with sharing your code. Users can share the code with others through a link, and the code would be editable with a password created by the author.

MongoShare uses the MongoDB Atlas as a database and Next.js as a frontend.

Submission Category:

Choose Your Own Adventure

Demo Link :- https://mongoshare.vercel.app/

Link to Code

RajvirSingh1313 / MongoShare

Share Code With MongoShare

MongoShare

Sharing Code With MongoShare!

About

MongoShare helps with sharing your code. It is made with MongoDB & Next.js. MongoShare is a hackathon project for MongoDB Atlas Hackathon on DEV.

Local Development

Fork the repo on GitHub
Clone the repo

git clone https://github.com/rajvirsingh1313/mongoshare
cd mongoshare

Create a next.config.js file in the root dir

module.exports = {
  env: {
    ATLAS_URI:
      "mongodb+srv://<username>:<password>@cluster0.lydaj.mongodb.net/mongoshare?retryWrites=true&w=majority",
    DOMAIN: "http://localhost:3000",
  },
};

Install Dependencies

npm i

Run the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

View on GitHub

Additional Resources / Info

I want to thanks the open source community for making my life easy. I also want to thanks the Dev.to and MongoDB for hosting this hackathon.

New Release Banner Creator 🖼️🎉

Rajvir Singh — Sun, 05 Dec 2021 13:42:54 +0000

My Workflow

ReleaseBannerAction creates custom banners 🖼️ about new releases or for certain GitHub stars 🌟 thresholds and then posts the banner on Twitter or Discord 🎉.

Everything is described deeply in README.md, please check the repository's readme to learn more.

Quick Start

on:
  watch:
    types: [started]
  release:
    types: [released]

jobs:
  Running:
    runs-on: ubuntu-latest
    name: ReleaseBannerAction
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Action
        uses: RajvirSingh1313/ReleaseBannerAction@v1.1
        with:
          repo-content-object: ${{ toJson(github) }}
          release-version: ${{ github.event.release.tag_name }}
          platform: Both

          banner-theme: Dark

          discord-webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
          twitter-consumer-key: ${{ secrets.TWITTER_CONSUMER_API_KEY }}
          twitter-consumer-secret: ${{ secrets.TWITTER_CONSUMER_API_SECRET }}
          twitter-access-token: ${{ secrets.TWITTER_ACCESS_TOKEN }}
          twitter-access-token-secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }}

Submission Category:

Maintainer Must-Haves & DIY Deployments (I think so)

Link to Code

RajvirSingh1313 / ReleaseBannerAction

ReleaseBannerAction creates custom banners about new releases or for certain GitHub stars thresholds and then posts the banner on Twitter or Discord.

Topics

What is ReleaseBannerAction ?

ReleaseBannerAction is a simple GitHub Action that creates a dynamic image by fetching the information from the repository and using it in the image and then posting the banner to Twitter or discord, or both. There are various themes for the image and various other customizations that users can customize to fit their repository.

How to use

Using ReleaseBannerAction is super easy. There are several things you can customize. First of all, you need the credentials for Twitter or Discord for posting messages.

Getting Essentials

You can choose between Twitter and Discord or both for uploading the banner. Here are the guides for getting all the required credentials for Twitter…

View on GitHub

These below sections are part of the README.md, please check the repository's readme to learn more.

Themes

There are total of 5 themes, That I have created. I will add more themes in future. You can set the theme of the banner by settings the banner-theme property. Default is Dark.

`Dark`

`Blue`

`Orange`

`Wonder`

`LightYear`

How Create & Use Custom Banner

Upper Image a simple template with all the dimensions that you will need to create a banner to align perfectly with the ReleaseBannerAction.

Story

Let me warn you, I don't know what I wrote last night, And I am not gona change below paragraph because I want you to enjoy it. So yeah just enjoy.

I created this project for the Github Actions 2021 Hackathon. I am pretty exhausted while writing this long readme. I am sure that it has a lot of mistakes in it, But I am just gonna ignore them. This idea came like the merged idea, as first I thought about creating an action that will just notify others, and the other one was just my curiosity about a project which was updating the Twitter profile banner with the latest tweet reactions of the user's tweet. Anyways the funny part of what happened to me is that, when I first read about this hackathon, I thought that it is just about a one-day competition as I mistakenly took 8 December as 8 November. I don't know why how I read it. But even then without confirming it, I just made a quick submission with the first idea, submitting when I read the article again, I was like wait. It is 8 December? Oh damn, then I quickly deleted it and Just chilled for like a week for some ideas to flow in my mind, but the first idea kinda just stuck in my mind. And another funny thing that happened to me while creating this project was that, Whenever I created a new developer application in the Twitter developer portal, every app got suspended after just 12 hours, And every time it happened, I just deleted the application and just created a new one. Twitter just said It violated some terms and conditions, but they never told me which ones are violated. So out of frustration, I thought what if it happened to the user who will use ReleaseBannerAction, would they also go through the same suffering. So that's when I thought about adding Discord support.

The libraries used in this project:-

I want to thanks all the creators and maintainers of these following libraries to make my life easier.

Roadmap

These following things that I may or will add in future.

Showing the reactions on the published release on github in the banner
Showing the tags of the repo in the banner
Custom Fonts

How to test your GitHub Actions locally

Rajvir Singh — Thu, 11 Nov 2021 16:48:03 +0000

So Dev & GitHub Team just announced the Github Action Hackathon. I am also participating in it. But I ran into a troublesome problem, and I think some of you guys are too. That is we always have to push the files to the remote repo in order to test the action, But it is a kinda pain to do it every time you make a change. I finally have found a solution to this problem.

Act the solution

"Think globally, act locally"

The two important reasons that you should use Act:

Fast Feedback - Rather than having to commit/push every time you want to test out the changes you are making to your .github/workflows/ files (or for any changes to embedded GitHub actions), you can use act to run the actions locally. The environment variables and filesystem are all configured to match what GitHub provides.
Local Task Runner - I love make. However, I also hate repeating myself. With act, you can use the GitHub Actions defined in your .github/workflows/ to replace your Makefile!

I copied them from Act's readme, Because I am lazy

Act is pretty reliable for testing actions, And I can go into details but I would be just repeating the stuff that is already on Act's Readme. So if you want deeper dive then you can check Act's Repo.

I hope you guys can figure everything else yourselves, as I am also busy making my project for this hackathon. But I felt an urge to tell others about this amazing tool.

Have a good day, Best of luck!
Rajvir Singh

Survey about which library developer choose to make desktop applications in nodejs

Rajvir Singh — Fri, 05 Nov 2021 16:07:13 +0000

Heres the survey :- https://w8wlf2cr6no.typeform.com/to/BBYoZNSY

What is Neutralinojs? Alternative to Electron

Rajvir Singh — Sun, 17 Oct 2021 12:05:55 +0000

If you are looking for alternatives for Electron, Then you should give it a try to Neutralinojs. So today, I am going to help you found the best for you!

We will cover the following things:-

What is Neutralinojs?
What is better?
How to get started?

What is Neutralionjs?

Neutralinojs is a lightweight and portable desktop application development framework. It lets you develop lightweight cross-platform desktop applications using JavaScript, HTML, and CSS. Apps built with Neutralinojs can run on Linux, macOS, Windows, and Web.

So Neutralino or Neutralinojs is a better way of creating desktop applications with web technologies. Neutralionjs was created because Electron a popular desktop application tool is hated by developers for being memory hungry. So Neutralionjs solves this problem by being lightweight and easier to develop.

What is better?

It is a little hard to judge, even if Neutralionjs is faster than the electron. It is still immature and doesn't support nodejs even it is built on top of the nodejs.

These things can change the view of common developers about using a framework, I agree that there can be some way around for using nodejs.

So Neutralionjs is good for using as a side project or some fun project. As it is still new and still needs a large community around to progress.

Electron is better and more reliable as comparison to Neutralionjs.

How to get started?

So if you want to get started with Neutralionjs right away, Then follow the instructions to start a new project.

You can use Neu Cli built by Neutralionjs developers.

Type following commands in the terminal to get started.

 # Creating a new app
 $ npm i -g @neutralinojs/neu
 $ neu create hello-world
 $ cd hello-world
 $ neu run

 # Building your app
 $ neu build

You can checkout Elecrue, It is a CLI for generating starter code for Electron or Neutralionjs with React or Vue. I am the maintainer of Elecrue. You can star it ⭐ for staying updated with Elecrue's progress.

Conclusion

Electron is not bad

Electron is good as ram is there to be used by on-running programs but if you don't want your app to use a load of ram then you can try Neutralionjs. Otherwise, Electron is good for getting started with desktop applications if you are a web developer.
You can read this article on Electron Apps Aren’t That Bad

Neutralionjs is just new way of creating

I have just scratched the surface about Neutralionjs. It is a maintained open-source project, So you can contribute and make it even better 🌱.
You can check the documentation of the Neutralionjs to learn more about it.

If you have any feedback or any suggestions, Then do let me know by commenting. And Follow me on GitHub.

Have a good day,
Rajvir Singh

Starter Code Generator for Electron with Vue or React

Rajvir Singh — Fri, 17 Sep 2021 11:25:01 +0000

What is Elecrue?

First of all let me tell you the main point of this elecrue thing.

Elecrue is a boilerplate generator npm package, it generates the boiler code for electron with react or vue with tailwindcss.

Elecrue provides you following starter code templates:-

React-Electron-JS

React-Electron-TS

React-Electron-Tailwindcss-JS

React-Electron-Tailwindcss-TS

Vue-Electron-JS

How to install Elecure?

npm i -g elecrue

How to use it?

It is pretty straight forward to use it. Type elecrue in your command line. It will ask you for choosing a template, after choosing the template. It will ask you the name of the project name, after typing the name. Elecrue will download all the node packages in your project folder. Ta-da! You are ready to rock! 🎉

FAQs

1.) Why Elecrue doesn't use IPC?

Let me break this down, Why didn't I used IPC.

What is IPC?

IPC is a set of two things, ipcMain & ipcRenderer. They both helps to send signals and receive from electron to receiver, by doing this you can get some information from electron to react or vue. As React and Vue are restricted to src folders only.

Why didn't I used IPC?

As I above paragraph, I explained that both react & vue, can't go outside of src folder. So most people use IPC in most ideal conditions. But IPC can be tedious to work with.

For example, If you want to create a file with one click of a button. It might sound easy, but it is hard to execute, as the button is in react, but you can't set the function to create a file in react as react is a client-side technology. But electron can do it easily with the fs module from the node, but we also need to create the file when the button is clicked. So how will we connect this? IPC would right?. Nope, Ipc is a heck alot of work and chances are low for it to work (For me at least).

If boil the problem down, we need to trigger the function in electron, which is to create a file.

The solution to this problem I found was, To host an express server in electron on localhost:5001 (If I remember correctly). And set up an endpoint for creating the file, Like /create-file. So when the button will be clicked in react, onClick will fetch the localhost:5001/create-file triggering the function to create a file in electron, as the only electron can use fs.

2.) Is there would be any future updates?

Yes, I will maintain the project and will update it when if any of the used libraries are updated.

3.) Am I am going to add more templates?

Yes, But depending on your suggestions. You can comment on this blog, about the template you want like svelte with electron. Or you can make an issue on Elecrue's Github Repo

Got to go

I hope you liked the Elecrue. Star it on Github 🌟.

I also hope you understand, Why I didn't use IPC. If you have any doubts ask me in the comments, I will surely reply. And if you wanna learn new things with others, or looking to work on some cool projects, check out ByteSlash Discord Server, it is an awesome community to grow yourself with others, everyone is there to help you including me.

If you haven't read my previous blog, do check it out:- What is open source and How to repay it.

Have a good day,
Rajvir Singh

What is Open Source Debt? And How to repay it?

Rajvir Singh — Sat, 11 Sep 2021 14:26:40 +0000

If you are a developer, then I would say you're in debt to unknown people. Don't worry it is good debt and there's nothing to be worried about whilst you repay it. But, yea, it is a never-ending one.

Let me explain

What is Open Source

First of all, what is open source?, and I would assume you know it. But if you are getting into this new world of programming so for that, here's the explanation.

Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose. Open-source software may be developed in a collaborative public manner.

Those were the first lines I could find when searching for open source.
So now you know what open source is so let's talk about the good never-ending debt you are in.

What is Open Source Debt?

Let me break this down into few pieces

Why do people create things for free?

Open source is all about accessibility for everyone, with ease.

I am good with examples so let me show one example of me.
I am working on this project named Elecrue. I started this project and made it public for two reasons, I created it for my own because I was looking for a good starter code for electron-react in js but I didn't found one so I created one myself, the second I wanted to repay my open-source debt as React, Electron, Vue is open source. And the third and bit selfish one, Is that I wanted to beef up my resume.

By doing so, I helped a lot of other developers who were having the same problem, now they can use it to create other things to make more amazing things open source, like Evan You did by creating Vue open-source, and now hundreds of hundreds of developers and companies use it to create more amazing things. In this great loop, everyone makes their contributions.

How to repay Open Source Debt?

Now you understood the debt, now let's talk about the ways you can repay it.
There are many ways of repaying this debt, let's talk about some that are most common ways

If you want someone to give you something good then you need to give something good too

By writing quality code for a problem and then sharing it:-
As the statement itself explains, You should just do like me or Evan You, write a code for a problem or a fun project that you think will both make your resume good and will help someone
By Educating others:-
Another way is to educate others. There are many ways to do this, Like creating tutorials on youtube, writing blogs, or making Github repositories for storing and sharing learning material like IoT Course from Microsoft (which I am learning IoT from).
By Helping Others:-
Open Source is all about helping each other, so if you happened to find any bug in your favorite library or framework, then create an issue on its repository. If you have a solution for that bug, make a pull request on it. By doing so you are helping yourself and others, And it will add a big pulse to your resume.
By Sponsoring the creator or project:-
I used Evan You as an example a lot of times to let's use him as the last example too. If you have seen his Github profile and Vue Github Page then you would have noticed that there is an option to sponsor a project or the developer, it means you can pay the developer or the project via Github to backup developer. As the project grows large like Vue it needs a lot of maintenance so often developers don't have the time or energy to maintain the project as there is a lot of work and time they need to pour in. So the people or the companies who uses the project, pays the developer a small amount so the developer keep maintaining the project

As October is coming up, there is a month-long celebration called Hacktoberfest, to promote open source. I think it is a good way to remember to repay your open-source debt. To learn about it more check out their website:- https://hacktoberfest.digitalocean.com/

That's it, I hope I explained well this great debt that never ends for good, If you liked it then share this article, If not then don't forget to give me feedback so I can improve myself.

Have a good day,
Rajvir Singh

DEV Community: Rajvir Singh

Tauri is the best Electron alternative....

What is Tauri?

Security First

Performance

Environment

The transmission of 1 GB of information takes an estimated 0.1kWh, which is equal to 0.06 kilograms of CO2. (https://www.emergeinteractive.com/insights/detail/does-irresponsible-web-development-contribute-to-global-warming/)

Although the carbon absorption capacity can vary, it is generally considered that a tree can store about 167 kg of CO2 per year or 1 ton of CO2 per year for 6 mature trees (https://climate.selectra.com/en/news/co2-tree)

Love for open source community

Future Plans

1. Mobile support for both iOS and Android

2. Alternative renderers

3. IPC enhancements to enable improved debugging

4. Runtime plugins

5. Support for additional bindings in other languages

Conclusion

MongoShare - Share Code

Overview of My Submission

Submission Category:

Demo Link :- https://mongoshare.vercel.app/

Link to Code

RajvirSingh1313 / MongoShare

Share Code With MongoShare

MongoShare

Sharing Code With MongoShare!

About

Local Development

Fork the repo on GitHub

Clone the repo

Create a next.config.js file in the root dir

Install Dependencies

Run the development server

Additional Resources / Info

New Release Banner Creator 🖼️🎉

My Workflow

Everything is described deeply in README.md, please check the repository's readme to learn more.

Quick Start

Submission Category:

Maintainer Must-Haves & DIY Deployments (I think so)

Link to Code

RajvirSingh1313 / ReleaseBannerAction

ReleaseBannerAction creates custom banners about new releases or for certain GitHub stars thresholds and then posts the banner on Twitter or Discord.

Topics

What is ReleaseBannerAction ?

How to use

Getting Essentials

These below sections are part of the README.md, please check the repository's readme to learn more.

Themes

Dark

Blue

Orange

Wonder

LightYear

How Create & Use Custom Banner

Story

The libraries used in this project:-

Roadmap

How to test your GitHub Actions locally

Act the solution

Survey about which library developer choose to make desktop applications in nodejs

What is Neutralinojs? Alternative to Electron

We will cover the following things:-

What is Neutralionjs?

What is better?

How to get started?

Conclusion

Electron is not bad

Neutralionjs is just new way of creating

Starter Code Generator for Electron with Vue or React

What is Elecrue?

How to install Elecure?

How to use it?

FAQs

1.) Why Elecrue doesn't use IPC?

What is IPC?

Why didn't I used IPC?

2.) Is there would be any future updates?

3.) Am I am going to add more templates?

Got to go

What is Open Source Debt? And How to repay it?

`Dark`

`Blue`

`Orange`

`Wonder`

`LightYear`