Forem: Joshua M Loran

What are websockets

Joshua M Loran — Tue, 14 May 2019 18:50:55 +0000

A web socket is a computer communications protocol that provides full-duplex communication channels over a single TCP connection. TCP stands for Transmission Control Protocol and is one of the main communication protocols in the internet protocol suite. Establishing a full-duplex communication is the the power of the web socket.

What is Full-duplex communication? Picture a section of road with a post office on either end (A and B) that is 1 lane wide. Cars can go in either direction, BUT can only go when they are told it’s all clear by the other side or they may get in a head on collision (also, if they go even slightly off road they explode into a million shiny pieces). So, a car leaves A and travels towards B, and B knows not to go until the car from A reaches B and says the road is clear. Car A may have a request that something be sent back to post office A, and/or it may be communicating some info by dropping off some mail.

This happens a lot with web communication. Client sends a request and/or info, server gets the request/info, processes what to do with it and sends back some info. Turns are taken, my kindergarten teacher, Mrs. Smith, is happy and all is well in the world. But web sockets throw all that polite turn taking out the window.

We’ve picture a single lane road as standard communication where two entities communicate by taking turns sending requests and information. But, and I know this is crazy, what if there was a TWO lane road. What if there was a world where 2 entities could send information whenever they wanted, AND, could receive information whenever the other felt like sending it. This bi-directional road means that each side doesn’t have to send out requests because there is no need to control who’s turn it is, an entity simply needs to “subscribe” to the other to accept any information that may come from that direction.

Ok, another thought experiment. Entity A is a server that performs some function and returns an answer. However, this time there isn’t just entity B as a client, there are hundreds of clients and they all have this 2 lane road leading to/from the server. The server can now update all the clients without the need for request/response from each individual client. The server can simply “broadcast” some information to all the clients “subscribed” to that lane (or channel) at the same time and each client can send information to the server for processing.

Cool! No more polling or long-polling for a client to try to stay current with the state of the server. Information is now realtime, being sent by both sides upon processing, and received whenever it comes at them. We now live in a turn free world where things just do as they please. Now we can do cool things like make multiplayer realtime games!

To dip a little into web sockets, I made a 2 player tic-tac-toe game that used them. Ruby on rails and Action cable provide a pretty straight forward implementation of web sockets for beginners. Here is a some basic setup to get you started with Ruby and Actioncable with a React frontend to use websockets.

First generate your React front end by entering the following into your console:
create-react-app <your-frontend-project-name> cd <your-frontend-project-name> yarn add actioncable yarn start
And then get you rails backend wireframe up by entering the following into your console:
rails new <your-backend-project-name> --api cd <your-backend-project-name> rails g scaffold <your-model-name> <your-models-attributes> rails db:migrate
The next step is to persist an instance of your model by creating one in the rials console:
rails c <your-model>.create!(attributes)
Be sure to setup cors by uncommenting the 'rack-cors' gem in your gemfile and uncommenting the following in your application.rb. Making sure origins is set to the acceptable url, or in this case I used * to make every url acceptable.

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end

Run Bundle install.

Now to wire up actioncable. The next few steps are fairly simple. Navigate to your config.routes.rb and add the following before the last end.
mount ActionCable.server => '/cable'
Then, go to your console and type in the following:
rails g channel <your-model-name>

Now Actioncable can pickup websockets that are coming into /cable and your rails backend will have a new file app/channels/<your-model>_channel.rb

Open that file up.

class <your-model>Channel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    stream_from '<your-model>'
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def receive(data)
    <your-model> = <Your-Model>.find(data["id"])
    <your-model>.update!(attr: data["attr"])
    ActionCable.server.broadcast('<your-model>', data)
  end
end

Here, we've added stream_from to the subscribed method and then told rails what to do with received data in the receive method. Our backend is now setup for streaming!

Now, lets setup our frontend to subscribe and talk to our backend. We will need to do a few things in order to accomplish this. First, connect to /cable that we setup in our backend. Second, subscribe to the our model channel. And last, send any data by the user on the front side.

To accomplish these 3 things we must first import actioncable by putting import ActionCable from 'actioncable' at the top of your app.js and creating a consumer inside of your componentDidMount method. We must next setup our subscription and set a callback for when we receive data. The final file might look something like:

import React, { Component } from 'react'
import './App.css'
import ActionCable from 'actioncable'

class App extends Component {
  state = { <your-state>: undefined }

