Sådan oprettes native desktop-apps med JavaScript (Proton Native)

Da jeg skrev denne artikel, kom Atwoods lov til at tænke på mig:

Enhver applikation, der kan skrives i JavaScript, vil til sidst blive skrevet i JavaScript. - Jeff Atwood

Oprindeligt indsendt på min blog!

I dag skal vi se på Proton Native og lave en simpel app med den.

I modsætning til Electron- apps er apps bygget med Proton Native faktisk native (deraf navnet) og ikke webbaseret på krom.

Proton Native er som React Native men til desktop. Det kompileres med native platformskode, så det ser ud og fungerer som en native app.

Så lad os komme i gang.

Windows

Installer buildværktøjerne ved at køre:

npm install --global --production windows-build-tools

Linux

Du skal bruge disse biblioteker:

  • libgtk-3-dev
  • build-essentiel

Mac

Du har ikke brug for noget.

Kør nu følgende:

npm install -g create-proton-app

og

create-proton-app my-app

at lave et nyt projekt.

Åbn projektmappen med din foretrukne kodeditor. Mappen skal se sådan ud:

 └───node_modules ├───.babelrc ├───index.js ├───package.json └───package-lock.json

index.js skal se sådan ud:

Ligesom ethvert React- eller React Native-projekt importerer vi reaktionsbiblioteket og laver en klassekomponent.

Det Appelement er blot en beholder, der holder Window og Menu, og det Windowhar tre rekvisitter: title(vinduet titel), size(tager et objekt, der indeholder bredden og højden af vinduet), og menuBar(sat til falsk, fordi vi ikke ønsker en menu linje).

Før vi begynder at kode, lad os installere cryptoved hjælp af npm:

npm i crypto

Vi bruger cryptotil at haske teksten med MD5-algoritmen.

index.js

Jeg importerede først, Textog TextInputså kunne jeg bruge dem senere. Derefter oprettede jeg en funktion, der tager et argument, classefter at have indstillet textog for md5at tømme strenge i state objektet .hashtext

I hashfunktionen indstiller vi tilstanden til textog erklærer md5at gemme den krypterede tekst (som nedenfor)

this.setState({ text });let md5 = crypto.createHash("md5")  .update(text, "utf8").digest("hex");

og indstil tilstandsobjektet til det opdaterede md5.

this.setState({ md5 });

Den rendermetode returnerer nogle jsxelement. Det Boxelement er ligesom divi React, eller Viewi React Native, som holder TextInputog Text. Dette skyldes, at det overordnede vindueselement ikke tillader at have mere end et barn.

TextInputhar en onChangeprop, der kaldes hver gang teksten ændres. Derfor indstiller vi den til en fedtpilfunktion, der tager et textargument og returnerer den hashfunktion, vi har erklæret tidligere.

Så nu hver gang teksten ændres, texthashes og indstilles til md5.

Nu hvis vi kører det med

npm run start

dette vindue skal dukke op:

Og hvis vi indtaster noget tekst, bliver det hashet til md5 sådan:

Du siger måske "Det ser grimt ud - lad os tilføje noget styling til det." Nå, på tidspunktet for skrivningen af ​​denne artikel er Proton Native stadig i sin barndom. Det er meget buggy og understøtter ikke styling (endnu), men det er et sjovt projekt at lege med.

Hvis du vil bidrage til projektet, skal du tjekke repoen.

Hvis du har spørgsmål eller forslag, er du velkommen til at kommentere eller kontakte mig på Twitter @ 4msal4 og glem ikke at trykke på den klappeknap :)

? Køb mig en kaffe?

? Tjek min tidligere historie?

Sådan oprettes en nyhedsapp med React Native.