IT537

Front-end Web Development

Lecture 1.1

Armagan Amcalar

Feb 4th, 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

Let's code something and get to know each other.

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.

Class communication

Every piece of communication on Slack

We already have a Slack community called it537!

Rooms, private and public DMs and groups

Integrations for GitHub, Trello and more

I will also be reachable via Slack

Strong emphasis on collaboration and accountability

Grading

No exams, no homeworks, no finals

One project over the whole semester (80%) — with actual project deliverables along the way

Participation & collaboration (20%)

 

10% ​Bonus: Contribute to other established open-source projects

How projects work

Form groups of 4

Brainstorm and design an app

Prototype with Balsamiq

Track issues with Trello

Keep source code open-source on GitHub

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, 2nd week Thursday
     
  2. Initial sketches / wireframes (15%)
    Feb 23rd, 3rd week Thursday
     
  3. First demos (25%)
    March 9th, 5th week Thursday
     
  4. Final demos (30%)
    March 23rd, 7th week Thursday

Development environment

Think about using a Linux virtual machine
if you are on Windows
 

  1. Set up Slack (it537.slack.com)
     
  2. Create a GitHub account (github.com)
  3. Set up git
  4. Install Node.js & npm
    bower, gulp, live-server, etc.
  5. Install Visual Studio Code - Insiders
  6. Set up Google Chrome & dev-tools
  7. Set up Balsamiq (balsamiq.com)
  8. Create a Trello account (trello.com)

Let's go back to our app.

Clone it here:

github.com/dashersw/IT537

Some concepts

User Interface

Graphical User Interface

User Experience

Front-end

Back-end

Client

Server

Web page

Web application

On Feb 9th;

JavaScript basics

Browsers and the DOM

Setting up an AngularJS workflow

...and more!

References