Front-End Development – DTC 477: Advanced Web Design & Development

Sources:

Positions:

Front-End Developer: HTML, CSS, DOM, and JavaScript (plus frameworks) – salary $45,671 – $98,639

Front-End Engineer: advanced JavaScript developer , software engineer, computer science background – salary $45,218 – $102,142

CSS/HTML Developer: no JavaScript -salary $35,238 – $91,741

Front-End Web Designer: HTML & CSS and Visual Design and Interaction Design median – salary $28,750 – $78,044

Front-End User Interface (aka UI) Developer: interaction design skills + front-end developer skills or front-end engineering skills – salary $51,876 – $118,116

Mobile/Tablet Front-End Developer: native or web apps, iOS (Swift), Android (Java), Web Apps (Javascript, HTML5) – salary $54,000 – $108,000

Also SEO, Accessibility, Testing

A Typical Development Team:

Visual Designer (i.e., fonts, colors, spacing, emotion, visuals concepts & themes)
UI/Interaction Designer/Information Architect (i.e., wireframes, specifying all user interactions and UI functionality, structuring information)
Front-End Developer (i.e., writes code that runs in client/on device)
Back-End Developer (i.e., writes code that runs on server)

“A lead/senior front-end developer/engineer can potentially live wherever they want (i.e., work remotely) and make over $150k a year” – Front-End Handbook

Job Resources:

Frontenddeveloperjob.com

Paradigm Shift 2018/2019:

PWA – Progressive Web Apps are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of a mobile experience

-Complex and Fast websites are in demand!

-Web Apps in high demand- geolocation, messaging, payments

– jQuery solved problems, but more and more irrelevant. Learn DOM and beyond DOM (states and views). You Don’t Need jQuery

– Less focus on DOM and more on “States” and components. Systems not pages.

– Modular Frameworks: React, Angular, Vue, Ember, etc. on rise.

-But don’t forget ongoing developments in core web: HTML, CSS & JavaScript

Skills:

Understand Web Basics: Http,Ftp, browsers, servers, hosting, networks

HTML5 & CSS3

Javascript/DOM/jQuery/JSON (JavaScript Object Notation)

Responsive Design CSS

Basic Terminal, SSH (Secure Shell – secure websites) , GitHub Basics

Content Management Development and Design (some Php, WordPress, HTML, CSS)

CSS Precompiler: SASS (programming CSS, not too hard to learn)

CSS Frameworks – Bootstrap & Foundation

Front-End Build Tools: Webpack

RESTful Web Services – how to send info back and forth from client to server

ES6 (needs “transpiler“) – new JavaScript

Specialize in one JavaScript Framework: React, Angular 2, Vue etc.

Eventually learn Node.js (JavaScript for backend). Popular!

What is ECMAScript 6 (ES6)?

from What’s New In The Next Version Of JavaScript

variables:

var (scope within function),
let (scope within block, declare i again and again),
const (can’t change variable)

arrow function: simplified functions

string methods:

'my string'.startsWith('my'); //true

.startsWith()
.endsWith()
.includes()
‘my ‘.repeat(3); // ‘my my my’

template literal: ${..}

let name = 'John',
console.log(`This is ' + name);
console.log(`This is ${name}.`);

arrays:

Array.from create an array

let itemElements = document.querySelectorAll('.items');
let items = Array.from(itemElements);

Array.find

[5, 1, 10, 8].find(n => n === 10) // 10

[5, 1, 10, 8].findIndex(n => n === 10) // 2

Array.fill

[0, 0, 0].fill(7) // [7, 7, 7]
[0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]

math:

Math.sign returns the sign of a number as 1, -1 or 0.
Math.trunc returns the passed number without fractional digits.
Math.cbrt returns the cube root of a number.

spread operator:

let values = [1, 2, 4];

let some = [...values, 8]; // [1, 2, 4, 8]

let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]

destructuring:

let [x, y] = [1, 2]; // x = 1, y = 2 parameters:

function doSomething(x, y = 2) {
   return x * y;
}

doSomething(5); // 10
doSomething(5, undefined); // 10
doSomething(5, 3); // 15

modules: export and import keywords across files

classes: classes in javascript

symbols: new data type

*Use Typescript or Babel to "transpile" ES6 to older JavaScript (ES5)

Imperative vs. Declarative Programming

Imperative and Declarative programming

Imperative: tell browser to do stuff to the DOM
Declarative: you declare a desired state and React works on the DOM

the imperative way –

function increment(array) {
 var results = [];
 for (var i=0; i < array.length; i++) {
 results.push(array[i]+1);
 }
}

the declarative way –

function increment(array) {
   return array.map( item => item + 1 );
}

Web Frameworks

Do you need them?

What is Angular?

Angular is a Full JavaScript Framework to create Web Apps – a “single page app” or SPA loads content of site into a single page. No need to reload page.

Angular 1 vs. Angular 2 vs Angular 4

dynamic and fast like native app – browser does the heavy lifting, not the server

Key concepts: modular, testable, maintainable

Does much more than React.

Can be overkill. High learning curve.

What is React?

React is a JavaScript library for building user interfaces. It focuses on the “view layer”, not the server. Very popular.

Components made of HTML and JavaScript using JSX.

Virtual DOM : manipulation of DOM is slow, manipulation of Virtual DOM is faster

Use with Redux or Flux to work with databases or APIs

React is not necessary for all jobs! Limited!

What is Vue.js?

Vue.js is a progressive framework – not just view layer. You can opt into greater complexity like data fetching, SPA routing, state management

Similar to React. Use Virtual DOM. Uses JSX.

But it can handle complex jobs.

Simple! Less of a learning curve.

Flexible and productive.