DEV Community: Sammy Israwi

Learning How Compilers Work, And Getting Stuck

Sammy Israwi — Tue, 11 Jun 2019 14:22:03 +0000

Notes:

This article is less of an instructional one, like previous articles, and more of a question + fun narration of my struggles with compilers so far. More instructional articles will come later on.
This is about compilers only, not about Interpreters. I have no idea how interpreters work yet.

The Background

Out of all the classes one takes as a CS student in university, some useless and some not so much, it might come to you as a surprise that I actually enjoyed the classes about programming languages and system software - it was certainly a surprise to me because I had no idea I had an interest in them!

Particularly, I was interested in learning how languages worked. All I knew beforehand is that programming languages are translated to machine code so that the computer understands what to do, because the computer doesn't understand JSFuck. However, I had no idea how we go from human-readable programming language to machine-language, I thought of it for a while as translating Spanish to English. After I learned that was not the case, I simply thought of it being a black box of computer science magic and didn't push the subject.

The Systems Software class at my university taught us a bit more about what was inside the black-box, they had us build a compiler for a simplified version of language called PL/0. It was the second time I took the class when it actually clicked for me and started being interesting, I can thank the professor for that. It was in said class where I learned about the steps of compiling a language (parser, analyzer, all that jazz) what an Abstract Syntax Tree (AST) was and how it was an intermediary step of compiling and a very powerful tool when understanding how a language works, and how a computer can understand it.

All that backstory to bring you to this Tweet:

// Detect dark theme var iframe = document.getElementById('tweet-1131020431052247043-816'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1131020431052247043&theme=dark" }

Which came right at a time when I wanted to delve deeper into developer experience tools. At the same time, as if by divine timing, my brother shared with me this repo about learning to build your own anything:

codecrafters-io / build-your-own-x

Master programming by recreating your favorite technologies from scratch.

Build your own <insert-technology-here>

This repository is a compilation of well-written, step-by-step guides for re-creating our favorite technologies from scratch.

What I cannot create, I do not understand — Richard Feynman.

It's a great way to learn.

Tutorials

Build your own `3D Renderer`

View on GitHub

Which links to this repo about building your own compiler in JavaScript:

jamiebuilds / the-super-tiny-compiler

⛄ Possibly the smallest compiler ever

Welcome to The Super Tiny Compiler!

This is an ultra-simplified example of all the major pieces of a modern compiler written in easy to read JavaScript.

Reading through the guided code will help you learn about how most compilers work from end to end.

Want to jump into the code? Click here

You can also check it out on Glitch

Why should I care?

That's fair, most people don't really have to think about compilers in their day jobs. However, compilers are all around you, tons of the tools you use are based on concepts borrowed from compilers.

But compilers are scary!

Yes, they are. But that's our fault (the people who write compilers), we've taken something that is reasonably straightforward and made it so scary that most think of it as this totally unapproachable thing that only the nerdiest of the nerds are able to understand.

Okay so where

…

View on GitHub

Which came from that fantastic article by @mattsparks:

🧠 Learn! 5 Github Repos With Great Free & Open Source Resources

Matt Sparks ・ May 29 '19

#webdev #beginners #opensource #programming

The Current Situation

So, I started going over the Super Tiny Compiler to understand how it works, and converting it to TypeScript to prove to myself that I understand what is happening in the different stages of the compiler.

I have been doing just that in a repository is a fork of the previously mentioned one, and you can find it here:

SammyIsra / the-super-tiny-compiler

⛄ Possibly the smallest compiler ever

My first attempt (out of school) to learn how compilers work, and what tf an AST is

This version will be in TypeScript mostly because that is a good way for me to properly understand how it works

Original README below this line

Welcome to The Super Tiny Compiler!

This is an ultra-simplified example of all the major pieces of a modern compiler written in easy to read JavaScript.

Reading through the guided code will help you learn about how most compilers work from end to end.

Want to jump into the code? Click here

You can also check it out on Glitch

Why should I care?

That's fair, most people don't really have to think about compilers in their day jobs. However, compilers are all around you, tons of the tools you use are based on concepts borrowed from compilers.

But compilers are scary!

Yes, they are. But that's…

View on GitHub

The first two steps were not so bad:

