Normally my weekly videos are in technology and libraries that are authored by other people. 2
And so this week I'm really really excited to say that I've got something to show off to all of you 3
that I actually wrote myself and I want to walk you through it. 4
I think it's going to be an interesting and fun tool for a lot of people out there in the community 5
. 6
And so I'm kind of calling it JS playgrounds right now but I'm not really dead set on the name. 7
If you want to follow along with this presentation you can order this video. 8
And with that presentation we're going to go live and go to this address right here. 9
So Stephen Grider which is my name dot github I.O. slash JS playgrounds. 10
And right now JS playgrounds Hauspie capitalized to make sure you get capital G capital S s capital 11
P on there as well. 12
So what does this and what do I have on the screen. 13
Well first off we've got a couple of different panels on the left hand side is a code Edr. 14
And so in the code it or I can put in some amount of code and you'll see that instantly I get some feedback 15
on the top right hand side all the different panels and here are resizable so feel free to drag them 16
around to whatever layout you find preferable. 17
So besides just being a coder you know what's what's really what's the point. 18
Right. 19
So let's say I've got some number and it's start off at just 10. 20
I can print that number which we just saw. 21
I can divide that number by five or something I can multiply it by 20. 22
I can also put that number into a string. 23
Your number is number like so now. 24
Boom I got my string. 25
I can even if I want to throw some GSX J S X in here as well excuse me. 26
So I can put in a death and maybe have got inside of here number like so that's kind of boring So let's 27
put that inside of the H-1. 28
Make it nice and big. 29
And there you go. 30
Nice big edge one. 31
And then just to spruce it out put a h r in there as well so I've got the horizontal divide as well 32
. 33
OK. 34
So everything I've got on here so far. 35
Kind of interesting you know it's printing out each individual line. 36
So where it starts to get really fun is if I start changing a number or a value in here all the other 37
values automatically recalculate and update on the fly. 38
So basically the point of this tool is to give you some type of rapid prototyping environment something 39
to kind of mess around with different technology concepts figure out what's going on and just experiment 40
to irksomeness syntax in general. 41
So I've had a lot of fun putting it together the whole thing you'll notice is that on the bottom right 42
hand side you get some automatic air or I should say just parsing. 43
So in this case I've got a number and then the number and then a slash which is not valid syntax right 44
here. 45
So I got an error about an unexpected token. 46
And presumably it's somewhere on this line. 47
So just something to help you figure out what's going wrong. 48
If your code isn't running quite too well I can also make re-act components in here. 49
All I want let's say I've got Kunst greeting and I'll make this a functional components and maybe I'll 50
return from here. 51
I now we want to make the change for why not. 52
Hello. 53
And so now on the next block I have down here I can put my greeting company as well and boom I've got 54
help right there. 55
I can also make class based components if I so chose. 56
But you know there will be a lot of typing but yeah you can definitely make a class based reaction on 57
it and tossed it into a block of GSX to get to render. 58
I also got really good support for objects as well. 59
So if I get Konst object and me it's got a color of red and I can just place object like so. 60
And there's my string of FIDE object. 61
Color is red. 62
So very handy tool. 63
I like it a lot. 64
I'd be really excited to get some feedback from everyone. 65
You can make pull requests whatever you want to do you want to help me out with it. 66
I would love feedback. 67
The repo is that Steven Grider slash Yes playgrounds. 68
Right now I don't have any reusable reading or anything like that. 69
You can take a look at the source and Faried what's going on if there's anything you want to help me 70
out with that. 71
Fantastic. 72
So what to spend the most is video to tell you a little bit about how this thing is put together because 73
that's probably the most interesting part and the part that I suspect a lot of people are really curious 74
about. 75
So behind the scenes the entire thing is just a reaction redux application and it's surprisingly not 76
that complicated. 77
Well I didn't say that it took me a heck of a long time to figure out how to do it. 78
But I mean to say is that there are not a lot of moving pieces. 79
I think there would be more accurate to say. 80
So I've got my code Arafura here is the project. 81
A lot of the stuff is still pretty rough. 82
I can use a little bit of clean up which is part of what I hope to get some maybe some PR to help me 83
out with those walk through the events or kind of the cycle of this of this thing. 84
First off I'm using code more as the code editor so Code me or is a in browser code editor. 85
And that's what we saw on the left hand side of panel. 86
I used a very popular package from Jed Watson. 87
Thanks very much Jed called React CodeMirror Editor. 88
It can give me a React compatible version of that editor. 89
So whenever you type in some amount of code into the editor it fires in onchange event and I pass it 90
off to an action creator and the action care is very simple it just takes that code produces an action 91
and returns it where eventually ends up in the producer and the producer catches it. 92
So let's let's follow that could path around. 93
So here is my editor. 94
Here's code in your right here. 95
And whenever coding your gets changed. 96
We call on could change right here. 97
And that calls my action creator of this dot props dot update code. 98
So not too bad right here. 99
Not too bad. 100
We go into the action creators file. 101
Here's my single action creator. 102
Is this only just one action creator for the entire thing. 103
I call that update code. 104
And here's my action. 105
Yup. 106
It just returns some amount of code. 107
So everything up to this point kinda you know not too crazy on the redux side of things. 108
Not too bad. 109
So we're just taking some amount of code and dispatching or returning an action where things start to 110
get a little bit more complicated is after we hit the reducer. 111
So here's my co-producer re-attaching the case did update code in which case I just say OK here's the 112
new code and the code at this point in time is literally a string. 113
It's just a string of characters string characters that say here is like the exact bit of code you have 114
. 115
So where things start to get really nasty is inside of the selector and the viewer component. 116
So the selector is a select selector and if you're not familiar three slacked up got another video on 117
it from a month or two ago. 118
You can go to check out our recycling bin if you so chose. 119
So this is my reast select selector right here and like I said it's a nasty little bit of code I would 120
love to get a little bit of refactoring in here would be just fantastic. 121
So let's just do a little bit of a walkthrough and talk about how it works. 122
In general the way with this the way that you know I kind of figure out how to parse the entire expression 123
or you know all this code on in here is I use library called Esprit mounts so as Prema I've no idea 124
if I'm pronouncing that correctly. 125
But here it is right here. 126
I use a method Esprit mode called tokenize so it tokenized does it turns all of the code in a string 127
. 128
You know you give it a string and it takes that code and it tokenize it by tokenize I mean it turns 129
it into an array of objects where each object represents one specific token of our code and a token 130
can be like a parenthesis C a variable name an equal sign in multiplication sign whatever it might be 131
just some token of code after I turn it into a tokenize version of the code. 132
I then take a look at all the different parentheses combinations we could possibly have and eventually 133
figure out what are the valid expressions in the snippet of code right here. 134
So valid expressions would be line one by itself. 135
Line 2 by itself 4 5 6 7 8. 136
Those are all valid single line expressions. 137
Line 10 however is not a valid expression because it has an opening parentheses only. 138
When we go from line 10 to 12 do we get entire valid expression and the same thing down on line 14 as 139
well. 140
So line 14 I have an opening div that's not a valid expression. 141
I need to have a closing div as well. 142
So lines 14 through 18 would be a valid expression. 143
After suffering everything out into these you know what I consider to be a valid expression. 144
I then kind of do a little bit of what am I refered to as like a waterfall execution of code where I 145
first execute line 1. 146
I decide whether or not it it produces a value that I should log over here on the right hand side. 147
If it does not then execute lines 1 and 2 and decide if it produces a usable value I then execute lines 148
1 2 3 and 4 and decide if it produces a usable value. 149
In that case it does object. 150
Right here is a value that I can log off to screen. 151
I then do one two three four five. 152
There's our number 1 two three four five six number 1 3 7 so on and so on. 153
And basically this snippet of code right here will be executed something like a 1 to you know maybe 154
about nine times or so all with incrementing lines of code and that's how I get these individual values 155
to actually print up on the screen over here. 156
So for every time you type in a character it's running your code many many times it with ink incrementally 157
increasing large snippets of code. 158
So once I actually get a value out of here like say an object or a number a string or even a re-act 159
component as we have down here I then need to figure out how to actually render this screen. 160
And that's the purpose of the component. 161
So the viewer component Your ego has a method called evaluate expressions. 162
And so for each expression that I returned from that. 163
And that's Lechter I evaluate the expression. 164
So yes this is horridly vulnerable to excess S. attacks. 165
So I could probably pretty arbitrarily put in something like you know alert. 166
Yeah and there's there's an alert. 167
So it is pretty darn susceptible to excess as attacks if you are curious. 168
But anyways inside of evaluate expressions I look at each expression are the results of each expression 169
and I decide based on the type of the expression. 170
So going to do some divination to see like OK's is a function is a boolean is it an object or is it 171
an array or whatever it might be. 172
I then decide how to print up the value. 173
So after I decide how to print up the value I take all those values and actually render them on to the 174
screen. 175
So that's how this tool works. 176
Just a very high level overview. 177
Definitely still could use some help in different areas. 178
I hope to get some time over the next couple of days to spruce up the read me a little bit and give 179
some directions on where I want to take the project. 180
I do this is kind of a competitor to you know a lot of code Penan are things out there like code pen 181
or jazz fiddle mostly because this editor or this you know whole construct right here does not require 182
you to actually render something to an 8 T.M. document it just automatically takes all the principal 183
values and tosses it onto the screen over here. 184
You also note something this really important as well that it's distinctly different than just running 185
code in your terminal because if I take those code and just run it all I get is the last character down 186
here. 187
It's got some GSX in there so that won't run. 188
So if I instead just do this snippet of code the result is just the very last string here. 189
So the reason I like this editor so much is I get to see incrementally what are all the different values 190
they're fooling about my application. 191
OK. 192
So this is it. 193
I hope you found this interesting I hope someone out there finds it as interesting as I find it. 194
It's really great for teaching people about javascript just because you can see the value of every single 195
expression as it gets executed. 196
So again you can check it out at Steven Grider dot get her IO. 197
JS playgrounds if you want to contribute in any way shape or form Feel free to leave me a comment here 198
or drop me an email tweet me whatever you want. 199
If you enjoyed this video check me out weekly. 200
I have videos on the japes ecosystem. 201
A lot of fun different topics and we get to look at pretty neat tools just like this. 202
So I'll catch you next week.