Why Javascript Frameworks

Kay Ashaolu

We've spent a lot of time on Javascript

• We've learned the basics of Javascript
• We've learned how Javascript is used in the browser (i.e. how it manipulates the Document Object model)
• We've learned modern JavaScript

We've spent a lot of time on Javascript

• We did this so that you have a good foundation to write some quality JavaScript
• It is really, really important to have a good foundation for javascript

Okay, so now what?

• We could start learning how to bulid a complex app with what we know
• HTML, CSS, and JavaScript is all you need to go
• You can write classes and functions to calculate actions and state

Okay, so now what?

• You can use the document object in JavaScript to manipulate the DOM
• We have not talked about AJAX or making HTTP Requests, but its coming
• How you connect your web app to external systems

But that would be hard

• Remember that JavaScript feature matrix
• You run into the same issue with CSS, and even HTML
• There's even a website dedicated to this

But that would be hard

• Also writing quality modular JavaScript is hard
• Focus on writing self contained components that interact with each other
• Modularity helps with code maintainability and development

And would take a long time

• You will find yourself writing a lot of what's called "boilerplate" code
• Code that you write over and over again
• Essentially you are creating your own "libraries" and "frameworks" to save yourself time

What is a JavaScript Library?

• A library performs specific, well-definined actions
• Typically it provides several functions for you to use
• You are in control of your code, you simply use a library to make it easier to do what you wanted to do

JavaScript Library Example

jQuery is the granddady of JavaScript Libraries

$(document).ready(function(){
	$("form").submit(function(event){
		var regex = /^[a-zA-Z]+$/;
		var currentValue = $("#firstName").val();
		if(regex.test(currentValue) == false){
			$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
			// Preventing form submission
			event.preventDefault();
		}
	});
});
								

Please note

• You are adding html code directly through your JavaScript
• Imagine you want to standardize that error throughout your web applicaton
• You would have to copy and paste that HTML code everywhere you need to add error
• You are in control

What is a JavaScript Framework?

• A framework dictates the architecture your project will follow
• You typically hook your code into a framework in order to get it to work
• The framework usually makes it easy to build a complete application quickly
• You typically have to fit the pattern that is defined by the framework

Library vs Framework

What is React?

• This is a good question
• If you look up online, people will largely say React is a library
• However some will make the case that React is a framework
• React is typically paired with fraemworks like Flux and Redux so the lines get blurred even more

This is what I think

React is a JavaScript library that provides functionality in such a way that it encourages the use of a new kind of framework of developing user interfaces, centralizing the data of the application in one area and asking the developer to tell the application what it should do with the data that it has.

So that wasn't well worded at all

• React lets you focus on writing self contained pieces of code (modules) where you describe how you would render that module if it had a certain piece of data. What you don't have to worry about is figuring out how your UI is going to manipulate the dom to make that change happen

For example, remember this?

/* Populate with current location */
var locationDiv = document.getElementById("#locationList");
locationDiv.innerHTML = localStorage.curLocation;

/* Run code on submit button push */
var locationForm = document.getElementById("#locationForm");
locationForm.addEventListener("submit", function(event) {
	var name = locationForm.elements.namedItem("name").value;
	var state = locationForm.elements.namedItem("state").value;

	localStorage.curLocation = name + ": " + state;

	var locationDiv = document.getElementById("locationList");
	locationDiv.innerHTML = localStorage.curLocation;
	locationDiv.classList.add("highlight");

	/* This stops the usual function of "submit" which is to send data
	to another server */
	event.preventDefault();
})
								

Remeber this?

• Remember how you had to both populate #locationList on startup and on submit button event?
• You had to think about every aspect when #locationList would change, including:
  • On startup
  • On submit button

What's different with React

• You write a component that would represent #locationList
• You write code on how you would render locationList if given an array (think, like a function)
• That's it!

React Example

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

ReactDOM.render(
<Square value="" />,
document.getElementById('root')
);
						

React Example explained

• There's a lot going on, but let's focus on two things
• The class defines a custom element that defines how it reacts to the state (i.e. variable)
• You don't need to worry about all of the different cases, just change the state (more on this later)

Questions