The first step (the Tokenizer) turns the input string in the starting language to a series of tokens, each token identified as a Parenthesis, Number, String, or Name.
The second step (the Parser) navigates the token list and creates a simple AST by analyzing the token list and determining what kind of node each token is and if the following ones are children nodes.

I'll go into a deeper discussion on the matter in more instructional articles, and they will come with drawings since that is how I first understood these topics.

The Blocker

Steps #3 and #4 (the Traverser and the Transformer) is where I am currently stuck at. These steps seem to live together in the sense that they perform the next step in the compiling process.

However, I am at a loss when trying to understand how we get the simple AST from step 2 and turn it into the more complicated one that the Code Generation step can use to create the compiler output, and how to turn that knowledge into the Types created by said steps.

The way I understand this section of the compiler is that the Transformer takes in the Traverser and the Simple AST, creates a "visitor" which dictates what happens when finding a node of a specific type in the Simple AST, and it outputs the New AST (as is referred to in the code), which is the input the Code Generation step uses to create the output code.

So this is where I lay my question and my request for help, the Traverser and the Transformer steps of the compiler are not the clearest subjects for me, so if you have any knowledge about them or if you have a similar experience to mine, I'd love to hear about it.

Quick note. After writing this article, I have since found this video from the same author: https://www.youtube.com/watch?v=Tar4WgAfMr4

JS Project Setup: Code Quality is simple when you don't have to do anything

Sammy Israwi — Fri, 08 Feb 2019 01:43:59 +0000

The JavaScript, Web, and Node community is blessed these days by having easy-to-use (and not so easy-to-use) tools at our fingertips, along with documentation for them written by dedicated members of the community.

This post is about setting up the simplest quick-and-easy pipeline with some well known tools like Prettier for code quality/readibility, and Husky for automatically enforcing those rules in our codebase.

In some later posts we'll add build steps, testing, and some technology-specific tools like React and TypeScript. However, today we're keeping it simple and clean with only Prettier and Husky.

Also, keep in mind that many existing tools and frameworks like Create React App, Gatsby, and so on, already provide some of the tooling mentioned here. However, we are starting from zero because our purpose is mostly to learn about the tools and understand why they are used.

Once we understand how easy it is to set up these code quality tools, that is one less hurdle to jump through when trying to use these in your own project.

But Sammy, Why?

"That which cannot be automated, cannot be enforced."
-Brian Holt, @holtbt

High quality, familiar, consistent code is easier to read and understand. Additionally, code similar to your own is easier for you to understand.

How do I start?

Ok, step #1 is simple: create a new npm project, create a JS file, and write the ugliest, nastiest, most unreadable (but working) code you've written. Ignore style rules, best practices, and ignore what mean people say on Twitter. Get that out of your system.

Now that you got an unholy mess in front of you, our first of the two tools comes into play:

Prettier

Because sometimes we can't be trusted.

We are using Prettier version 1.16.4.

Prettier is a code formatter - this means that it will grab your code and apply its own consistent style rules on it. It has some flexibility, but generally developers use the default rules to keep style consistent across projects.

Prettier will turn this inconsistent one-liner mess:

export function funkyFilteredNames(names = [...defaultNames]) { return names.filter((name) => name.toLocaleLowerCase()[0] == "a").map(name => name.toLocaleUpperCase()); }

Into this readable snippet:

export function funkyFilteredNames(names = [...defaultNames]) {
  return names
    .filter(name => name.toLocaleLowerCase()[0] == "a")
    .map(name => name.toLocaleUpperCase());
}

How it does it is up to you. You can use Prettier as a CLI tool or you can let your text editor of choice handle it. To keep it simple (and let you use whatever you want) we are going to use the Prettier CLI.

If you want to see how to install Prettier on your IDE, check out their docs on the matter.

First things first - install Prettier: npm i -D prettier.

Now do me a favor: open the file where your messy code is, and open the command line on the same directory as your file. While looking at your code, enter the following command:

npx prettier *.js --write

And boom, no longer a mess!

Congratulations, you have code style rules in your codebase! To make this easier, we will make the above snippet an npm script, with a few changes to find all JavaScript files:

// package.json:
{
  // ...
  "scripts": {
    // other scripts
    "pretty": "prettier \"**/*.js\" --write"
  }
}

Now you only have to run npm run pretty from within your project to format all the js files in it!

