lalicode

The code of Lali

Blog — lalicode

AngularJS vs React

Nov. 21, 2017

I've been looking at what tech stack to use for a personal project called bloodhunt using Riot's League of Legends API.


I spent some time learning about Angular using AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I). To be clear, I have significantly more experience with React. Here are my thoughts of Angular vs React and my experience learning Angular.

Angular has a higher learning curve

Angular code is harder to read and learn. Angular focuses on the use of Directives, which extend on html markups. Look at the my-todo html tag below. 


<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="main">
      <my-todo list="todo" title="Angular To-do"></my-todo>
    </div>
  </body>
</html>

Directives have 3 attributes, restrict, templateUrl, and scope. Restrict can be set to a combination of 'E', 'A', 'C' or 'M'. In the example below, 'EA' means that the directive is used as a new HTML element and is going to take over any matching HTML element that has a matching attribute as the directive. For more details checkout Creating custom AngularJS directives for beginners.


app.directive('myTodo', function() {
  return {
    restrict: 'EA',
    templateUrl: 'todo.tpl.html',
    scope: {
      list: '=',
      title: '@'
    }
  };
})

templateUrl points to some html and Angular directives that can be reused with different values. Scope is what glues together Javascript with HTML. '=' binds the value of the expression and the literal value. '@' implies that the value of the attribute of the same name will be passed as a string.


In my opinion the use of random characters to denote something is ~hacky~. Code should be elegant and easy to read. Anyone learning or reading Angular code has to know what these character symbols mean (E, A, C, M, = , @) and where they can be used.


React on the other hand doesn't use such cryptic symbols. However, a newbie may be confused by functions such as setState() and componentWillReceiveProps(). Would you rather deal with googling unknown symbols or unknown functions?

Angular has two-way binding whereas React has one-way

Enough trash talking Angular's learning curve. Angular is very powerful once you get to know it. It's supports two-way binding, which means that the model and view automatically update one another. The goal is to have the Model be the single source of truth. Because of two-way binding, less code is needed.


React has one-way binding so more code is needed. In React, changes are handled using events and handler functions. It uses the concept of state to maintain values and props to configure a child components values. When a child component's values gets updated and is needed in a parent component, more code is needed because React doesn't automatically update the state of the parent component. A handler function is used to update the parent's state with the new value. The goal is to have state be the single source of truth.

Summary

Angular takes longer to learn than React but supports two-way binding. There's plenty of factors that go into which framework you want to choose such as performance and popularity but I value readability and ease of use. I don't like Angular's approach of using character symbols to represent various concepts but I do like how it takes care of synchronizing the model and view. React requires more code because of one-way binding but it is easy to learn and easy to read. Both are very powerful frameworks and are strongly influencing how front-end development will look like in the future.

Thoughts on Express.js and Heroku

Nov. 13, 2016

I spent this weekend learning more about two very popular web development tools, Express and Heroku. The project I was working on was an image API using Express hosted on Heroku.


Source

Here are my thoughts.

Express.js

I used Express.js with socket.io before to create chat rooms for an android app. I was amazed at how the whole back end was written in about 20 lines of code. In this project wanted a super simple web framework for the API so I went for Node.

Pros:

  • Setting up the web server is super easy! You can get everything running in very few lines of code 
    
var express = require('express');
var app = express();

...

var server = app.listen(8080, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Listening at http://%s:%s", host, port)

})
  • Express.js has these things called middleware functions that can interact with requests, responses, and other middleware functions. The built in one for METHOD (GET, PUT, POST, DELETE) make writing REST APIs super easy.
  • It uses the Node.js Javascript environment, which is asynchronous. People love this because it can handle requests in parallel.
  • The simplicity allows writing small web applications a breeze.
  • It has a terrific package management system, npm.

Cons:

  • The Express generator is not newbie friendly. For those who do not know, the generator is used to create a skeleton for you application. It came with a HTML templating language called Jade (now Pub), which felt really unnecessary. I want to deploy a web application quickly not learn a new templating language!
  • It's not fully featured. You will need to use something like a MEAN stack, depending on your needs.
  • Node.js is not good for CPU intensive tasks

Heroku

I deployed my project on Heroku. The setup was okay, but could have been smoother. I forgot to provide a package.json file, which ended up causing deployment to not recognize the app as a Node.js. The bad thing is that Heroku did not tell me that and I had to look up the error on my own. They need more useful error messages.


Since my code was no longer in development, I had to change it to use Heroku's ports:


var server = app.listen(process.env.PORT, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Express server listening on port %d in %s mode", this.address().port, app.settings.env);

})

Everything went pretty well after those two changes. Heroku provides nice usage graphs. It was easy to pick up and I got to deploy my application really quickly without having to do any Linux level configurations. You can also set your code to deploy on new pushes which is convenient. What I'm surprised to see was that you can deploy code from Dropbox. Git > Dropbox.


What I really appreciate is the fact that I didn't have to pay anything or sign up with my billing info to get hands-on experience with this service. I'm looking at you AWS.


You can try out the API by visiting https://memedb.herokuapp.com/emotes/Kappa. You can try it out with Kappa and 4head!

lali's Survivor Rankings

Sept. 21, 2016


What is Survivor?

Survivor is an American game show where ~20 people are placed in a remote location with meager supplies and separated into several tribes. As the name of the show suggests, the players in the game have to survive for 39 days in brutal place we programmers call "outside." Every few days they participate in Immunity Challenges where the losing tribe has to go to Tribal Council to vote off one person on their tribe. They also participate in reward challenges, which give an advantage to a team in the form of utilities (e.g. fishing gear, tarp) and comfort (e.g. pillows, fruits). Outwit, outlast, and outplay are the pillars which determine who becomes the Sole Survivor and takes home the one million dollar prize.

