Course Introduction

Agenda

• Web development is…

• History

• Front-End definition

• Environment

• Technical restrictions

• Technologies set

• Organizational questions, free talking

Current situation

- Everything is a web based:

• Desktop

• Mobile

• TV

• Glasses

• Watches

• Cars

• Homes

- Latest trends:• The HTML5 JavaScript API

– Web Storage

– Web Workers

– Web Sockets

– Application Cache

• The rise of JavaScript and client-side web apps

• The evolution of the front-end frameworks

• Development beyond the screen

• Drag and drop everything

• Responsive design is mandatory, new challenges

• Mobile web apps which performs like native apps

• Web-components

• The rise of Node.js

- Languages:

• Java

• Scala

• PHP

• Erlang

• Python

• Go

• Ruby

• Bash

• Perl

• .net

- Platforms:

• Windows

• Linux

• Mac

• iOS

• Android

• Tizen

• Others

Web applications

Advantages:

• No installation

• The app will run on the browser regardless the platform

• Automatic updates

• Connect from anywhere

• Centralized storage of all data

• Might behavior as native app on mobile devises

Disadvantages :

• Internet is required

• Hosting costs

• User data is kept in the web

app servers, security risks

• Slower as run over the internet

• Can take longer to develop as

they are more complex

• Have to support different

browsers, and different

versions

Statistics

History of web

http://www.evolutionoftheweb.com/

http://upload.wikimedia.org/wikipedia/commons/e/e4/Web_development_timeline.png

Front-End definition

• Job specific

• Knowledge areas

• Design & development

• End-user communication

Job specific:

•Unit testing

•Architecture design

•Writing documentation and style guides

•Page load/rendering speed optimization

•SEO/SMO friendly

• Non-stop communication with people

•Non-stop learning process

•Responsive markup

•Interaction programming

•Backend integration

•Build process optimization

•Code refactoring

•Solution search

•Framework library troubleshooting

•User stories review

•Psd to html/css

•Image optimization, sprites

•Animation programming

•Font search

•Design review

•Wireframe implementation

•Mockup adaptation

Design & Development

• if you don’t have a designer — you should became one

• if you have a designer — you will need to lead him

• if you don’t have other developers — you need to know more

• if you have other developers — you need to know even more and teach them

End-user communication

• Feedback is your most valuable data

• Feedback is not only a verbal thing:

o statistic, heat maps, A/B testing

o survey results

o verbal

• Make sure you gather feedback from your target audience

• Try to receive feedback on each stage of development and be flexible.

Environment

• Different browsers have different features support. Strategies for supporting different browsers

• It’s always changing

• Nightly builds are your friends

• Many versions to support at once, manyvendors to support, many OS to support

• Not only on a desktop, but almosteverywhere

Technical restrictions

Phone:

•tiny viewport

•fingers as the only

•input device

•“hurry” context

•slow connection

•single task

Tablet:

•smaller viewport

•fingers as the primary –make buttons in proper size

•input device

•optional keyboard

•“relax” context

•mixed connection

•single task

Desktop:

•wide screen

•mouse/touchpad

•Keyboard

•“work” context – usually used for work

•fast connection

•multitasking

Technologies set

Current course is including following technologies:

–HTML/XHTML/XML/JSON

–CSS

– JavaScript

Organizational questions

• github.com• everyone will need to create account there• name your repositories by lectures with

“UIcourse_” prefix• github.com/username/UIcourse_lecture1• push your homework and send me a message• http://my.lits.com.ua/ forum• use forum for communication with other

students• you should try to use english, if you are not ok

with this

Allen Rabinovich: The Many Hats of the Frontend Engineer

https://www.youtube.com/watch?v=rDRr_pUl3i0 -

Homework#1

• watch Allen’s presentation

• choose what hat you want to wear more than others

• register account at github.com

• create repository for lecture1

• push there a text file with your answer

• login to http://my.lits.com.ua/

• complete your profile with photo

• collaborate with others at forum, don’t be shy, create your own topic

Email: svitlana.sikora@gmail.com

Skype: svitlana.sikora

Expectations

Questions

Thank you for attention!