Congratulations, you made it easy! ✨

You can also make Prettier check the code instead of formatting it, and erroring the console out when the code isn't formatted:

"pretty-check": "prettier \"**/*.js\" --list-different"

But what about reminding yourself to run the formatter? Are you completely sure that you will run the Prettier every time? That's where our second tool for today comes in: Husky!

Husky

Because we so easily forget

We are using Husky version 1.3.1

🐕 Husky makes it easier for us to write Git Hooks - commands that run when we call specific Git actions. We will use it to make sure that Prettier checks the code when trying to commit to the repository.

The steps for husky are simple, starting with the configuration file, which defines our hooks!

Create a file called .huskyrc in the root of your project, and write in the following text to define a hook that will run pretty-check before every commit:

{
  "hooks": {
    "pre-commit": "npm run pretty-check"
  }
}

Then we install Husky: npm i -D husky

Note: it is important that you install Husky after defining the .huskyrc file. If anything, you can always reinstall the package. Additionally, you should delete the .git/hooks folder if Husky is still not working, and then reinstall the package. You can read a bit more about it in this GitHub issue

Now go to one of your files and write some ugly code. No need to make a mess like last time, a single single quoted string would be enough!

Save and attempt to commit the file and you will see this at the end of the response:

Husky rejected the commit because Prettier checked the code, and found that the code does not follow Prettier standards!

