Future of Coding - Research Recap Six: CycleJS Deep Dive

Episode Date: September 25, 2017

The last two weeks were all about CycleJS. In order to create visual spreadsheet metaphors for CycleJS stream combinators, I need to have a better understanding of how CycleJS works, and so I played around with it by building a CycleJS Flappy bird. I also spend time recently playing with spreadsheets and Clay.  You can read more at my journal (futureofcoding.org/journal).Support us on Patreon: https://www.patreon.com/futureofcodingSee omnystudio.com/listener for privacy information.

Hello, and welcome to the Future of Coding. This is Steve Krause. So for better and for worse, the last two weeks were less productive than the prior two weeks. If you listened to that episode, you may remember that it was very, very long. It was like a 90-minute episode, and it was kind of all over the place, and it was, from my perspective, overwhelming to produce. It took basically the entire Monday two weeks ago. But that is not the case today because I was a little bit less productive, both in terms of the amount of hours I spent, probably maybe 10 less hours than over the prior two weeks,

and I was also maybe a little bit less focused during the hours I actually spent over the last two weeks. I was distracted both with the coding space, the after-school program I helped start, and with various developments in my personal life. However, I did do a lot of fun and useful things, mostly centered around getting my head in the CycleJS space, learning how streams work, really diving deep. First I started by reading a lot of the links that Andre Stalt sent me, which were really great. The talk that I had with him, one-on-one,

a few weeks ago was really productive, but then the links he gave me were almost just as productive, if not more productive, than our conversation. And in fact, I learned that most of what he told me in our conversation, I could have gleaned from these links if I had found them. But of course, I don't know if I would have found them without him giving them to me. So it was useful for us to talk. And he also gave me some extra information during our talk. So the links were great. And then I wanted to build an actual application

in Cycle.js because that's really how you learn something, you build something with it. So at least that's how my philosophy on learning works. So I had this idea to build something useful for my website, actually, of Coda.org website my idea is to build a little widget that'll live at the bottom of each page that will link you to the most recent commit and the date of that commit for that page and like a button where you can hit the edit button and it'll pop you in a github editor so you can edit that page basically in one click. And this is what I think will be neat just as like a little widget,

but it's also related to the goal behind my current prototype. My original goal was wouldn't it be neat if it was so easy for anyone to edit any web page they're on without really even leaving that web page. This wouldn't quite accomplish that vision. One, because it takes you to a different website. It takes you to GitHub. And then two, it plops you down into either a Markdown editor, which isn't intuitive for everyone. It probably will be intuitive for most people who view my website. But some pages on my website, futureofcoding.org, like index.html and the pages for the various podcasts are HTML. So it could even be harder for people to edit um than the markdown especially if they're not programmers but if they're simple typos i

think you know even my mom who who reads things from time to time and catches typos might be able to just hit the edit button fix the typo and hit submit and then it comes to me as a pull request well i guess my mom would have to create a gith. So that is a firm blocker for her. But anyways, we'll see. Hopefully I'll get that widget up and running at some point. But I bounced from the widget idea to creating a Flappy Bird game in Cycle.js because I forgot but then remembered that I had started something like that almost a year ago. A number of months ago for the same purpose, to get my head wrapped around how Cycle.js works. And I was doing that on Webpack Bin. So I think a number of months ago when I tried to learn Cycle.js, I tried to install it on Cloud9 and really do it the real developer way.

But when that didn't work i tried to use um tricycle this another thing that i think nick johnstone was behind but that wasn't quite working so i think he pointed me towards webpack bin which allows you to edit cycle js apps and other apps by installing all the software in this cloud IDE. It's kind of like JSFiddle or WoofJS, but much more extensible because you can install any webpack framework. And so again, this time I tried last week, maybe like three or four hours trying to get CycleJS create app to work. This is a NPM library that creates the boilerplate for a CycleJS app with like hot reloading and TypeScript and eventually I got it to install and work and run but then I was never able to

actually get the app to show up. Like the server seemed to be running but for whatever reason on cloud 9 I couldn't ever hit the. Like the server seemed to be running, but for whatever reason on cloud nine, I couldn't ever hit the page where the server was running. So, and I went to get her and asked for help and they were like, sorry, dude, like it looks like it's running. I don't know what to do. I don't know what to tell you. Maybe it's a cloud nine issue. And that's, that's where I left things and decided to bounce and go to Webpack Bin where I started to pick up back where I left off months ago on this Flappy Bird app. So before I tell you about this Flappy Bird app, I want to just briefly tell you about

