Coding languages and tools for front end web/mobile development. This guide will always contain the latest technologies that i personally use to my daily work. Tools/technologies i deprecate over my work will also be removed from this guide.
JavaScript is a programming language that adds interactivity to your website (for example: games, dynamic styling, animation). Alongside with HTML and CSS, it is one of the three core technologies of World Wide Web content production.
You need to know that JavaScript is:
- dynamic - meaning it's a loosely type language!
- prototype-based - pay attention here!
- with first-class functions - functions are treated as first class citizens!
JavaScript is a multi-paradigm language, supporting object-oriented, imperative and functional programming styles. Created by Mozilla (back then it was called Netscape) engineers, there is no better place for documentation than the JavaScript Guide in Mozilla Developer Network. Don't forget to experiment with interactive tutorials such as JavaScript.com from Codecademy
Basics & Object Oriented JavaScript:
- Basics
- Scoping
- Variable Scope
- Function Scope
- Block Scope - introduced in ES2015!
- Data Types & Structures
- JavaScript Hoisting Explained
- Promises
- Re-introduction to JavaScript
- Object Oriented JavaScript
- this
- More Promises
- Strict Mode
- Self-Executing Functions - part of JavaScript closures!
AngularJS is an MV* framework for use when building client-side single-page apps (SPA). It is not a library, but a framework for building dynamic web pages. It focuses on extending HTML and providing dynamic data binding. Instead of manipulating the DOM “directly,” you annotate your DOM with metadata (directives), and Angular manipulates the DOM for you.
Using dependency injection, Angular brings traditionally server-side services, such as view-dependent controllers, to client-side web applications. Consequently, much of the burden on the server can be reduced. Get in speed with AngularJS by starting with the links below:
React Native, is an open-source JavaScript library, which enables native iOS and Android development with React. To understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props.
Notable React Features
-
The use of a "virtual DOM." React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change while the React libraries only render subcomponents that actually change.
-
JSX React components are typically written in JSX, a JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render subcomponents. Many frameworks use a special templating language which lets you embed code inside HTML (i.e. Angular). In React, this is reversed. JSX lets you write your HTML inside JavaScript code.
-
Components JavaScript code written in classes(ES2015) and using JSX mentioned above. I.e.
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}<Text> from above is a built-in component that just displays some text.
When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component reuires a render function which returns some JSX to render.
-
Props. Most components can be customized when they are created, with different parameters. These creation parameters are called props. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to this.props in your render function.
-
State. There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.
React uses ES2015 syntax
First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support and ES2015 compiler.
Before you proceed with React and React Native you need to have a look at ES2015. You don't need to read ES2015 extensively and all the changes it introduces but instead key changes and the ones that React uses. Check out this article for a simple and extensive but not comprehensive analysis.
Get started with React Native
Have a look over React Native website to gain access to information that include:
- installation
- tutorials
- guides
- components
Flexbox as explained by Scott Vandehey article is a layout method that has been introduced with CSS3 and serves as an alternative so that developers do not abuse floats. Floats / inline-block etc hacks are hard to remember. limited and usually also buggy.
So far, there are three versions of the specification but only one matters but the one that matters is the final one:
- The final 2012 spec — display: flex — is the new hotness, with excellent browser support.
Notes:
- Each spec used a different keyword for the display property, so if you see anything other than display:flex in the CSS code, it’s an older article and can be ignored.
- Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Learn by playing
- Flexbox Defence - Very fun tower defense educational game
- Flexbox Froggy - Interesting concept game with lots of levels
Learn more about the Flexible Box Layout model
Flexbox layout in React Native