Month: July 2017

Quick Comparison of AngularJS, Backbone, and React

Quick Comparison of AngularJS, Backbone, and React

This past week, my bootcamp dived into  MVC and the AngularJS, Backbone, and React frameworks.

Since this went all very fast, I would like to do a quick comparison of those 3 framework’s similarities and differences. This would give me insight on what to look for when I use other frameworks

Or if you are familiar with one of these frameworks, and you wanted to dive into another, this could help you relate the two.

To note, for our use of AngularJS, we focused on using components over directives

Quick Comparison of AngularJS, Backbone, and React
Topic AngularJS Backbone React
Documentation AngularJS Backbone React
Templating {{ }} <%= %> {} to escape JSX, “, ${}
Libraries or Dependencies jQuery, Underscore ES6, Babel
Relation to MVC Module, View, Controller/Whatever Model, View, Collection View (Component)
AJAX Calls $http.get() .fetch() $.get()
Designing the Front-End Use HTML templates and/or edit HTML files Use HTML templates and/or in JS files append HTML elements to DOM Edit JSX files using React Code or JSX which acts like HTML
How to Pass Data We used AngularJS similar to React passing down data from parent to children. To receive data,  HTML should pass down the info from the parent. Then ensure  component in JS file has specified bindings. The Model is an instance. Models are passed to a Collection. Collection of Models is passed into View by creating instances of View. Views have initialize and render functions. Models, Collections, and Views all extend respective Backbone classes. (Ie. var MyView = Backbone.View.extend({})) Pass down data through Views or Components. All Views are instances of React.Component Ie. class MyView extends React.Component{}. In addition to constructor methods, they have render methods. Children cannot interact with each other; only parent can communicate to children and pass props down through JSX.
Things to Look Out for camelCase in JS. kebab-case in HTML. Ie. When passing down a function with name onClick, use on-click in HTML Determine if writing React Code or JSX and ES6 or ES5

What are some things you look out for when learning new frameworks?

 

Image Credits:
By AngularJS – https://github.com/angular/angular.js/tree/master/images/logo, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=31016280
By Unknown –
https://upload.wikimedia.org/wikipedia/commons/2/20/Backbone.js_logo.svg
By Facebook – https://github.com/facebook/react/blob/master/LICENSE-docs, https://en.wikipedia.org/wiki/File:React-icon.svg#file
Sublime 3 JavaScript Console (in Windows)

Sublime 3 JavaScript Console (in Windows)

ARE YOU INTERESTED IN USING A CONSOLE INSIDE SUBLIME 3?

Do so, by checking out this link: JavaScript console in Sublime Text  by Pawel Grzybek!

For the past 3 weeks, I have been using Sublime 3 as my text editor. When I went to use Console, I was getting the error in the screenshot above saying [WinError 2] The system cannot find the file specified ….

If you are using Windows, and you are getting the same error I did, please reference that link. It takes 30 seconds, and your Console will work.

One of the reasons I am posting this is to give that blog post more backlinks/higher SEO because it was so helpful for me. (And if I can’t find it in my bookmarks and I have gotten new hardware or reformatted).

Windows Sublime 3 with Console [fixed]
My Sublime 3 Console works!

Tips on Writing Recursive Functions

Currently I am a newcomer to recursive functions.  When I started receiving prompts to write code that used recursion, my code didn’t work the way I wanted it to.

After practice, I have learned from my mistakes. I have still a ways to go, but I wanted to share the mistakes I was making and how to avoid them. Because if I made these mistakes, someone else might be making them too!

My Experience

First I’ll talk about my experience. Feel free to skip down to more general tips.

The first half of my problem was to pinpoint the concept I did not understand! After practice and office hours, I figured out that my lack of understanding was that I was not bringing up the value returned from the recursive call through the call stack.

Frantically trying to make my code work, I would throw in return statements in experimental places hoping to see a pattern. You can probably guess that didn’t work out.

I had a fuzzy understanding of what my code was doing. I didn’t fully understand everything in recursion, and since I didn’t, recursion was kind of like magic.

My course’s tech mentor recommend that I watch the call stacks in Chrome DevTools and/or draw the execution contexts out. I did both. I was not returning the right thing (if anything)!

By watching the call stacks in Chrome DevTools and drawing the execution contexts out, I saw my misunderstandings, and I concretely learned:

  1. Every time you recurse, you create a new execution context. If you start with a variable called counter equal to 0 in your recursive function, every time you recurse, the new execution context’s variable counter will be 0.
  2. Every time you recurse, if you have a return statement, your return statement will return something to the execution context above it.
  3. If you need something returned from the recursive function, when you call the recursive function, don’t just call it. Do something with what it returns. Do you need to save it to a variable? Do you need to add it to something? Push it to an array? Must it evaluate to true to do something else?

Just knowing that has clarified so many things!

Tips

Here are some other things to keep in mind. Some things you may know like the back of your hand, and others you may be great reminders.