If you want, you can change the pre-commit hook to format the code instead of just checking it by changing the content of `"pre-commit" to execute pretty instead of pretty-check.

Congratulations, you made it automatic! ✨

These days, setting up your workspace with a formatter is not difficult, and it goes great lengths for readability of your code.

Prettier is one today's most used JavaScript formatter with almost 3.5 million downloads weekly, and the developers have done a great job at making it easy to use and understand.

Husky allows us to write git commit hooks without much overhead or effort. Combined with Prettier, it makes it really hard to commit code that is inconsistent with the Prettier style guide.

I have set up this small project for you to check out the steps I described in the article:

SammyIsra / JsEasyPipeline

Example of a JS project with pipeline and code quality tools 📝

JsEasyPipeline

Accompanying project to my articles on Dev.to about implementing a JS pipeline/workspace tools 📝

The repo will have examples on how to implement various tools like Prettier, Husky, ESLint, TravisCI, TypeScript, and similar tools in that style.

This project shows how to implement project tools for JavaScript projects. The articles where I explain the tools are here:

Prettier and Husky

View on GitHub

Check out the branch Part1.PrettierAndHusky for the code specifically for this article.

❤️ Thank you all for reading! More parts of this series will come later. I hope to use ESLint, TravisCI, and my own personal tools in future articles.

Do you use Service Workers in production? How has your experience been like?

Sammy Israwi — Thu, 14 Jun 2018 13:23:12 +0000

If you have used Service Workers in production, I'd like to hear about it!

How did you realize you needed them?
How was your experience setting it up, and maintaining it?
Results? Demos?

Thank you all!

Optional Chaining may be coming to JavaScript

Sammy Israwi — Tue, 20 Feb 2018 00:49:49 +0000

Update: Optional Chaining is finally in Stage 4!! Which means it is part of the ES2020 specification. It has also already made it to TypeScript v3.7.

Here's the repo with all the info you need.

What is it?

Optional Chaining allows us to check if an object exists before trying to access its properties. Some other languages have something similar. C#, for example, has a Null Conditional Operator that behaves very similarly as the proposed Optional Chaining.

Why do we need it?

Have you ever had to check for the existence of objects or arrays before accessing its properties? If you forget, it may look a little bit like this:

if(specimen && specimen.arms && specimen.arms.length > 2)
    console.log("This is probably an alien");

The reason why we do these checks is because in JavaScript allows for anonymous objects that don't necessarily have a structure or schema. Therefore if we don't check for parents in an object tree, we get a lot of errors that look like this:

Because, at least in the case of the error, specimen does exist, but it does not have an arms property. Therefore, we tried to get length of something that was undefined.

So, what's the proposal?

Instead of all that, we can chain optional checks like this:

if(specimen?.arms?.length > 2)
    console.log("This is probably an alien");

However, keep in mind that the Optional Chaining operator is ?. not ? - this means that when using it to access an item in an array, it will look like this instead:

var firstArm = specimen?.arms?.[0]; //CORRECT
var secondArm = specimen?.arms?[1]; //WRONG

Similarly, when using it to check for the existence of functions:

var kickPromise = specimen?.kick?.();  //CORRECT
var punchPromise = specimen?.punch?(); //WRONG

In this case, we check if kick exists before calling it as a function!

How does it work?

The operator checks if whatever is to the Left-Hand Side of ?. is null or undefined. If it is, then the expression short-circuits and returns undefined. Otherwise, the expression continues to evaluate as if nothing is wrong.

When can I use it?

Well, it is still a proposal so it's not in Vanilla JavaScript just yet. However, it is usable with Babel!

To stay up to date with the status of the proposal, as well as to have a more in-depth understanding and to check some examples, you should check their GitHub repo! You can also find the specs here, but I won't get into that since most of that document goes way over my head 😅

Thank you!

You're welcome! ❤️

Explain The New React Context API Like I'm Five

Sammy Israwi — Sun, 04 Feb 2018 23:08:04 +0000

Recently React got a new version of Context and I've seen a lot of hype about it in Twitter but I'm not sure if I understand the use case of Context, or why this is a needed change. Can anyone help me understand how it works/what it solves?

Thank you!

The status of Meteor on Windows in 2017

Sammy Israwi — Fri, 03 Nov 2017 17:33:07 +0000

Premise and fall from grace â˜„ï¸

If you don't care about backstory, jump to "And then we're here".

If you don't know about Meteor, I suggest you read the official pitch on their website. This article is more about the state of it on Windows today.

Ok so, Meteor for me is how I got into web development for real. I used it heavily in 2015 for my Summer internship at Spiceworks after my mentor recommended it. An easy to use, full stack Javascript framework that blurs the line between Front end and Back end? I was in love!

Sure, it had some performance issues on Windows, but nothing breaking. At the time, I didn't really have to care about deployment since we were dealing with a demo. We could use the free demo hosting MDG provided for Meteor applications.

From the start, Meteor always considered Windows as a side thought, never giving true mobile support for Windows.

I even gave a couple of talks to the local ACM chapter about it! Did a demo deployment and everyone was surprised and they were starting to see why Meteor was great. Meteor was my solve-all solution.

From my presentation for ACM

Fast forward to one particularly annoying afternoon. A couple of friends asked me to do a short workshop on Meteor to get their feet wet. We could not even get Meteor running on their machines. The installer would work, and it would create the starter project, but the project would not run. After some digging and googling, we found out it was a Windows-specific issue on the current version. Delete everything and start a new project with an older version and no problem.

After that, it was one issue after another. I decided to use it last year for Georgia Tech Hackathon where my friends and I decided to create FlavoredNews: a news client that would sentimentally analyze news and color code them. It was an interesting project, and to my delight Meteor was working flawlessly until we had to deploy. We spent over an hour and a half figuring out how to deploy for free (probably would have been less time if I weren't sleep deprived) and in the end decided to deploy it to MDG's very own Galaxy and eat the cost. Granted, it ended up being only a few dollars at most; but we were expecting to spend a grand total of zero dollars (as we usually do in Hackathons).

Sometimes you just want to bundle and deploy to a platform like Azure and AWS, where you are either in a free tier or have student credits.

I recently was pointed towards this article that gives you a step by step process for deploying Meteor apps to Heroku, we will be trying that out for size today.

After the entire debacle left a sour taste, I dropped Meteor hoping to pick it up in the future when it had better Windows support.

TL;DR: Meteor promises a lot as long as your dev machine is not Windows

And then we're here! ðŸ

We're going to try something really simple today. My goal is to install Meteor create an application, do some minor changes, and deploy to Heroku using this guide mentioned above or something similar.

Important note:
This article was modified from the original publication. A little after making the article public, I attempted a few more things and Meteor worked as intended. Simple stuff like giving the choco installer more time to finish did the trick. Anything after this point is more accurate to what I discovered after publishing.
Sorry for the confusion!

For reference, here is my OS info:

PS C:\Users\Sammy-Surface> systeminfo | findstr /B /C:"OS Name" /C:"OS Version"
OS Name:                   Microsoft Windows 10 Pro
OS Version:                10.0.15063 N/A Build 15063

Installing ðŸ’»

Installing seems fairly simple these days:

So, run the command on an admin shell and wait for a bit for the download and installation process to finish.

If you are erroring out, there is a good chance the choco installer is timing out. To increase the timeout, run instead:

PS C:\Users\Sammy-Surface> choco install meteor -y --execution-timeout 10000

Keep in mind, this process will take a while.

Starting a project ðŸš¦

Creating a project is also simple. On a terminal, run:

PS C:\Users\Sammy-Surface\Development> meteor create nothing-app

This may take a while; Meteor is not a lightweight platform.

At this point, there is are a few common errors that will stop your progress. If you get an NPM error during the create process, there is a chance your environment was not reset after installing Meteor. Try to close all command prompts and terminals you have open and reopen it. There are a few other errors that may pop up, hopefully you can find your answer here.

Development ðŸ› ï¸

For the development section, we will add support for users in our boilerplate app. For starters, we will add the meteor packages accounts-ui and accounts-password:

PS C:\Users\Sammy-Surface\Development\nothing-app> meteor add accounts-ui accounts-password

Changes to your project's package version selections:

...

accounts-ui: Simple templates to add login widgets to an app
accounts-password: Password support for accounts

We will set up the configuration for the Accounts package on client/main.js. If you have on file only what is relevant, it should look like this:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Accounts } from "meteor/accounts-base";

import './main.html';

Accounts.ui.config({
  passwordSignupFields: "USERNAME_ONLY",
});

And somewhere in your main.html, add:

<div class="login">
    {{> loginButtons}}
</div>

Now your website should look like this!

We did not hit any snags! Good for us, proud of Meteor over here. Installing packages easy and it worked.

Deployment ðŸš€

For this section, we will follow this ten step guide mentioned above. This will mean we are deploying to Heroku, therefore you need to set up an account with Heroku and download the Heroku CLI

There are two key points to remember here:

We are using a custom buildpack made specifically for Meteor. There are many of these out there, this one is updated and currently maintained.
We are using a remote MongoDB instance instead of a local version of it.

And that's it! Go to your Heroku app's website and you will see your application!

Conclusion ðŸ““

It was painful to set up Meteor initially, but once we installed the app we were done for hurdles. Support for Windows is still a side thought, but it is not impossible to be a Windows Meteor Developer. However, I am not a fan of the snags we hit because of our choice of OS. As a developer, the less time I have to spend setting up and bootstrapping a project, the better.

Deployment on Heroku is easy and convenient! Hopefully, the buildpack will be maintained for a while.

I am a fan of these quick build frameworks that allow you to deliver quickly. I will be (cautiously) coming back to Meteor.

Alternatively, if anyone knows frameworks that work similarly to Meteor, I am always looking to explore new ways to build stuff!

While I have your attention, look at the ðŸ‘¿ entry on EmojiPedia. Anything else that looks... Off?

Now that Hacktoberfest is over, do you have anything to share?

Sammy Israwi — Wed, 01 Nov 2017 14:07:33 +0000

Hacktoberfest ðŸŽƒ just ended yesterday and I'm willing to bet more than one person here has found a new pet project to work on their free time!

Or, if you're like me, rushed a PR that added weather capabilities to a Hubot repo you manage for your friends Slack two hours before midnight to get that beautiful shirt.

I also found out that not all PRs are going to be well received, and that I should be ready to get some rough feedback on my code if I deserve it.

We all have good and bad stories here about Hacktoberfest so, share away!

Also, while I'm at it, I'm always up to check out repos that do cool stuff in vanilla JS, React, and RxJS. So if you worked on one, I would like to see! ðŸš€

Also, while I have your attention, take a look at the Crocodile emoji entry on emojipedia.

RxJS in practice: how to make a typeahead with streams!

Sammy Israwi — Sat, 19 Aug 2017 18:42:17 +0000

What we will do

You know when you type into the Twitter search bar and it tries to guess what you want to search for? Say you start typing "SammyI" and the first result is my twitter handle, @SammyIs_Me.

That's what we'll make (except probably maybe not for Twitter).

But first, housekeeping

Last time we talked about streams and actions we do on those streams, but I did not use the correct terminology there. The streams are called Observables, and I will refer to those as such in the future.

Starting code

Let's skip the basic HTML, just make something like so:

<input type="text" 
       name="typeahead" 
       class="typeaheadInput" />

You can add some CSS to make it look nicer if you want. Next, the starting Javascript - a ~~stream~~ observable that sends new data at every change of the input text box, and a function that logs the input to the console:

const inputStream$ = Rx.Observable
        .fromEvent(input, 'input')
        .map(e => e.target.value);

inputStream$.subscribe(text => console.log(text));

We are even 'sanitizing' the observable to only get the useful data from the event.

Getting the search data

To get the search/suggestion data, we will use Datamuse API. We will use the suggestion endpoint to get some word suggestions, like so:

GET https://api.datamuse.com/sug?s=sammy
Response:
[{"word":"sammy","score":35841},
{"word":"sammy sosa","score":35639}, 
... ]

Let's add that the request to our subscribe of our observable, and we have:

inputStream$.subscribe(text => {
    fetch(`https://api.datamuse.com/sug?s=${text}`)
    .then( resp => resp.json() )
    .then( resp => console.log(resp) )
});