what I was doing while I was waiting for NPM and NVM to update and install the various things. I went to my friend Nikolai's app Clay, which is really cool. It's like WebScript.io, which I've used in the past. It's also similar to Glitch and similar to like IFT and Zapier. It's a web interface that allows you to create microservices that deploy to AWS Lambda. And I highly recommend it. It's brand new. It's in beta. I don't know if you can use it right right now, but I was using it and it was really fun. And I used it for a few hours and I was giving Nikolai feedback on like the API and the type signature of different things. And he was super responsive and we had a lot of fun. And I think he even changed some of the things according to my feedback. So that was really exciting to get

to contribute to that and get to use this like new software. But what I was using this for, and you can see the links in my journal, is for my widget that shows the most recent commit and the date and the links, I need to hit the GitHub API. And the GitHub API doesn't work on the client side. So it's a very thin wrapper around the GitHub API. I don't even need to create a GitHub API key, because the stuff I'm doing is just checking public data. So it's very, very simple stuff, but I can't just do to create a GitHub API key because the stuff I'm doing is just checking public data.

So it's very, very simple stuff, but I can't just do it on the client, so this wrapper allows me to do it on the client, basically. So that was fun, but I'm not going to consume this API now because I'm back on the Flappy Bird thing. And so maybe I'll finish this widget in CycleJS over the next two weeks but I'm not

sure if this widget is so CycleJS-y so we'll see. Also over the past two weeks I had an interview with Professor Christopher Onand from McMaster University in Canada. He's teaching Elm to kids in fourth grade and beyond. He also has like an Elm iPad app thing where you can program an Elm on your iPad in a projectional editor, which is, as you know, if you listen to this podcast, many of the buzzwords that I talk about, teaching kids, projectional editor, Elm, type, like no type errors, no syntax errors, like algebraic thinking. It's all, it's, it's very related to all this work. So that was a really fun conversation. So look forward to that next week. Then I actually, we're thinking about expanding the business, the coding space. And so

I put together a spreadsheet of our costs and I use a technique that I learned from Felene Hermans I hope I'm pronouncing her name correctly she explained she shows you how to do a really interesting visualization with spreadsheet programming and so it was fun to actually get to use that technique for my business and and really truly see how powerful spreadsheets are when you have a programming line set and you know how to use them. Relatedly, a few weeks ago, I was at my friend's sister's new restaurant and she was trying to make a spreadsheet to help her calculate the costs for various menu items. And she wanted it all to kind of just like flow through so she

could input the prices for her ingredients in one spreadsheet and then in another spreadsheet when she lists that ingredient it'll just pull in the price for that ingredient automatically and so I had to show her how to do a VLOOKUP and it like blew her brain and it was so exciting for her to see how that worked and so it makes me wonder if building the idea that I've had for years now would be a useful thing which it's like a cross between Microsoft Access and like Airtable it's a intuitive spreadsheet interface to a sequel database that that's the main idea and. And so it's like basically Google spreadsheet, but it writes directly SQL to a SQL database. And this is useful because then you can

connect that SQL database to a number of things. And as you learned, if you listened to my interview with Lloyd Tabb, SQL is the only quote turn complete language for reading and writing data and so a limitation that will never go away with something like Airtable is that you only have a Mongo interface you have a rest interface to a Mongo database so the data you get out will be very limited. So if you want to do like really complicated queries, you'll have to like pull out the data,

store it somewhere else, and then run your analytics on that second store. Which to me is really sad if that's how the world it will be for forever, that you have to like be constantly moving data around into analytics databases and then doing the actual queries on that. When if you just build a better interface to SQL databases, like a

Postgres instance or something, then everyone can just talk to that Postgres instance and do your analytics right there. And, um, or if you have like a lot of analytics, you can like mirror it to Redshift and do the analytics there. But, but that, that, um, workflow so much better than having to pull things out of Mongo and ETL them. I've done enough ETL for one lifetime. So but that that's kind of a an unrelated idea that's it's also a spreadsheet metaphor but it's very unrelated from stream, which is my project now. So to be clear, I've been working with a bunch of spreadsheets in the past

