Recursion – It’s Not a Hallucination

Does recursion scare the crap out you? Well, it should! You should stop reading this now, draw the blinds, get in bed and pull the covers over your head. Just kidding! Recursion is pretty cool once you get the hang of it. I’m going to try to break it down for you so you won’t have to run and hide every time it’s mentioned.

From Wikipedia:

Recursion in computer science is a method where the solution to a problem depends on solutions to smaller instances of the same problem (as opposed to iteration). The approach can be applied to many types of problems, and recursion is one of the central ideas of computer science.

Okay, so basically it is a problem that can be broken down into smaller versions of itself. This happens when a function gets called repeatedly by itself until it reaches the stopping point, which is called the base case. So a recursive function is a function that calls itself. Every time the function calls itself, it is looking for the base case. If the base case is not found, the function calls itself again. If you think about it too long, it might make you feel like you’re hallucinating. And down the rabbit hole we go…

Think of it like a for loop, except that the function is sort of flying blind until it reaches the base case.

Enough talk, let’s see an example.

function multiplyUpToFive() {
  // (1 * 2 * 3 * 4) * 5 or
  return multiplyUpToFour() * 5;
}

function multiplyUpToFour() {
  // (1 * 2 * 3) * 4 or
  return multiplyUpToThree() * 4;
}
// and down to multiplyUpToOne()