Now we are showing to the console an array of all the suggestions from the API. We are not done, but you can see the final product from here!

Making the search data also an observable

We continuously getting a stream of data from datamuse, can't we just make that another stream to be consumed? Yes we can!

There are a few new, important concepts in this section to tackle, so make sure you get a good grasp on it before moving on.

First, we don't want to hit the datamuse endpoint at every single stroke. If we do, we will be getting recommendations for h, he, hel, hell, hello and we only need the recommendations for the hello.

So, we will debounce the observable. Debouncing means 'wait until we haven't received a new event on the stream for x milliseconds, then get the latest item and that's the new item of the observable. So, in our example from before, after we stop typing for one second, only hello will be sent to the observable. Try it out, change the inputStream$ observable from before:

const inputStream$ = Rx.Observable
        .fromEvent(input, 'input')
        .map(e => e.target.value)
        .debounceTime(2000);

Type on the input box and then wait for two seconds. Keep an eye on the console.

Let's make the search results a new observable!

const suggestionsStream$ = inputStream$
    //Fetch the data
    .mergeMap( text => fetch(`https://api.datamuse.com/sug?s=${text}`) )
    //Get the response body as a json
    .mergeMap( resp => resp.json() )
    //Get the data we want from the body
    .map( wordList => wordList.map(item => item.word) );

