Austin Story

Ruby, Rails and Javascript Blog

Powered by Genesis

TypeScript Interfaces Basics

February 23, 2016 By Austin Story Leave a Comment

Interfaces describe the shapes of various javascript objects. It is a fancy way to say describe the composition of objects and also the outputs of functions.

[code]
function sayHello(personObj: {name: string}) {
alert("Hello " + personObj.name);
}
[/code]

This function will check that whatever we pass in AT LEAST has a property of name that is a string.

[code]
Minimum Working
var bob = {name: ‘Bob’};
sayHello(bob);

But extras are just ignored, so this will work too
var alice = {name: ‘Alice’, likes: ‘TypeScript, AngularJS, Ruby’, home: ‘Missouri’};
sayHello(alice);
[/code]

A more fancy way to write this would be with an interface declaration

[code]
interface hasName {
name: string;
}

function sayHello(personObj: hasName) {
alert("Hello " + personObj.name);
}
[/code]

You can also set variables as optional in interfaces by adding a ? at the end. This will help typescript catch typos and also explain the contract of what you can accept.

[code]
interface hasPersonality {
interests?: string;
}
[/code]

Filed Under: Javascript, TypeScript Tagged With: interfaces, Javascript, typescript

Using Splice to copy objects in javascript.

December 24, 2015 By Austin Story Leave a Comment

Splice will copy an array from one point to another. It uses a shallow copy to replicate the array. That means it will copy literals exactly, but will copies objects by reference.

Examples of literals. Note that changing the original after the splice() does not change the copy

[code]
original = [1,2,3]
copy = original .splice()

original [0] = 5

original => [5,2,3]
copy => [1,2,3]
[/code]

But objects are by reference. Note that when we change the name of the object in the original, the copy is also changed.

[code]
person = {name: ‘Jimbo’}

original = [1,2,3, person]
copy = original.splice()

original[0].name = ‘Bill’

original[4].name => ‘Bill’
copy[4].name => ‘Bill’

[/code]

Filed Under: Javascript, Programming Tagged With: copy, Javascript, splice

Learning AngularJS as a Ruby on Rails programmer

April 12, 2015 By Austin Story Leave a Comment

A really awesome project i am working on has a Ruby on Rails backend and uses AngularJS on the frontend. I have been on it for around 1 month now and have spent a ton of my free time learning angular and wanted to document my journey.

My journey to angular through javascript frameworks have been a little rocky and I was bearish about them until this experience. I have tried several others including backbone and ember, which resulted in me dropping back down to just using javascript and jquery.

I am really liking it so far. My biggest positive is that it has a noticeably smoother frontend experience. Biggest downside, when you introduce angular into a project you dramatically increase the surface area of your project’s skillset needs. Not only will you need a backend programmer, designer and product manager, you will now need someone who knows angular, it’s testing frameworks and javascript compilation. You also have to deal with browser incompatibilities.

As far as learning goes, the biggest aha moment was similar to one i experienced a few years ago with rails when i realized it was just well thought out ruby code. So, AngularJS is just well thought out javascript. All it does it handles data, presenting it and updating it when it is changed. I am currently bullish about AngularJS and will update this from time to time with additional resources.

Resources.

First Step: Davetron5000’s Angular Rails Guide
Great book going over basics of how to setup angular with rails.

Second Step: Amazing Intro On Youtube
Watch this at 1.5 or 2x speed. It is phenomenal and was the best at ramping up on fundamentals.

Third Step: Code School
Watch the angular videos several times.

Forth Step (i am here 1 month in): Udemy Course
I am halfway through this and it is filling in the gaps.

Right now i’m capable of writing basic angular and reading intermediate angular. I’ll keep this posted as i advance and find more reasources.

Filed Under: AngularJS Tagged With: Angular, Angular with Rails, Angular-JS, AngularJS

  • « Previous Page
  • 1
  • 2
  • 3
  • 4
  • 5
  • Next Page »

Categories

  • AngularJS
  • Books
  • Devise
  • Elasticsearch
  • ES6
  • Information Security
  • Integrations
  • Javascript
  • Linux
  • Minitest
  • PhoneGap
  • Programming
  • React
  • Redux
  • Ruby
  • Ruby on Rails
  • Stripe
  • Testing
  • Theory
  • TypeScript
  • Uncategorized
  • Vue
  • Webpack