What we’re doing here is breaking down the problem into smaller problems. That wasn’t a recursive function, but it acts the same way a recursive function does. I’ll rectify this further on. Now for our recursive function, by taking function called multiplyUpTo(n), you can say that the definition of the function is equal to taking the product of

  • the products up to n – 1
  • times n
  • Let’s see…

    function multiplyUpTo(n) {
      return multiplyUpTo(n - 1) * n;
    }
    
    // let's call this with an argument of 4 and see what happens
    
    multiplyUpTo(4)
    multiplyUpTo(3)  // gets called
    multiplyUpTo(2)  // gets called
    multiplyUpTo(1)  // gets called
    multiplyUpTo(0)  // gets called
    multiplyUpTo(-1) // gets called
    // shiiiiiit. Looks like we might be stuck in a recursive loop forever!!!
    

    That function would have ran infinitely because we didn’t add a base case. Think of the base case as the roof of the function. Without it the function will keep going out into space – to infinity and beyond! There’s literally nothing to stop it. Okay, enough analogies. Let’s fix our multiplier function.

    function multiplyUpTo(n) {
      // Our base case is 1, so we'll check if n equals 1
      if (n == 1) {
        return 1;
      }
    
      return multiplyUpTo(n - 1) * n;
    }
    
    // Now if we call our function with 4 as the argument, this is what will happen
    
    multiplyUpTo(4)
    // n does not equal 1, so it's called again
    multiplyUpTo(3) * 4
    // Again n does not equal 1
    multiplyUpTo(2) * 3
    multiplyUpTo(1) * 2
    
    // We reached our base case which is 1 and our function will not repeat forever 

    Now our function knows where it is in the universe and has found its purpose in life.

    Okay, the function has purpose. Now what?

    // Once the function reaches the base case, it will now solve all of the
    // problems it left behind
    
    multiplyUpTo(1) * 2 // 1 * 2 = 2
    multiplyUpTo(2) * 3 // 2 * 3 = 6
    multiplyUpTo(3) * 4 // 6 * 4 = 24
    
    // Once the function has an answer to all of itselves (I think I made that up),
    // then it returns the product the original function call. Woah dude.
    

    If we’re feeling good about our JavaScript we can even use a ternary statement to really make our function compact.

    function multiplyUpTo(n) {
      return n == 1 ? 1 : multiplyUpTo(n - 1) * n;
    }
    

    I like it! Thinking recursively makes you think recursively makes you think recursively. See what I did there. Yeah, I’m a dork. Hopefully this helped you understand the world of recursion. It’s quite fun to write algorithms this way. Although it might be scary at first, don’t worry: The worst that can happen is you float away into the infinite:)

    Advertisements

    Rails, AngularJS (1.5.8), and Webpack — Part 4

    Okay. We left off last time actually seeing Angular working with webpack. Things were looking good – in a very basic “Hello World” kind of way. Today, we’re going to create a controller and a component to make an http request to hit up the backend for some data. First, let’s create some data.

    Seeding the Database

    Heading back to Rails land briefly to create some users and meals. In app/db/seeds.db let’s make a couple of arrays and then use a looping method to create our Users and Meals at the same time.

    # app/db/seeds.rb
    
    users = ["Luke", "Han", "Leia", "Obi", "Chewbacca", "C3P0"]
    # Our users array from a galaxy from far far away
    
    meals = ["Tattooine Tacos", "Chewie's Chowder", "Princess Pizza", "Darth's Death Stack", "Brain du Jar Jar", "R2's Nuts and Bolts"]
    # Our meals array with some interesting looking delicacies
    
    i = 0
    
    6.times do
      UserMeal.create(user_id: User.create(name: users[i]).id, meal_id: 
      Meal.create(title: meals[i]).id)
      i += 1
    end
    
    

    Here we are using our two arrays and a loop to create not only a new User and Meal each go round, but the association between each one too. Now we can run ‘rails db:seed’ in our terminal and our database should be seeded. If we go into our rails console (‘rails c’ in the terminal), and type ‘User.first.meals’, we should see something like this:

    => #<ActiveRecord::Associations::CollectionProxy [#]>

    Cool! Our seeding experiment worked and our associations seem to be solid. Let’s take it one step further and get the actual name of our first user’s meal – ‘User.first.meals.first.title’

    => “Tattooine Tacos”

    Sweet! We are finished with the backend for now. Let’s get this front end party going!

    Creating a Controller

    First we’ll create our controller and use Angular’s built in $http service to get data from the backend. We have to use ngInject to inject the $http service into the controller. Then we’ll use $onInit to set up the call to the api. In app/javascript/packs, we’ll create a new file called ‘home.controller.js’. Then we’ll add our controller and export it, so it can be imported wherever we want it.

    // app/javascript/packs/home.controller.js
    
    class HomeController {
      constructor($http) {
        'ngInject';
        this.$http = $http;
      }
    
      $onInit = () => {
        this.$http({
          method: 'GET',
          url: '/users.json'
        })
        .then(res => {
          console.log(res.data)
          this.users = res.data
        })
        .catch(err => {
          console.log(err)
        })
      }
    }
    
    export default HomeController;
    
    

    $onInit is a lifecycle hook that initializes on start up. So our $http call will happen when the HomeController is called upon. The $http call takes one argument, a configuration object consisting of a ‘GET’ method and a url, to make the HTTP request and returns a promise. For a successful promise, we use ‘then’. For an unsuccessful promise, we use ‘catch’. I believe the old standard was ‘success’ and ‘error’ to handle promises.

    Now we need to output be able to output our data into a template. Stand alone templates are not used with modules. Instead, we’ll use a simple component.

    Creating a Component

    Let’s create a new file called ‘home.component.js’ in the same folder as our other Angular files. Then we have to import the HomeController and create the component. Components are very simple, as we’ll see. They basically point to a variable, which we’ll then export. Our component will take three properties: controller, controllerAs, and template. Components could take more properties, but we won’t need anything more for our needs. Our users will be coming to us in an array, so we’ll have to loop over this array to get each user. Angular comes with a very handy ng-repeat, which can be inserted right into the html.

    // app/javascript/home.component.js
    
    import HomeController from './home.controller';
    
    const HomeComponent = {
      controller: HomeController,
      controllerAs: '$ctrl',
      template: `<div ng-repeat="user in $ctrl.users">
                  <h2>{{user}}</h2>
                </div>`
    }
    
    export default HomeComponent;
    
    

    This should give us what we need. Now we have to import our component to our main app module and we should see something in our browser.

    Importing Component into Main App Module

    Let’s head over to our meals module and see what we can do. In app/javascript/packs/application.js, we’ll import the home component under our angular and uirouter imports. Then we’ll add our component to the meals module so we can use it in the router.

    //app/javascript/application.js
    
    import angular from 'angular';
    import uirouter from 'angular-ui-router';
    import HomeComponent from './home.component';  // New
    
    
    const meals = angular.module('meals', [uirouter])
      .component('homeComponent', HomeComponent) // New
      .config(($stateProvider) => {
        $stateProvider
          .state('home', {
            url: '/',
            component: 'homeComponent' // New
    
          })
      });
    
    export default meals;
    
    

    I added a ‘New’ comment next to the lines that were added. Notice that we still had to add the component to the module. Then we used the stringified name and added it to our ‘home’ route as a component. Let’s run the servers and see if we have anything.

    Remember, we need to run two servers – one for the front end and one for the back. In one tab in your terminal run ‘./bin/webpack-dev-server’ and in another tab, run ‘rails s’. Refresh the browser, click home and….

    {"id":1,"name":"Luke","created_at":"2017-10-11T22:21:37.642Z","updated_at":"2017-10-11T22:21:37.642Z","url":"http://localhost:3000/users/1.json"}
    
    {"id":2,"name":"Han","created_at":"2017-10-11T22:21:37.679Z","updated_at":"2017-10-11T22:21:37.679Z","url":"http://localhost:3000/users/2.json"}
    
    {"id":3,"name":"Leia","created_at":"2017-10-11T22:21:37.685Z","updated_at":"2017-10-11T22:21:37.685Z","url":"http://localhost:3000/users/3.json"}
    
    {"id":4,"name":"Obi","created_at":"2017-10-11T22:21:37.692Z","updated_at":"2017-10-11T22:21:37.692Z","url":"http://localhost:3000/users/4.json"}
    
    {"id":5,"name":"Chewbacca","created_at":"2017-10-11T22:21:37.698Z","updated_at":"2017-10-11T22:21:37.698Z","url":"http://localhost:3000/users/5.json"}
    
    {"id":6,"name":"C3P0","created_at":"2017-10-11T22:21:37.705Z","updated_at":"2017-10-11T22:21:37.705Z","url":"http://localhost:3000/users/6.json"}
    

    Nice! We got some JSON! We’re on the right track. Now all we have to do is get the name out of each object. To do that, we’ll have to modify the template in our component ever so slightly.

    // app/javascript/home.component.js
    
    import HomeController from './home.controller';
    
    const HomeComponent = {
      controller: HomeController,
      controllerAs: '$ctrl',
      template: `<div ng-repeat="user in $ctrl.users">
                  <h2>{{user.name}}</h2>
                </div>`
    }
    
    export default HomeComponent;
    
    

    If you can’t see what was added, no worries. In the

    tag we were getting the whole user, which is why we got all that extra JSON. The only thing that was added was a name attribute to the user – {{user.name}}. These things update live, so if we look back to the browser, we should see our Star Wars heroes.

    An Aside

    This actually took me quite a while to get running. I’m learning as I go and had some trouble understanding how to use $http in the controller. Specifically, how to inject it. Everywhere I looked, people were saying the same thing: outside of the HomeController class, inject the $http service as such – HomeController.$inject = [“$http”];

    This did not work. I finally came across a someone’s code with ‘ngInject’ loaded in the constructor. I tried that, and everything worked!

    We’ve gone through a lot today and I’m going to leave off here. Next time we’ll separate the $http call into a service, as it should be and see our Chewbacca’s favorite meal. Until then…Cheers:)

    Bootstrap 4

    The continuation of the AngularJS, Rails, Webpack tutorial will be back next week. I have been working on a site this week and it was my first foray into Bootstrap 4. I didn’t know what I was getting into at first. I thought, like most updates, that the power of the framework just got stronger and things got easier. Little did I know that it was a complete rewrite!

    Flexbox

    The Bootstrap 4 rewrite takes advantage of the Flexbox model, something I haven’t delved into much so far. What does it mean for using our beloved containers, rows, and columns? Not much. Things might look different behind the scenes, but up front things mostly look the same. One major thing to think about when migrating a site or starting a new site with Bootstrap 4 is that it is not compatible with Internet Explorer versions 8 and 9. Personally, I wish IE would die a quick death.

    Cool Changes

    Much has been dropped from Bootstrap 4 as the web has moved on from certain things. To see a full list, check it out here. One thing I thought that was cool is the less bulky navbar. This is how we’re used to seeing the HTML for a navbar…

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
    

    It’s so bulky, right? Well check this out…

    
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">Features</a>
          <a class="nav-item nav-link" href="#">Pricing</a>
          <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
      </div>
    </nav>
    
    

    Notice anything missing? Well the top half is the same, but take a look at the links. No more ul’s and li’s. This is because they use classes for the navs now.

    You can also size very easily with inline attributes. 25%, 50%, 75% and 100% widths and heights can be achieved by using ‘w’ for the former and ‘h’ for the latter. Then just add a dash and the desired number, such as h-100. Here’s an example.

    <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
    <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
    <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
    <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
    

    Screen Shot 2017-10-06 at 3.41.21 PM

    And for heights…

    <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
      <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
      <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
      <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
      <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
    </div>
    

    Screen Shot 2017-10-06 at 3.41.43 PM

    I’ve been working a lot this week so I’m going to leave it off here. I’ll be back next week for the continuation of the tutorial. Peace!

    Rails, AngularJS (1.5.8), and Webpack — Part 3

    Alrighty then. Where were we? I believe we left off in a good place. We installed the webpacker gem, and seemed to have communication between our newly created JS file and our app. Now for the hard part. I’m still learning this stuff myself, so bear with me. We’re going to attempt to use ES6 modules instead of the old way of declaring AngularJS components and such. This style guide is a good starting point to get to know what your components will look like and how they’ll interact with each other.

    Setting up the Main Module

    The first thing we’ll want to do is setup up our main Angular module in app/javascript/packs/application.js. First we have to import angular into the file so our module knows what it’s attaching itself to. We are also going to export the module, which will allow our webpack to compile it when we run app in the terminal.

    // app/javascript/packs/application.js
    
    import angular from 'angular';
    
    const meals = angular.module('meals', [])
    
    export default meals;
    
    

    Now we have to declare our app in our main html file: app/views/layouts/application.html.erb. So in the body tag, add ng-app=”meals”.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Meals</title>
        <%= csrf_meta_tags %>
    
        <%= stylesheet_link_tag    'application', media: 'all' %>
        <%= javascript_include_tag 'application' %>
        <%= javascript_pack_tag 'application' %>
      </head>
    
      <body ng-app="meals">
        <%= yield %>
      </body>
    </html>
    

    Now our app knows that it’s an Angular app and it’s looking for a module called ‘meals’. Let’s add a route with a component so we can actually see something working on the Angular side of the world.

    Routing With angular-ui-router

    If you’ve built anything with Angular in the past, you’ve most definitely used angular-ui-router. We’re going to install it with yarn. If you don’t have yarn installed, check out the installation instructions here. To install, or ‘add’ as it’s called in yarnish, head over to your terminal and type: ‘yarn add angular-ui-router’. If you check your dependencies in your package.json file, you should see ‘angular-ui-router’ listed.

    So let’s see if we can get a route working. In our angular_home.html file, let’s add a ui-view directive.

    <-- app/views/application/angular_home.html -->
    
    <ui-view></ui-view>
    
    

    This will give us an entry point into AngularLand and let us declare routes with $stateProvider in a config function. Back in our application.js file, let’s add a config function and a route. First we’ll have to import the ui-router so we can use all of its goodness. Check it…

    // app/javascript/packs/application.js
    
    import angular from 'angular';
    import uirouter from 'angular-ui-router';
    
    const meals = angular.module('meals', [uirouter])
      .config(($stateProvider) => {
        $stateProvider
          .state('home', {
            url: '/',
            template: `<h1>Hola Mundo!</h1>`
          })
      })
    
    export default meals;
    
    

    Ok so here we’re importing the angular-ui-router and chaining a config function onto our module. Angular-ui-router gives us access to $stateProvider, $urlRouterProvider, $state, and $stateParams. In the config function above, we’re using the Arrow function syntax now available in ES6, and setting the state. With a url and a simple template, we should be getting somewhere. Let’s quickly make a link back in angular_home.html so we can see our route is working.

    <-- app/views/application/angular_home.html -->
    
    <a ui-sref="home">Home</a>
    <ui-view></ui-view>
    
    

    Run the Webpack and Rails Server Simultaneously?

    Now to run webpack, we can’t just run the rails server. We actually have to run the rails and the webpack servers. Back in the terminal, create a new tab in the same directory, then run ‘./bin/webpack-dev-server’. This will compile your included javascript files through webpack. If you’re like me, then you probably got a lot of red errors followed by this line: webpack: Failed to compile.

    So something is not letting us load our module. If we scroll up in the terminal, we’ll see that most of the errors say that angular doesn’t exist. But I thought we installed Angular already!! Well, I’m pretty sure that when we installed it with the webpacker command, it installed Angular 4. We need version 1.5.8, which we can easily install add with yarn. Exit out of the webpack server in your terminal. Then type ‘yarn add angular@1.5.8’.

    Check out your package.json file and you should see angular with the correct version listed under the dependencies. Now if we try to run the server again – ‘./bin/webpack-dev-server’ – everything should compile (there might be a few warnings, but let’s not worry about those). In your other tab run the rails server command and in your browser go to ‘localhost:3000’. You should see a link that says ‘Home’. Click it, and you should be routed to the home route that we set up earlier. If you followed along, you should see ‘Hola Mundo!’ on the webpage!

    To Sum it Up

    We are in the Angular business now! In this episode, we’ve connected the front end to our meals app with webpack, added angular-ui-router and AngularJS, created our main module with a route and template, learned how to run the webpack server, and saw our template working in the browser. Next time, we’ll get some functionality going with some http requests to the backend and do something a little more exciting than Hello World Hola Mundo. As always, thanks for reading. I hope this helps someone out there! Until next time…CHEERS:)

    Rails, AngularJS (1.5.8), and Webpack — Part 2

    Welcome back! We left off last time in a good place. We set up the back end by generating three models – User, Meal, and UserMeal (our joins table) – with associations. We used scaffolding to generate our models. In most cases, we would normally not generate models using scaffolding, because it creates a lot of things we won’t need. This causes bloat in our app, and if we want our app to scale nicely and be fast, this will be a problem. For our case (and our little app), it’s nice and easy to use scaffolding – so we did. Then we installed a great gem called Active Model Serializer, which formats our model data into reusable JSON, which our front end will consume. In this edition we’ll be installing AngularJS and Webpack. Let’s dive in.

    Webpacker

    A few blog posts ago, I wrote about Rails and the Webpacker gem. The team at Rails is definitely catching on to the current and future trends of the web – front end frameworks using JavaScript. The Webpacker gem makes it easier to use these frameworks with Rails. Enough talk though – let’s install it! Note – if you’re using Rails 5.1, you can run ‘rails new myapp –webpack=angular’ when initiating your app. Otherwise…

    # In your gemfile.rb file, add 
    
    gem 'webpacker'
    
    # Back in your terminal
    
    bundle 
    bundle exec rails webpacker:install
    
    # if you get an error that looks like this: 'Webpacker requires Yarn >= 0.25.2 
    # and you are using 0.24.6
    # Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/'
    # do this:
    
    npm install -g yarn
    
    # if everything is honky dory
    
    bundle exec rails webpacker:install:angular
    
    

    Now we’re in the webpack business. Using webpack basically creates another asset pipeline for our JavaScript assets. Instead of putting all of our JavaScript files in /app/assets, we’ll put them in app/javascript/packs. To include this folder, all we have to do is include them in our main html files ‘head’ section.

    # app/views/layouts/application.html.erb
    
    <%= javascript_pack_tag 'application' %>
    
    

    Now our files will be included and we can get coding. Let’s create the entry point to the angular app. Create a new folder and file in our views folder:
    app/views/application/angular_home.html. Now we need a route. Let’s add it to our routes.rb file.

    
    root to: 'application#angular_home'
    
    

    Let’s add something to our angular_home file.

    # app/views/application/angular_home.html
    
    Goodbye World
    
    # LOL?
    

    Now run ‘rails s’ in your terminal and head on over to ‘locahost:3000’ in your browser. We should see ‘Goodbye World’ on the webpage. Now look in the console (Apple Control ‘J’) and you should see ‘Hello World from Webpacker’. We’re in business.

    I think this is a good place to leave off. Our backend is set up. Webpack is setup. We have an entry point to Angular. Things are looking good. Next week we’ll dive head first into Angular. Working with modules and all the goodness that comes with ES6! Until then…cheeeeeers:)

    Rails, AngularJS (1.5.8), and Webpack — Part 1

    In my last post, I wrote about using Webpack with Rails and AngularJS, and how it differed from using Bower. There is definitely a bigger learning curve using Webpack, but I believe it will all be worth it when the dust settles. Besides, it seems that Bower has been deprecated. I’m going to try my hand at a tutorial using these three technologies and share my confusion as we go. ES6 syntax will be used in Angular also, which changes how we write our components. Let’s dig in.

    The Setup

    I’ll assume that you have Rails installed already. We’re going to build a simple CRUD app using Rails as an API on the back end, and AngularJS on the front end and Webpack to bridge the two. We’re going to build a Meals app, with a users table and a meals table. It’s simple but what we want out of this is to be able to use these technologies together – then we can start adding complexities.

    ‘cd’ into you directory of choice and start a new rails app:

    rails new meals --skip-turbolinks
    

    We’re skipping turbolinks because it can cause trouble with Angular. Now that the basic Rails skeleton is created, ‘cd’ into ‘meals’ and open Atom (or your text editor of choice). The version of Rails I’m using is 5.0.6. I’m using the built-in database – sqlite3 – because using Postgres would be adding another complexity to this that we don’t need. Let’s make our first commit to github. I’ll assume you know how to start a repo.

    git add .
    git ci -m 'initial commit'
    git remote add origin https://github.com/SiamKing/meals.git
    git push -u origin master
    

    Now let’s create our models. I usually don’t use ‘scaffold’ to generate my models because it adds so much bloat to Rails, but I’m going to use it because it’s so easy – that’s what we’re going for.

    rails g scaffold user name:string
    rails g scaffold meal title:string
    rails g model user_meal user_id:integer meal_id:integer
    rails db:migrate
    

    Like I said – super basic. Now that the databases are created, let’s enter the rails console in the terminal and create our first user and meal.

    rails c
    
    User.create(name: 'Allison')
    Meal.create(title: 'Pizza')
    

    As long as we migrated our database, these commands should work, which means we’ll have our first user and meal. Now we have to think about the association between these two tables. Well, users have many meals and meals have many users. So, it’s a has many to has many relationship. Let’s go into our models and add the associations.

    class User < ApplicationRecord
      has_many :user_meals
      has_many :meals, through: :user_meals
    end
    
    class Meal < ApplicationRecord
      has_many :user_meals
      has_many :users, through: :user_meals
    end
    
    class UserMeal < ApplicationRecord
      belongs_to :user
      belongs_to :meal
    end
    

    Let’s try to add a meal to our first user…

    rails c
    
    UserMeal.create(user_id: 1, meal_id: 1)
    # created an association in our joins table for the first user and first meal
    
    User.first.meals
    # Now we can see the first users meals
    => #<ActiveRecord::Associations::CollectionProxy [#<Meal id: 1, title: "Pizza", created_at: "2017-09-17 22:51:13", updated_at: "2017-09-17 22:51:13">]>
    

    Alright! Our models are working as they should, so the next step is to serialize our models into an API so they can be consumed by our front end. We’ll use the wonderful Active Model Serializers for this. Of course there’s a gem! Add this line to your gem file:

    gem 'active_model_serializers', '~> 0.10.0'
    bundle install
    

    Now let’s create our serializers.

    rails g serializer user
    rails g serializer meal
    rails g serializer user_meal
    

    This generated serializers for our three models. Let’s add our associations.

    class UserSerializer < ActiveModel::Serializer
      attributes :id, :name
      has_many :user_meals
      has_many :meals, through: :user_meals
    end
    
    class MealSerializer < ActiveModel::Serializer
      attributes :id, :title
      has_many :user_meals
      has_many :users, through: :user_meals
    end
    
    class UserMealSerializer < ActiveModel::Serializer
      attributes :id
      belongs_to :user
      belongs_to :meal
    end
    

    Now we have our associations set up. Let’s run our local server and see what we have. Run ‘rails s’ in your terminal and go to ‘http://localhost:3000/users/1.json&#8217; in your browser. This should give us our first users information in JSON format. It should look something like this:

    {
    id: 1,
    name: "Allison",
    created_at: "2017-09-17T22:50:16.012Z",
    updated_at: "2017-09-17T22:50:16.012Z",
    url: "http://localhost:3000/users/1.json"
    }
    

    Ok that’s cool, we have some JSON! The only thing is we can’t see our user’s meals. Let’s fix that! Open up your users controller and add this to you show method:

    if @user
      render json: @user, include: { meals: [:title] }
    end
    

    Now refresh your browser and voila!

    {
      id: 1,
      name: "Allison",
      meals: [
     {
        id: 1,
        title: "Pizza"
      }
      ]
    }
    

    Sweet! We can see our associations! Our back end is fully functional and is set up as an API. This JSON formatted information can now be consumed by our front end. This concludes the first part of this series. I’ll be back next week for part 2. We’ll get our hands really dirty setting up Webpack and Angular. Until then…Cheers:)

    Rails, AngularJS and Webpack – First Impressions

    I recently started learning React because it seems like it’s the new ‘it’ technology in town. My previous front end framework knowledge was limited to AngularJS. It took me some time to like it, but eventually I did. I might have an interview soon and the technologies the company uses are mainly Rails and AngularJS(v1.5). This has made me go back to Angular and start building again. It’s amazing how fast information leaks out of ones head.

    The first thing I noticed when starting a project was that Bower has been deprecated. I knew that Bower was on its way out when I learned AngularJS, but that was only a few months ago. Things certainly change fast in the world of technology.

    Note to self: don’t get too comfortable with any technologies you use.

    So what to do? How should I handle my front end dependencies? There are many ways, some of which are already on the outs too – like Gulp. After doing some research it seems like the wave of now and the near future is Webpack. Even Rails is getting in on the action by including it with Rails 5.1. Rails is still in heavy use in the industry, however has seen some decline from the glory years. Most of the decline in usage has to do with all of the front end technologies that have sprouted up in the last five years. Rails was not keeping up with the trends and Rails’ dependency on the Asset Pipeline – once the best thing since sliced bread – was now hindering development.

    Well, guess what? The team behind Rails has finally caught on and the inclusion of the Webpacker gem is a huge step in the right direction. I could see a big boost in Rails usage as a result. That’s great and all, but what does Webpack actually do? From the Webpack github page:

    webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

    When using Rails, it basically creates another asset pipeline for JavaScript files. Whenever learning something new, there will be a learning curve and some frustration involved. In my case, using Rails 5.0.1 and AngularJS(1.5.8), there has definitely been a bit of both. Especially since there’s not much documentation or tutorials for the versions I’m using. I’m finally making some headway and actually have a basic app running in my browser. There’s much more importing of files and such going on, which I became familiar with through React. This week I’m going to become much more familiar with the inner workings.

    My next blog post will be a tutorial on getting Rails(5.0.1), AngularJS(1.5.8) and Webpack to all play nice together. Have you built anything with these technologies? Please comment below, I’d love to hear about it! Until next time…Cheers:)

    Using ES6 Syntax in React

    I don’t know about you, but I love the changes made in ES6. I’m currently learning React and ES6 definitely makes life much easier. I’ll talk specifically about Arrow Functions and why using them will help make you coding your components much more fun.

    The Olde Way

    Let’s take a look at a simple pre-ES6 component.

    import React from 'react';
    
    class WhatsUp extends React.Component {
      constructor() {
        super();
        
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick(event) {
        // 'this' is only reachable because of the binding in the constructor above
        // otherwise it would be scoped to handleClick's environment and the log 
        // would be undefined 
        console.log(this.props.message)
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>Click Me</button>
        )
      }
    }
    
    export default WhatsUp
    

    The main takeaway here is the binding of the ‘this’ keyword. Without the binding in the constructor, when we used ‘this’ inside of a function, it would be referring to the functions ‘this’ – not the class.

    How the Cool Kids Are Doing It

    The cool thing about Arrow Functions is that they don’t bind their own ‘this’. What do the Gods say?

    From our friends at Mozilla:

    An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target.

    Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an “object method”, etc.). This proved to be annoying with an object-oriented style of programming.

    That means we don’t have to worry about binding the function in the constructor. Take a looksie…

    import React from 'react';
    
    class WhatsUp extends React.Component {
    
      handleClick = (event) => {
        // 'this' is not bound to the handleClick function so we can use it freely
        console.log(this.props.message)
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>Click Me</button>
        )
      }
    }
    
    export default WhatsUp
    

    Look at that – we don’t have to use a constructor! Pretty cool. You might think, ‘Eh, no biggie’. But what if we had many more functions that we had to bind ‘this’ to? That’s much more code we have to write and makes our files more bloated. I know if we had to set an initial state, we’d still have to write a constructor. However, we wouldn’t have to bind so many functions.

    If you haven’t started using ES6, I strongly recommend it. It will save time and energy in the long run. The Spread Operator is probably what I use second most, after Arrow Functions. Try them out and be amazed! Until next time. Cheers:)