I promise I will get into mergeMap soon, but first I must ask you to just trust in it. If you are dealing with a promises, use mergeMap instead of map
Now that we have an observable that gives us an array of suggestions, we put that array somewhere.

Since this is getting a bit longer than I anticipated, we will just list the suggestions in a div somewhere:

//We made a div of class 'suggestion' for this
const suggestions = document.querySelector('.suggestions');
suggestionsStream$.subscribe(words => {
    suggestions.innerText = words.join('\n');
});

Now try it out! Type something, wait two seconds, look at the results!

Final Code

<input type="text" 
    name="typeahead" 
    class="typeaheadInput" />
<div class="suggestions"></div>
<script>
//Get the suggestions div
const suggestions = document.querySelector('.suggestions');
//Get the input component
const input = document.querySelector('.typeaheadInput');

//Input stream
const inputStream$ = Rx.Observable
                .fromEvent(input, 'input')
                .map(e => e.target.value)
                .debounceTime(2000);

//Suggestions stream
const suggestionsStream$ = inputStream$
                .mergeMap( text => fetch(`https://api.datamuse.com/sug?s=${text}`) )
                .mergeMap( resp => resp.json() )
                .map( body => body.map(item => item.word) )

//Handle the stream
suggestionsStream$.subscribe(words => {
    suggestions.innerText = words.join('\n');
});
</script>

Next time we will explain what mergeMap is (probably a shorter one, it is so much more than a promise handler!) and we will dive into animations with RxJS! If you have any questions/corrections/suggestions/compliments you can reach me via Twitter @SammyIs_Me.

What is RxJS when seen from a mile away?

Sammy Israwi — Tue, 15 Aug 2017 08:23:18 +0000

Say I move my mouse on a website and every location in the path is collected and stored in an array. By the end of the visit, you have a huge array with the entire path my mouse took while I was visiting your website.

Now let's say that I have access to that data in real time, as the mouse is moving across the screen. You can see this information as a stream of data that at any given time, it tells you where my mouse is.

