IT537

Front-end Web Development

Lecture 2.1

Armagan Amcalar

Feb 11th, 2017

Who am I?

Armagan Amcalar
Head of Software Engineering @ unu GmbH
Founder @ Lonca Works

        dashersw            dashersw

 

dovecote

cote
semaver
vieux

pedalboard.js

tartJS
geneJS
jira-bot

AUTHORED ON GITHUB

What will we cover?

Prototyping

UI architectures & design patterns — MVC, MVVM

JS frameworks — Angular, React

CSS — CSS3 and processors

GitHub & Trello — Code & issue management

Node.js — Backend!

Hybrid apps — Raw performance

Testing

Collaboration — The real deal

Open-source culture — Giving back to the community

...and a lot more.

Project categories

1. A web application with social login and integrations — Easy
    
2. 2. A desktop application with native APIs: file access, menus, clipboard, etc. — Easy
    
3. A hybrid mobile application with native APIs: camera, bluetooth, maps, etc. — Hard
    
4. A modern front-end framework without runtime — Insane

Deliverables timeline

1. Proposals (10%)
   Feb 16th
    
2. Initial sketches / wireframes (15%)
   Feb 26th
    
3. First demos (25%)
   March 9th - March 12th
    
4. Final demos (30%)
   March 23rd - March 26th

Concepts

User Interface

Graphical User Interface

User Experience

Front-end

Back-end

Client

Server

Web page

Web application
Framework
Library

Build tools

Prototyping

Maintenance

Kanban

git clone

git pull

git push

git branch

GitHub pull request

JavaScript basics

On Feb 16th;

Prototyping with Balsamiq

HTML & CSS

Example apps

References

• Google JavaScript Style Guide
  google.github.io/styleguide/jsguide.html
   
• You don’t know JS (Kyle Simpson)
  github.com/getify/You-Dont-Know-JS
  ​
• Pro JavaScript Design Patterns (Ross Harmes & Dustin Diaz)
  jsdesignpatterns.com
   
• Node.js Design Patterns (Luciano Mammino; Mario Casciaro)
   
• javascript30.com
   
• Learn CSS Layout
  learnlayout.com