  componentDidMount() {
    window.fetch('http://localhost:3001/<your-model>/1').then(data => {
      data.json().then(res => {
        this.setState({ <your-state>: res.<model-attribute> })
      })
    })

    const cable = ActionCable.createConsumer('ws://localhost:3001/cable')
    this.sub = cable.subscriptions.create('NotesChannel', {
      received: this.handleReceiveNewText
    })
  }

  handleReceiveNewData = ({ <model-attribute> }) => {
    if (<model-attribute> !== this.state.<your-state>) {
      this.setState({ <model-attribute> })
    }
  }

  handleChange = e => {
    this.setState({ <your-state>: e.target.value })
    this.sub.send({ <your-state>: e.target.value, id: 1 })
  }

That pretty much the gist of setting up a websocket with rails and react. There is obviously some more things that need to be done like displaying/grabbing information on the screen (controlled inputs are best), data sanitization, authorization, and more. But, this is a super simple setup to get you started.

From Ruby to Rust

Joshua M Loran — Wed, 24 Apr 2019 17:21:33 +0000

I’m more than half through a software engineering bootcamp. I can’t believe how much we’ve learned over the last 2 and half months, and how much information I’ve been able to cram in this melon. But, if you’re like me, you’re passionate about software engineering and thinking about what your next step might be in the engineering world. After learning Ruby, Ruby on Rails, Javascript, HTML, and CSS, I’m learning some of the limitations of these languages as well as their strengths.

Ruby is an intuitive, easily readable, and easily setup language. With Ruby on Rails, typing in a generate scaffold command sets up the start of a backend server that might take a day more to type out from scratch, but does in it a few seconds. Ruby has syntactical sugar on top of syntactical sugar to make typing out code pleasurable. Like wait…I don’t need parenthesis here or typing there, but how does ruby know…magic. Ruby is full of magical behind the scenes workings that just make programming easier and more intuitive than most other languages. This magic is part of what made Slant.co rank ruby 5th for beginning developers. Why not first? Because the magic of Ruby comes with several drawbacks.

Developers that start with Ruby, and only know Ruby, may not understand things like pointers, typing, and/or data structures. Also, since Ruby almost strictly functions as an object oriented language, Ruby only developers may not learn or understand many of the other programming paradigms. Ruby also has limitations of scale and resource consumption making working with larger projects far less efficient, case in point Twitter switching languages. So...

All this brought me to a question. What would be a good language to learn that would help solidify deeper concepts and make me a more useful and productive developer? I want to write efficient code that uses minimum resources. I want to have the power of C++ without the years long learning curve or the complexity of syntax. And, I wanted the enjoyability and ease of coding I get with Ruby. I’d heard about Rust from a few more experienced developers that were kind of pointing me towards it after I told them what I was looking for.

Rust is closer to C than Ruby. However, It has better memory safety and management. For example, pointers are not allowed to point to other pointers. On compile, the intermediate pointers are removed from the equation. Types are only mutable or immutable if you explicitly them to be. There is also no automated garbage collector. Instead, it uses RAII (Resource Acquisition Is Initializtion) which provides deterministic management of resources and at compile, prevents things like dangling pointers and other forms of undefined behavior. Also, the syntax and code structure force developers to write optimal code.

Because of its memory safety and resource efficiency, slant.co has ranked Rust as the #1 language to learn for backend developers, the #2 language for concurrency and meta programming. Rust also earned #1 as the best all around compiled language, as well as 2017’ and 2018’s most loved programming language on Stack Overflow’s developer survey.

Getting started with Rust is fairly easy and straight forward. You can read “The Book” online. The book will walk you through all the basics from Hello World, to building a CLI, and even a server setup. Going from any language, even magical Ruby, to Rust isn’t too difficult since a lot of the concepts are the same. You just get to learn to how to have more control over how things work. In ruby, you might make an object that looks something like:

In Rust, the same thing might look something like:

Rust has a large community to learn from and is well documented. So, as you dive deeper into the language there is ever more information and people to learn from.

Is multi-threading in Ruby a thing?

Joshua M Loran — Wed, 03 Apr 2019 20:04:08 +0000

All programming languages have their advantages and disadvantages. Ruby’s ease of use and semantic language makes it a great introduction to the world of software engineering. A topic came up the other day in a discussion about the pluses and minus of Ruby vs some other languages. Ruby is kind of in this grey area of being neither, and both, a compiled language and an interpreted one. The code we right is compiled into a lower level language called byte code before that is then interpreted into machine code, and even lower level language native. Interpreted languages tend to be more portable to other environments while compiled languages give no guarantee they will work on a machine they were not compiled on. Compiled languages are generally faster and less resource intensive and can be tweaked for optimization down to the machine code level, while interpreted languages cannot.

I was told by a fellow colleague that Ruby was slow in comparison due to the fact that multi-threading is not possible with an interpreted language. In fact, ruby does have a few ways to utilize multiple threads. But, what does that even mean? When people talk about multi-threading, they are saying “a technique by which a single set of code can be used by several processors at different stages of execution.” To clarify, it is a way to run code in parallel with separate processors. If a program takes 4 minutes to compute, you may be able to break the work load into to 4 parts and run them in 4 threads for a total process time of 1 minute instead of 4.

We’ll get back to multi-threading in a moment. There are two things that often get confused, so let’s first talk about concurrency and parallelism. Parallelism is when two tasks run at the same time. While concurrency is when two tasks can start, run, and complete in overlapping time periods but that doesn’t mean that they are ever running at the same time.

As you can see from the image above, concurrency is cool, but what I really want is parallelism. In Ruby, it turns out there are a few ways to achieve parallelism. We can use multiple processes or multiple threads, and again, each way has it’s pluses and minuses. In Ruby, we can use the fork() method to create a “copy” of the process we are calling it on.

Using fork() is very memory intensive however. This is because resources are allocated for each fork. So, if you are running a process that takes 10mb to run but are running it 1000 times, it might get done in the timespan of running just a few processes, but but the memory required would now be 10gb. Also, if there are nested processes and the parent process dies before the child process, the child may turn into a zombie and you may end up with zombie processes running in the background just eating up resource with no purpose. Examples for using multiple processes include Unicorn, and Resque.

Here is an info graphic that explains some of the pluses and minuses to both multi-processing and multi-threading:

Looking at the table above, we can see that the advantages to multi-threading are more numerous than that of using multi-processing. However, the drawbacks of multi-threading can be more complex to deal with. With multi-threading, the resource usage is much less because memory allocation only occurs once per defined container/object. This is great!….But, this can lead to data corruption and unexpected value returns because multiple threads are accessing and/or writing a single memory address. Ruby has a handy “thread()” class to assign threads to processes, however controlling and debugging how memory is accessed by multiple accessors can be very complicated.

Something that safeguards against funky memory access is called the GIL (Global Interpreter Lock) and it is utilized by most Ruby engines. The definition of a GIL is as follows : A mechanism used in computer-language interpreters to synchronize the execution of threads so that only one native thread can execute at a time. An interpreter that uses GIL always allows exactly one thread to execute at a time, even if run on a multi-core processor. So basically, it won’t allow true multi-threading in order to safeguard against memory access/writing issues.

So are we just screwed in Ruby? The answer is kind of, but no. There are implementations of Ruby such as CRuby that have the GIL safe-guard built in. But, there are also implementations like JRuby and Rubinius that do not include the GIL safeguard. There are a few frameworks for working with server side multi-threading: Thin, Sidekiq, and Puma.

In conclusion, there are a few ways to handle running multiple processes simultaneously and ruby. Multi-processing and multi-threading are both possible. They each have different pros and cons and usage should be chosen depending on the application.

Bootstrap! A useful tool for beginners front end development

Joshua M Loran — Mon, 25 Mar 2019 17:28:36 +0000

So, I’m going to school to learn to be a full stack developer. So far we have learned many useful tools. We’ve learn various methods on how to manipulate datasets. We’ve learned object oriented programming with ruby and how to build relationships between the models. We’ve learned SQLite and active record database management. And, we’ve learned some simple ways users can interact with views (or webpages). Everything we’ve learned to this point enables us to build a a fairly complex backend for a website, but we have yet to learn about the user experience.

An aweful experience...

This is not what we as developers want for our users, and wouldn’t you know it, our next project is to build a fully functional website with a great frontend. Sure, no problem. But what about the user experience? I’ve never dabbled in html, css, or javascript and while I have full confidence developing the scaffold for a website, I’ve never built a good looking front end. I had a chance to meetup with some of the students in the cohort before mine and their projects look amazing. They include interactive sliders, buttons, great images and layouts that scale and adapt to to the users device and preferences. I want that same level of polish. I want the user and my site to be:

How could some of these students, that were at the same level as me build such wonderful things. The answer was, Bootstrap. I’d never heard of bootstrap and didn’t know what it was, so I’ve spent the last few days researching what it is and how to use it. I must say, it’s pretty cool stuff.

In a basic sense, bootstrap is a framework that can be accessed by front end developers for use in their designs. It is composed of CSS, JavaScript/jQuery, and glyphicons. At this point, those are magical things I don’t fully understand. But, the beauty of bootstrap is that I don’t need to have a robust knowledge of these things. It is a framework that lets me play with how a page looks and how a user interacts with it in such an easy way that I can accept it as a tool and move on to more important things.

The easiest way to get started is to head over to the getting started page. However, you don't necessarily need to download the files to use it. It can also be used by utilizing a CDN, Content Delivery Network. One advantage of using a CDN is that bootstrap is used by MANY sites and is often in the users cache, which means potential faster load times.

w3schools has a great resource for playing around with some of the features of bootstrap. There are interactive "try it yourself" sections that let you play with the code before you even use in your project. But, perhaps an even better resource, once your comfortable with how bootstrap works is the bootstrap cheatsheet which has a very robust set of bootstrap interactions to make the user experience more enjoyable.

Now that you've read over and played with bootstrap a little bit and have a long list of usability features, you want to make it look pretty too. Some background imaging and device scaling sure would give the look and feel an upgrade. One of the great things about bootstrap is that it has a large open source community. So, with sites like Start Bootstrap, Get Bootstrap(some cost money), and Wowslider, it is easy to find a theme that will work for you. And, you can always tweek a theme to suit your needs.

Good luck out there friends!

A Desk Light Project! First steps into Dev'dom

Joshua M Loran — Fri, 15 Mar 2019 04:31:38 +0000

Since this is my first blog post, like…anywhere, I think it’s appropriate to tell you fine people how I started my journey into the dev world. Micro-controllers! A while back I happened into an Arduino Uno starter box and quickly tore through all of the starter projects that were explained in the included book.

Micro controllers are great! Not only do they give us the ability to create something new, but also give us the ability to hack into almost any device that uses electricity as well has many that don’t.

A micro controller does exactly what the name implies, it controls things, more importantly it controls things in a manner that you decide. There are many controllers on the market these days with Raspberry Pi and Arduino being two of the most commonly known to hobbyists. A friend of mine had shown me his Raspberry Pi and it seemed like a bit of magic. I had no programming experience other than an intro to Java course I took one quarter in college. What made the Pi actually work completely escaped me, but I wanted to know how to MAKE the magic.

I asked my buddy to show me how the Pi knew to do things. He had no idea. He had put a Nintendo emulator a jillion games on there, fabricated a little box and connected it to his TV. COOL!! He knew how to load software on it and run a program, but had no idea how to write the games or make it turn on a light switch.

Arduino Uno...

I’m going to talk about and show you one of the first rewarding projects I did using controllers.

I put up some shelves up above my wife’s desk so she could have more storage, but in doing so made the desk a bit dimmer on the working area and putting a desk lamp to light it was a bit ridiculous.

I had an Arduino already so I knew I could probably something neat. I wanted to try to make some lights that one could control from their phone. So, i ordered a jy-mcu bluetooth chip so my arduino uno would be able to talk to another device through bluetooth. I also ordered 3 meters of neopixel WRGB LED strips for the lighting.

JY-MCU Bluetooth transmitter...

After reading the specs for all my components and doing a little online poking around, I wired them together accordingly. It is fairly straight forward wiring, and I learned quite a bit. The neopixel lighting uses only a single data line to control every light with each pixel talking to it's neighbor. I added a 1000uf capacitor to smooth out any energy spikes in the data line since a dirty power signal could cause dirty data. A 220ohm resistor was also necessary on the data line. It looked like this...

Inside the Box...

From the outside...

One of the main resources I used drive the lights was Adafruit.com, which is where I purchased the light strips. They have a neopixel library that always you to choose a pixel and feed it WRGB values. I asked my wife what kind of colors she wanted and went about finding the correlating wrgb values. Once I understand what was going on I wrote buttons to dim and brighten as well as seperate the 3 tiers so they could be selected individually or grouped. I then added some animations for Hannukah and Christmas. Adafruit also had a rainbow animation that I didn't fully understand, but still used!

The addition of the tier selection meant that you could have your desk lit by the color of choice, while the accent lighting of the shelves above could be a soft blue or violet, an in your face red or orange, or an cool animated rainbow. Here is a link to my github for closer look.