Now that have access to a stream of data, we just need to do something to react to this stream (aka, do something every time a new mouse movement is recorded).

To keep this simple, we will just log to the screen what the X and Y coordinates of the mouse are on the website.

In RxJS, it looks something like this:

//The *stream*
const mouseMovement$ = Rx.Observable.fromEvent(document, 'mousemove');
//The *do something with it*
mouseMovement$.subscribe(position => console.log(`(${position.cilentX}, ${position.cilentY}`));

Great! But... can't we just do this with event handlers?

Well...

document.body.addEventListener('mousemove', (event) => {
    console.log(`(${event.clientX}, ${event.clientY})`);
})

In this simple case, yeah - and it's quite simple too... But then what if we want to modify the information before we handle it:

//I want the distance from the center of the page
const mouseMovement$ = Rx.Observable
    .fromEvent(document, 'mousemove')
    .map( event => {
        const posX = event.clientX - document.body.clientWidth/2;
        const posY = event.clientY - document.body.clientHeight/2;
        return Math.sqrt(posX*posX + posY*posY);
    });
//The *do something with it*
mouseMovement$.subscribe(radius => console.log(`Radius: ${radius}`));

Or want to limit how often we get information from the stream:

//I want to know where the mouse pointer is 2.5 seconds and not more often than that
const mouseMovement$ = Rx.Observable
    .fromEvent(document, 'mousemove')
    .debounceTime(2500);
//The *do something with it*
mouseMovement$.subscribe(position => console.log(`(${position.cilentX}, ${position.cilentY}`));

RxJS makes is easy to do actions over time over the information we get at different points in time. When we see everything as a stream of data we want to do something with over time, RxJS starts to make more and more sense.

In my next post, we will make a typeahead using RxJS! Since I am writing this as I am learning it, the post will be with some mistakes I make in the process. Oh hey here is the post!

Thank you Toolsday podcast for the inspiration and davidkpiano for the help!

Hello, I'm Sammy!

Sammy Israwi — Thu, 10 Aug 2017 18:35:54 +0000

Hello! I'm Sammy. I'm a software developer currently at Precision Infinity in Orlando, FL.

Most of what I enjoy is web development and design. I also do photography, you should check that out too!

DEV Community: Sammy Israwi

Learning How Compilers Work, And Getting Stuck

The Background

codecrafters-io / build-your-own-x

Master programming by recreating your favorite technologies from scratch.

Build your own <insert-technology-here>

Tutorials

Build your own 3D Renderer

jamiebuilds / the-super-tiny-compiler

⛄ Possibly the smallest compiler ever

Want to jump into the code? Click here

You can also check it out on Glitch

Why should I care?

But compilers are scary!

Okay so where

🧠 Learn! 5 Github Repos With Great Free & Open Source Resources

Matt Sparks ・ May 29 '19

The Current Situation

SammyIsra / the-super-tiny-compiler

⛄ Possibly the smallest compiler ever

Original README below this line

Want to jump into the code? Click here

You can also check it out on Glitch

Why should I care?

But compilers are scary!

The Blocker

JS Project Setup: Code Quality is simple when you don't have to do anything

But Sammy, Why?

How do I start?

Prettier

Husky

SammyIsra / JsEasyPipeline

Example of a JS project with pipeline and code quality tools 📝

JsEasyPipeline

Do you use Service Workers in production? How has your experience been like?

Optional Chaining may be coming to JavaScript

What is it?

Why do we need it?

So, what's the proposal?

How does it work?

When can I use it?

Thank you!

Explain The New React Context API Like I'm Five

The status of Meteor on Windows in 2017

Premise and fall from grace â˜„ï¸

And then we're here! ðŸ

Installing ðŸ’»

Starting a project ðŸš¦

Development ðŸ› ï¸

Deployment ðŸš€

Conclusion ðŸ““

Now that Hacktoberfest is over, do you have anything to share?

RxJS in practice: how to make a typeahead with streams!

What we will do

But first, housekeeping

Starting code

Getting the search data

Making the search data also an observable

Final Code

What is RxJS when seen from a mile away?

Hello, I'm Sammy!

Build your own `3D Renderer`

Premise and fall from grace â˜„ï¸

And then we're here! ðŸ

Development ðŸ› ï¸