Why I like Survivor

Connection with the real world

Whether it is getting a job, owning property, or finding a mate, we are all competing in a cooperative environment to get the things we want. Survivor is a social sandbox where our competitive drive for a similar psycho-biological reward is experimented on. You see how far people go to just to advance themselves and to put themselves in a position of power. Some competitors have sacrificed their own integrity to get further while others have found that their integrity cost them one million dollars. You also get to see some people do terrible (and absolutely incredible) acts towards one another, which really makes you reflect on what really makes us human.

Survivor is a social sandbox where our competitive drive for a similar psycho-biological reward is experimented on.

Complexity

Survivor requires you to think about the decisions the players have made and the decisions that they can make. Each decision always has its pros and cons and it's fun trying to figure out the best decision for the players you are rooting for!

Self-reflection

Watching the players reflect on their own lives back home makes me reflect on my own. This is especially true when when the contestants' family/friends visit them. That is my favorite part of a Survivor season because it really makes me appreciate family.

The characters are often very animated and memorable.

Good entertainment

The drama, humor, romance, and injuries that come with playing the game really makes Survivor a full-fledged television show. The format of the game forces drama to happen because everyone is scrambling to reduce their chances of getting voted out. However, there are times when a single tribe is dominating too much and the show just becomes really painful to watch. To fix this the producers shuffle the teams (that's when you know they screwed up!). One season even had three shuffles!


The characters are often very animated and memorable. My favorite is Coach, who calls himself "The Dragonslayer". That alone says a lot about him as a character.

The difficulty of the game

We often forget how hard the game is because only so much can be shown in a 40 min episode. The players undergo dehydration, malnourishment, sleeplessness, and have to withstand the wrath of mother nature. They not only have to worry about surviving, they also have to worry about winning challenges (which can be very physical) and playing the social game. The amount of physical and mental resilience the players have to stay in the game is pretty crazy.

Tips for those who want to watch Survivor

  • If you have never seen Survivor before you should start with Season 1. There's more to this game than I mentioned and experiencing those parts in the game for the first time was mind blowing.

  • Most of the seasons are available on Amazon Video.

  • Try to watch in order to avoid spoilers for previous seasons, particularly during the reunion show.

Without further ado, here is my ranking of the Survivor Seasons. Thanks to Steven Aoki for his rankings for which I have based my viewing order of Survivor on. You can see his here.

lali's Survivor Season Rankings

I favor seasons with interesting contestants (the weirder the better!). I also like seasons with a decent amount of strategical and outlandish moves. I will be updating this page as I watch more seasons.


Currently watching:

None at the moment.


  1. Survivor: Heroes vs. Villians (Season 20)

    Ten of the greatest heroes and ten of the greatest villains. I think I would have appreciated this season better if I watched the seasons all the players were in. Crazy, never before seen strategical moves. All the players were playing their game 100%. Players got super physical, resulting in multiple injuries. Ending really makes you appreciate the purpose of the jury. It helps keeps the players from emotionally slaughtering each other.

  2. Survivor: Cook Islands (Season 13)

    Yul and Ozzy are some of the best players in Survivor history. Ozzy is physically gifted and Yul played the social game systematically and cleanly. Jonathan Penner switching sides was massive. Cao Boi was hilarious!

  3. Survivor: Gabon (Season 17)

    Was a mess at first with all the team shuffling. Fake idol was hilarious. Lots of feels when family visited and Matty Proposed. A very deserving winner. Great characters like Crystal and Ken the pro-gamer.

  4. Survivor: Millennials vs Gen X (Season 33)

    Felt like it was scripted, but it wasn't! Jay is super chill and he relationship with Adam was a love-hate understanding of each other. Dave is one funny dude. The rock draw was crazy!

  5. Survivor: Fiji (Season 14)

    Dreamz and Yau Man's deal. The bullying between Anthony and the big guys. This one was a doozy.

  6. Survivor: Tocantins (Season 18)

    Great characters such as JT, Tyson, Taj, and of course, Coach. I love Coach and his warrior mentality.

  7. Survivor: Samoa (Season 19)

    Russell played the living hell out of the game by finding all those immunity idols by himself. His confidence in himself is astounding. The other Russell played his heart out and it was a shame that he had to leave. Shambo was really interesting as well.

  8. Survivor: Borneo (Season 1)

    The one that started it all. Greg and Colleen's relationship was pretty cute. There really was an air of amazement watching season 1 as my first season. I never knew that the tribes would merge as one and neither did the players. The game completely changed because of that aspect. Gervase and Rudy are memorable as well. I can't believe the winner won because he guessed a juror's number correctly.

  9. Survivor: Philippines (Season 25)

    The emotional struggles that Lisa went through concerning her stardom had a lot of feels. Malcolm is cool dude and really reminded me of Ozzy. The sex therapist played the game very interestingly and managed to make it work. Jonathan Penner, Russell, and Scupin came back this season. Sucks that Russell had such a bad tribe this time.

  10. Survivor: China (Season 15)

    James is a lovable character. Got really pissed when Denise didn't bring Peih-Gee along for rewards. Not a lot of strategy this season. Chicken was one of the most frustrating players since he just stood around and didn't contribute to any discussions. Hilarious reunion show and a deserving winner.

  11. Survivor: Cagayan - Brawn vs. Brains vs. Beauty (Season 28)

    The Brains tribe sucked so badly its ridiculous. I don't recall there being a Rite of Passage for this season which sucks. Highly strategical game with less animated characters. Winner was thinking about the game nonstop, super dedicated to winning the game.

Additional Resources

Lawrence is a Computer Science graduate from UC Davis with a passion for technology and cats.