Other Tips on Writing

  • Understand what your function needs to do
  • Make sample input
  • Make sample output for it (Is it an array, Boolean, object, etc.)
  • Looking at your sample output, find the common pattern. What are you getting? What changes between each input and output?
  • Figure out what the smallest or most basic output should be.
  • Write code that will get you this base case
    • (Note: There may be more than 1 base case)
  • Think of how you would get the other output (not the base case). This is probably where the recursive call comes in.
  • In your recursive call, pass in the correct amount of arguments
  • If you are returning something from your recursive call, make sure to save it a variable, so that it can be returned up through the call stacks

Tips on Debugging/Understanding Your Recursive Function

  • If you have a for loop, follow your code and write the output of what your recursive loop should be
    • Write the output of what your 1st recursive loop should be
    • Write the output of what your 2nd recursive loop should be
    • Write the output of what your 3rd recursive loop should be
    • … And so on
  • Draw out the execution context
  • Console.log is your friend
  • Use Chrome DevTools and watch the call stack
    • You can compare it to what you wrote your expected output to be

For other newcomers like me, do you have any questions on writing recursive functions? For experienced programmers, what tips would you share from when you learned recursion?

(This post may be edited over time)

Simple Comparison of Class Instantiation Styles in JavaScript

Simple Comparison of Class Instantiation Styles in JavaScript

This post focuses on the differences between the class instantiation styles in JavaScript. Here we’ll see how each description contrasts from the one above.

We’ll look at the 4 instantiation styles: functional, functional shared, prototypal, and pseudoclassical.

1.  Functional

In the functional instantiation style, we create a constructor function with one object inside and assign properties and methods to it. The constructor function returns the object. Everything is inside the constructor function.

Each time we create a new instance in functional style, we are creating a new object with all the properties and methods. If there is a lot of data or code in the properties and methods, each instance has the potential to take up a lot of memory.

The advantage to functional is that it is easy to read and understand quickly.

Example of Functional Instantiation
This is an example of functional instantiation. Tea is our constructor function, and myTea is an instance of Tea.

2. Functional Shared

In the functional shared instantiation style, we create a constructor function with one object inside and assign properties to it. The constructor function returns the object.

What about methods? We create a separate object outside the function and assign properties to it that are methods.

In order for instances (or the objects we create via the constructor function) to have access to those methods, we use an extend function. The extend function copies properties from one object to another. (Remember that if the properties are complex types such as functions, the property does not make a new copy in memory, but it references the original). We can either write our own extend function or use a library’s such as Underscore.

Functional shared takes less memory than plain functional instantiation.  With extend in functional shared instantiation, the instance copies properties but only references the methods (each instance does not have all the code of the methods).

Example of Functional Shared Instantiation
This is an example of functional shared instantiation. Tea is our constructor function, and myTea is an instance of Tea. We reference methods from teaMethods.

 

3. Prototypal

In prototypal instantiation style, we create a constructor function with one object inside and assign properties to it. The constructor function returns the object.

What about methods? We can even use the function’s built-in prototype property and simply assign properties to it that are methods.

In order for the object to have access to those functions, we use Object.create(). To use Object.create(), we pass in the object we want failed look ups to go to. This creates a prototype chain. This way if our instance does not have the method, the interpreter would look follow the prototype chain and fall back on the separate object (or prototype)’s methods.

Prototypal style saves more memory than functional shared because each instance does not copy all of the prototype’s properties nor reference the prototype’s methods. Instead when the interpreter runs into a failed look up, it will go up the prototype chain. It will look at the prototype’s methods. There is no copying with prototype chains.

Example of Prototypal Instantiation
This is an example of prototypal instantiation. Tea is our constructor function, and myTea is an instance of Tea. Any failed look ups on myTea will go up the prototype chain and use the Tea.prototype methods.

4. Pseudoclassical

In pseudoclassical style, we create a constructor function.

In this function, there are some behind the scenes lines of code that the interpreter runs that we do not have to explicitly write.  At the very beginning of the class constructor function,  it runs something like this = Object.create(ClassNameHere.prototype). The interpreter creates an object and passes in the respective prototype property.

Inside the function, we assign properties. At the very end of the constructor function, we do not need to write a return statement because the interpreter runs another behind the scenes line of code that returns the object for us.

Outside of the function, we can assign the class’ prototype methods.

This is all possible when we instantiate with the keyword ‘new.’  It is the ‘new’ keyword that has the interpreter run the behind the scenes lines of code. If we instantiate without the keyword ‘new’ and wrote our constructor in pseudoclassical style, we are going to get bugs.

Example of Pseudoclassical Instantiation
This is an example of pseudoclassical instantiation. Tea is our constructor function, and myTea is an instance of Tea. Any failed look ups on myTea will go up the prototype chain and use the Tea.prototype methods just like prototypal style.

 

So we’ve taken a look at functional, functional shared, prototypal and pseudoclassical instantiation styles in JavaScript. When creating classes, we have to keep in mind the benefits and disadvantages of each instantiation style.