for business use cases, and it's re-sparked the inspiration that I've had for making a spreadsheet interface to SQL databases. In much the same vein that Looker is a spreadsheet-esque interface to SQL databases in much the same vein that Looker is a spreadsheet-esque interface to SQL databases. But Looker is only the select statement from a SQL perspective, but I think we also need a spreadsheet interface that does insert, update, and delete. But in the past, I've tried to give this idea to other people, but nobody's taken me up on it. So maybe if stream sheets and other ideas that I'm working on don't pan out,

I'll give this spreadsheet interface to a SQL database idea another shot and see how that goes and see if we can get customers for that. So then, because I kept getting distracted and putting off my research on Wednesday and Thursday of last week, I set aside all day Friday of last week, which is three days ago from today to do the CycleJS Slappy Bird. I converted the code from what it was into the Unify architecture. So to take a step back, the way it was in was kind of interesting and a little bit wacky. You can check my journal for the code. I was trying to be super super declarative

with the way I described the state of my flappy bird. For example, I want to describe the Y position of the bird in one line as a function of time and the space key and the clicks. And it was successful. But then if you want to do more complicated things, for example, when the Y is below a certain point or above a certain point, the game should end. And then if the game is over, the bird shouldn't move anymore. So there's kind of a circular dependency where the Y position could then affect the game over and the game over could affect the Y position. And I was trying to do that with the same architecture, but it was it was just a mess. And so I decided to admit defeat

and move to more a more singleton architecture for my state. And so when I say singleton, I'm using the word that Pete Hunt was using. And I think what this word means is like one object for the state. And before I had like a number of variables that weren't all connected in a state object. And now it's a singleton. Now it's one object that contains the bird, the bird's Y position, the bird's speed, whether or not the game is over, and an array of all of the pipes. And that has made my brain hurt a lot less.

It did take me a long time to convert from my original architecture to a singleton state architecture and then it took me a long time if beyond that to convert that architecture into a ununified architecture where the bird is its own component and the pipes are its own component not each individual pipe but the pipes as a whole is a component i could make each individual pipe a component i haven't done that yet because it doesn't seem to lend me that much benefit at the moment. But I might do that just to see what that looks like because creating a component of components is useful. And also a component of a dynamic list is like an interesting exercise that's like a separate section of the Ununify architecture. So it's probably worth experimenting with but but it's still taking me like this is

laughable it's taking me hours and hours and hours to build this flat word in cycle.js which I was telling up my friend and and they were just laughing they were like they weren't laughing they were just like they didn't know how to say this is a friend who doesn't know computer science. And they don't know anything about my project. And so they were kind of embarrassed, but they didn't know how to say, this seems really easy. Why is this taking you so long?

Why is this interesting what you're doing? And I was like, no, no, no, I'm not building a Flappy Bird. I've built Flappy Birds in Scratch and in Woof and in JavaScript. I've built Flappy Bird dozens of times. I've helped dozens of kids build Flappy Bird. Like, I know how to build Flappy Bird. I can do it in just, you know, 20 minutes if I wanted to build it. I'm building it in this framework to learn the framework.

And so, but it is a good point that, like, why is it taking me so long to build this app that I've built so many times before in this new framework that I, in in theory should understand pretty well by this point so that is something to note but to me it really just makes me more excited because when you build something in cycle js you really understand it um it's easy to visualize your code especially because even a computer can visualize your code as a data flow diagram. I have more on that in a second, the DevTools thing. So there's so many benefits to programming in SQLJS, but even me, even I find it so incredibly hard to do. So I think that's super exciting from an opportunity perspective. There's this really powerful metaphor and way of thinking about your application.

And it's so unbelievably hard in its current form. So this leaves me with the opportunity of can I improve this? Can I, like with visual metaphors and a spreadsheet metaphor, improve the way things are? And I think the answer to that is yes. So, yeah, so that's exciting but also like something to keep an eye on like maybe the stream metaphor is too complicated in that vein i will say that elm which is very similar to cycle js i think takes a lot of the complexity of functional reactive programming and streams out of the equation by making a lot of opinionated decisions for you.

