Coding Meow

We'll take a breather from your regularly scheduled ReactJS lesson to talk a bit about ScrollMagic and GSAP.

Recently, I was tasked to build an animated storyline for a student's Journey through Fullstack Academy (it is best viewed in Chrome on a Desktop). While I could have used animate and vanilla JQuery to build it, I am lazy, so I spent a good chunk of a week doing research into which technologies and libraries would make my life easier. After testing a bunch of different options, I stopped at ScrollMagic and GSAP. These two libraries are super timesavers!

ScrollMagic, according to its website, "is a scroll interaction library." It came after Superscrollorama and was completely rewritten. It allows you to easily handle how the page interacts with the user's scroll position. It saves you a ton of time and makes things such as parallax effects much easier to do than it would be in vanilla JQuery. The team at ScrollMagic recommends to handle animations with ScrollMagic, but you can do without a framework entirely as well by animating simply using CSS and class toggles.

In my case, I thought GSAP was extremely clear and easy to use, especially to tween and timeline animations, so I opted to go that way. GSAP is a bundle of tools for animating in JavaScript. The two that I used were TweenMax and TimelineMax. TweenMax handles the tweening of just about any property of any object. Tweening is the process of generating intermediate frames of between two stopping points of an object to show the smooth transition of the change. TimelineMax is a sequencing tool to precisely handle timing of the tweens in relation to one another.

Please take a look at the Journey through Fullstack Animation here and give the libraries a try.

Now that you have a general idea of what React is and how it works, let's see React in action. There are several tools that need to be introduced:

1- React Class - React works off of classes. You render HTML by creating a React class that describes what to render.

var HelloWorld = React.createClass({ render: function () { return <h1>Hello, World</h1>; } }); React.render(<HelloWorld />, document.body);

In the example above, what do you think would render? If you guessed an h1 heading of the text "Hello, World" inside the body, you would be correct.

2- Props allows users to pass data into a React view. Think of props as sort of an object from which you can store/retrieve values.

var HelloName = React.createClass({ render: function () { return <h1>Hello, {this.props.name}</h1>; } }); React.render(<HelloName name="Grumpy Cat" />, document.body);

3- State is similar to props in that it also passes data, but the difference is that state is usually reserved for interactivity.

var HelloGoodbye = React.createClass({ getInitialState: function () { return { text: "Hello, World" }; }, changeText: function () { this.setState({ text: "Goodbye, World" }); }, render: function () { return <h1 onclick="{this.changeText}">{this.state.text}</h1> } }); React.render(<HelloGoodbye />, document.body);

In this example, the view initially renders Hello, World, but when you click on those words, it changes to Goodbye, World.

This blog has been completely untouched since I started it at the beginning of Fullstack Academy (OOPS). Now that I have completed the curriculum and have since become a teaching fellow, I will re-commission this blog to try to document my further learning. :)

With all the craze surrounding React/Flux, I figured I should take it for a spin. Coming from an Angular background, React was definitely not as easy to pick up as I had hoped, especially because React prefers JSX syntax, but once I got the hang of it, the benefit of React shines through.

I've seen a lot of articles regarding React v. Angular, and I hate to break it to you, but comparing the two is illogical. Angular is a full-on FRAMEWORK which includes a view layer, while React is ONLY a view layer. Unlike Angular, React does not include AJAX capabilities, have a data layer, nor does it have any event systems. Repeat after me:

React is NOT a Framework

I mentioned up there that React uses JSX syntax. As developers, we have been conditioned to not throw JS directly into the HTML. So, JSX syntax may initially be cringe-inducing, but when JSX is used with React, it makes your code much more comprehensive. Essentially, JSX syntax ties HTML and JS together in a nice bundle known as a "component" and allows you to easily see how your code will render in one file. Neato!

To ride off the component train of thought, React allows you to break up more complicated problems into bite-sized pieces of components. Think of components as Lego building blocks, which you can use to build different combinations components to create your app. The components can be built on top of other components and be re-used for other purposes later as well.

Lastly, React also uses this thing called a virtual DOM that handles data changes reflected in the DOM more efficiently. What happens is that the DOM will re-render only when the data changes and it changes only what has changed, and reduces unnecessary re-rendering. React team member, Sebastian Markbage, gives a more in depth explanation here.

Or rather, what influenced and inspired me to learn how to code?

I always wanted to start my own company, but do not know in what field. Over the last several years, realized that I did not want to climb the corporate ladder. I was no longer passionate about my job and knew that it could not bring me to where I ultimately want to be. At the end of 2014, I left that job.

Growing up, I loved playing with puzzles. I would often find myself obsessing over solving the puzzles and would not stop thinking about it until I find the solution. Coding programs is like solving puzzles to me. We continue to gain new puzzle pieces in the form of knowledge and experience. Often, I would get stuck trying to figure something out, but when I finally do, I get sort of a high off of the “eureka moment.” There are few feelings better than that and it is something that most programmers would probably agree with.