-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
78 lines (75 loc) · 5.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<style>
h1{
font-family: 'Roboto Mono', monospace;
font-size: 1em;
}
h2{
font-size: .9em;
}
#iconrow{
height:10vh;
position:fixed;
}
.icon-img{
max-height:20vh;
}
</style>
</head>
<body>
<div class="row" id="iconz">
<div class="col s1 m1 l1"></div>
<div class="col s3 m3 l3">
<img class="responsive-img icon-img" src="docs/electron-logo.png">
</div>
<div class="col s1 m1 l1"></div>
<div class="col s3 m3 l3">
<img class="responsive-img icon-img" src="docs/PowerShell_icon.png">
</div>
<div class="col s1 m1 l1"></div>
<div class="col s3 m3 l3">
<img class="responsive-img icon-img" src="docs/materializeicon.png">
</div>
</div>
<div class="container">
<div class="row center">
<h1>electron with node-powershell materialize and redux. </h1>
</div>
<div class="row"></div>
<div class="row">
<h2>let's talk about automating a basic task / giving a script a GUI</h2>
<p><a href="https://github.com/BenjaminMichael/node-powershell-electron-basic-demo">This is a starter project</a> to share a sample of what can be done quickly and easily but also warn you about the common pitfalls of building a user friendly interface.</p>
insert slick image here
<p> Imagine that with a single click a PowerShell script is fired that queries Active Directory, performs some computation, and POSTs the result to a web API. Sound easy. But what if your user clicks the button 16 times really, really fast?</p>
insert funny memory pressure inage here
</div>
<div class="row"></div>
<div class="row"><img src="docs\basic1.PNG" class="responsive-img"></div>
<div class="row">When I first created this demo I was trying to explore that idea: perform a simple function once for each item in a set of data. If I looked up 20 users I needed to run my function 20 times. First I would look up, for example, 10 user names. Then I would map a set of 10 names against my node-powershell function and this would spawn 10 powershell processes. All on the first click! Twenty after a second click... and so on.
<br><br>
insert slow image here
This was either too slow because I has to create/destroy PowerShell instances or it ate too many resources because the PowerShell instances wouldn't even get detroyed until my long chain of promises was reolved.
<br>
In my opinion this pattern is hard to avoid when you pair node-powershell with a GUI.</div>
<br>
insert guy using terminal image here
<div class="row">In my experience its helpful to think of writing node-powershell the way we write powershell. If you want to see the output of every commend, you invoke them one at a time. If you do not care you invoke a long script or a suepr logn one-line of code.
<br><br>
<p>
In node-powershell, if your powershell scripts are simple then you can orchestrate them in a sophisticated way to actually <b>do</b> your important tasks. The reason why all the Map, Filter, Reducing is better off happening in Javascript Land is because it brings the in-memory application state into the space of the DOM and ultimately the only UI or (even Developer Interface). In this way you can observe and interact with the flow of data through your atmoic PowerShell scripts that read the output of individual tasks and then issue new commands asynchronously.</div>
<br><br>
The other important aspect is you enter a command or script invocation in PowerShell, then you wait for a result and react to it. That is procedural because you have to wait for the handel to enter your next command and often time the next command will be based on the last output you read.
<br><br>
Node-Powershell is great at doing that sequence over and over again and super fast. It is terrible at the thing more people ask for which is to be allowed to just wrap node-powershell in a promise and that means they are allowed to multi-thread 100x PowerShell things in parallel. In my experience if your button can spawn 5 powershells and the user can click 10 times it just puts too much pressure on your RAM as it gives you 50 PowerShells. This is not how PowerShell is used normally (obviously) and if you see my next demo I have a way more elaborate explanation of how I handle the PowerShell experience in a procedural queue so that the user interface can create promises that PowerShell can actually live up to.
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>