I think it creates a lot of things that I'm slowly intuiting and building into my Flappy Bird architecture. Elm has automatically for you from the get-go. It has actions. It has like a single state. It has strong types. So potentially a next step for me will be to try and build the same Flappy Bird app in Elm, which I think I've done before actually. But revisit that code, maybe add some things to it to get my head wrapped around Elm again. I've mentioned this before. Months ago, Andre said something along the lines, and in many places he said that Elm and Cycle.js are so, so similar, and that made no sense to me when he first said that. Then at some point, I was able to like load both Elm and Cycle.js into my head, and that statement made a lot no sense to me when he first said that. Then at some point, I was able to load both Elm and CycleJS into my head,

and that statement made a lot of sense to me. Now, but then I lost it. But now it's starting to make some more sense to me, but I think I still need to load both libraries into my head some more by building things in them for that to really make sense to me. And I think what I'll do is create an Elm Flappy Bird, and then I'll have my CycleJS Flappy Bird, and I'll have the code for you guys to view side by side. So maybe that'll help other people realize how similar they are. Maybe on my next podcast,

I'll talk more about that, because I think that's a useful thing to have out there. The last thing that I had to think about last week is whether or not to do the Reker Center, which starts today. And if I were to do that, I wouldn't be able to do this research recap episode today, or at least I probably wouldn't be able to and I'd have to do it tomorrow. So as you can tell, spoiler alert, I decided not to do the Riker Center for this six-week cycle. But, you know, it's not a decision for forever. I can, in six weeks, decide to start then on November 2nd, I think. I just wasn't all in.

I have hit my stride working from home, making my coffee, going on a run in the middle of the day. I really enjoy what I'm up to and how I do it. So I'm going to keep doing it this way for the next six weeks, and then I'll revisit this decision then. There are a lot of great reasons to do the Rico Center. I've been wanting to do it for years. I think it could really inspire me and help me come up with some good ideas for how to improve the coding space, my after-school program. But yeah, just not going to do it starting today. I am going to a RecurCenter event tomorrow evening with my friend Irvin,

so maybe I'll get to meet some more RecurCenter people there, including some of the people who run it. Say hi, apologize for bailing, I guess, somewhat at the last minute. Although I never committed to doing it, but I was talking to them seriously about doing it. So but I don't I think they'll be happy that I didn't do it when I'm not fully committed. So anyways, I'll I'll get to meet some more recursive center people tomorrow and then revisit this decision six weeks from now. Okay, so now let me just talk briefly about my plan for the next two weeks.

Obviously, it will change drastically as things develop, but here is generally where I'm thinking. So it feels very, very useful to continue my deep dive into CycleJS and FRP and Elm, especially in this context. I have very similar goals to Alan Kay's STEPS project, which I've talked about in the last research recap, and you can read about it on my journal, and you can just read the papers, the Steps Project papers. I will say, just as a heads up, the Steps Project is this NSF-funded grant, and they have an initial proposal, five updates for the five years of the grant, and then a final update. The final update is a summary of the proposal and the project and also links to the two main papers that the project produces, KScript and KWorld. These are the FRP

libraries that they use as a foundation for the their whole system. So if I were you I just skip to the last one, read the K script paper first, then read the K world paper, and then go and read the rest of the final report. I think that's kind of the way to do it. So let me continue. So my goals are very, very similar to Alan K's Steps Project's goals, which is not surprising given that my current prototype is largely largely inspired by Alan Kay's work and the work that he's inspired such as Scratch. So the Steps Project is built using functional reactive programming and streams. When I found that out, it blew my brain because not only do we have the same goals but we have the same ideas to achieve those goals

however when they built this project when they started this project in 2009 react.js wasn't a thing declarative reactive programming with streams was barely a thing they were really ahead of their time which is so impressive and cool um i think yeah they, they were pulling mostly from Conal Elliott's work on FRP in the 90s, not from on the React.js stuff, which, yeah, was a few years from being created and released in an open source way, which you would have heard about if you listened to my last podcast with Pete Hunt. So my idea is to use some of the new advances from functional reactive programming, streams, declarative programming, from the open source, React, and its children communities, especially Elm and CycleJS. So using all these new advances, can I use the streams paradigm with a spreadsheet metaphor, or some other metaphor, but right now I'm thinking about the spreadsheet visual metaphor, to more fully realize the vision of the Steps Project to build better foundations for software. That's my current

prototype thesis right now. And it's pretty exciting. I was explaining this to one of my mentors, Brett Burson from First Round, and he looked at me like, and his eyes got big. He's like, Dan, you're doing your homework. You're doing the research. I don't know. I'm doing it. So I'm excited about this thesis. I think there are a lot of reasons why this probably isn't going to work, and I'll scrap it and move on to the next thing, but I'm excited to keep pulling on these threads and see where it takes me. To be clear, I haven't really created that much code for this prototype yet. If you see in my journal or if you go to futureofchrome.org slash prototypes slash stream sheets, you'll see some code for this prototype.

But it's old and largely unrelated. So mostly I'm just trying to understand CycleJS and FRP and Elm, and then I'll do some drawings, because mostly what I'm trying to innovate here is the visual metaphor stuff. And then if those drawings go well, then maybe I'll go back to Andre, talk about some more stuff, and then we'll see about prototyping in code in like two or four weeks, probably. That's if everything goes well. Probably more likely, I've realized that my visual metaphor idea doesn't work.

I think about other visual metaphor ideas, I get lost, and I kind of bounce and think about a new prototype idea. Or maybe I take the time to finish my Red Victor deep dive, or I take the time to turn more of the content I've created over the last two or three months into more consumable blogs and other content that I can maybe make go more viral to grow the audience and get more collaborators. Those are other ideas if this prototype is put on pause or whatever so another thing that I really want to do is get the cycle.js dev tools working because as I've talked about before the they have this state

flow diagram where they parse the the structure of your app into a diagram where when you click on where like when you trigger the different events that you can see the event flow down as a stream through the data flow diagram and it's really beautiful to watch and i would love to get to play with it myself with my own code and kind of see if it makes my own code more understandable from that perspective however given that i'm using webpack bin and not truly my own interface, I'm not sure if this is possible. I just asked the Gitter community if they think it's possible. So we'll see what they say. I'll keep playing with that a little bit.

Maybe I'll spend another hour or two on that. As a side note, while I was on the Gitter page, I felt compelled to answer the person above me's question before I asked my own question, and I think I actually helped him a bit. So that was really exciting. It makes me feel like I'm actually getting a handle on this CycleJS thing. If I could help someone who clearly knows what they're doing, because he's writing some complicated code, I was able to lend a hand. Okay, so I think the next thing I'll do after I finish my CycleJS Flappy Bird is read a

bunch of papers on FRP and Colonel Elliot stuff and Elm stuff, maybe build an Elm Flappy Bird. Then I'll also, somewhere in there, send an email to Nick Johnstone, who's created a number of projects in this space related to CycleJS and also related to making Cycle.js easier for people to get started with and to use and create like debuggers and dev tool-y type things. So he and I, I think, could be really strong collaborators, possibly, depending on how things go over the next few weeks and if he replies to my email that I'll send soon.

Speaking of emails, I haven't gotten one back from Alan Kay yet, but I will follow up with him and see what's going on there. And then, yeah, I'll see where I'm at after I am fully immersed in CycleJS and now I'm in FRP and see what my visual metaphors look like. And either I'll start prototyping stream sheets or I'll come up with some other things to do. One last note. Next Monday, Monday the October 2nd, will be a Future of Programming meetup. So if you are in New York City

next Monday and want to come join us, I think it'll be a reasonably large group and we'll have the Clay guys that I mentioned before presenting their work. So if you're not part of our Slack and you're in New York on Monday and you want to be a part of that, shoot me an email, steve at futureofcoding.org and I'll get you included there. We would love to have you.

And then on a fun note, I've had two friends tell me that they were listening to the Pete Hunt interview, React interview. Actually, three friends. So that was really exciting. One on a run, one going to bed, kind of hungover. so it's exciting to have my friends listen to it even if it's motivated more by guilt than it is by um their interest to actually hear what i have to say um i'll take what i can get i don't have too many listeners um but yeah it's exciting that uh that my friends find it at least interesting enough to keep listening. So I hope I can continue to hold people's attention here. And that is it.

Thanks again for listening. And I will catch you all with Professor Christopher Anand next week. Bye.