Web Projects: From Theory To Practice

FROM THEORY TO PRACTICE

unspoken truth of starting web project

brought to youby Sergey Bolshchikov

WHAT'S YOUR NAME, U SAID?

Front end Developer @ New ProImageCo-organizer @ Ember-IL MeetupGraduate Student @ Technion, IM&E

Web: http://bolshchikov.net

Blog: http://blog.bolshchikov.net

Github: https://github.com/bolshchikov

OUTLINE

1. Understand the destiny

2. Organize your life

3. Choose your comrades

4. Lay out your way

5. Add the make up

6. Bring some action

7. Coding

UNDERSTANDING THE DESTINY

DESTINY

DESTINY :: GOALThe goal should formulate the main purpose or idea of future

project. It can be describe by one sentence or two sentences,

e.g.

“Create user-friendly web store for selling fruits and vegetables”

DESTINY :: FUNCTIONALITY● Login

● Display a list of available items with prices

● Display detailed information per item

● Be able to add the item to the basket

● Calculate the overall sum

● Send the order

DESTINY :: STRUCTURE

ORGANIZE YOUR LIFE

ORGANIZATION

Division by type

Separation of concerns

Complex

HTML5BOILERPLATE

Project started by Paul Irish (Google) for keepin' best techniques for web project

http://html5boilerplate.com/

● Code structure

● File template (html, css, js)

● Comes with libraries: jQuery, Modernizr

● and other

CHOOSE YOUR COMRADES

COMRADES

How? Checklist:

○ Amount of watchers in Github (big)

○ Amount of forks on Github (medium)

○ Amount of issues on Github (small)

○ Amount of results on Stackoverflow

○ Amount of votes on Stackoverflow

COMRADES :: DOM

Why? Cross browser API is not the same

What? Relieves you from pain developments

Who? jQuery, Zepto, MooTools

Save yourself some timeDO NOT WRITE YOUR OWN

COMRADES :: UI & WIDGETS

What?● Splitter● Tree● Accordion● Context menu● Dropdown● Charts● Calendar● Grids● Dialogs

Who?● Twitter Bootstrap

● jQueryUI

● KendoUI

● Wijmo Components

● jqWidgets

● Dojo

COMRADES :: JS FRAMEWORKS

Why? JS mess, spaghetti code

What? Clean separation of concerns

Who? EmberJS, Backbone, Angular, etc.

How? Write test programs in each of them

http://todomvc.com/

LAYOUT YOUR WAY

WRITING APPROACH

LAYOUT :: LAYOUT 1 :: HTML

<header></header><div id="main"></div><footer></footer>

http://jsbin.com/anafap/9/edit

LAYOUT :: LAYOUT 2 :: HTML

<div id="left"></div><div id="center"></div><div id="right"></div>

http://jsbin.com/asehas/7/edit

LAYOUT :: LAYOUT 3 :: HTML

<header></header><div id="container"> <div id="left"></div> <div id="right"></div></div><footer></footer>

http://jsbin.com/uvafam/6/edit

ADD THE MAKE UP

CSS

CSS is a super power

CSS :: SELECTORS

Selector Description Example

*

Matches any element.

E Matches any E element (i.e., an element of type E).

a

E F Matches any F element that is a descendant of an E element.

div a

E > F Matches any F element that is a child of an element E.

div > a

E:first-child Matches element E when E is the first child of its parent.

li:first-child

E:linkE:visited

Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).

a:linka:visited

CSS :: SELECTORS (cont.)

Selector Description Example

E:activeE:hoverE:focus

Matches E during certain user actions.

a:activea:hovera:focus

E + F Matches any F element immediately preceded by a sibling element E.

div + div

E[foo] Matches any E element with the "foo" attribute set (whatever the value).

div[data-id]

E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".

input[type=”text”]

DIV.warning Language specific. (In HTML, the same as DIV[class~="warning"].)

div.navigation

E#myid Matches any E element with ID equal to "myid".

div#main

CSS :: BOX MODEL

CSS :: MORE● display: [none, block, inline, table, inline-

block...],

● position: [absolute, fixed, relative],

● top: [number],

● left: [number],

● float: [left, right, none]

LAYOUT :: LAYOUT 1 :: HTML + CSSHTML

<header></header><div id="main"></div><footer></footer>

CSSheader, footer { border: 1px solid red; height : 55px; background-color: grey; border-radius: 7px;}#main { border-radius: 7px; border: 1px solid red; background-color: grey; height: 90px; margin: 10px 0 10px 0;}

http://jsbin.com/anafap/7/edit

LAYOUT :: LAYOUT 2 :: HTML + CSSHTML

<div id="left"></div><div id="center"></div><div id="right"></div>

CSSdiv { background-color: grey; border-radius: 7px; border: 1px solid red; float: left; margin: 0 5px 0 5px;}#left, #right { width: 150px; height: 250px; }#center { width: 275px; height: 750px; }http://jsbin.com/asehas/6/edit

LAYOUT :: LAYOUT 3 :: HTML + CSSHTML

<header></header><div id="container"> <div id="left"></div> <div id="right"></div></div><footer></footer>

CSS#left { width: 28%; background-color: grey; border: 1px solid red; border-radius: 7px; margin-right: 2%; float: left;}#right { width: 70%; background-color: grey; border: 1px solid red; border-radius: 7px; margin-left: 30%}

http://jsbin.com/uvafam/6/edit

TIME TO CODE

JAVASCRIPT

"JavaScript is the Assembly language of WEB"- Erik Meijer, Dutch computer scientist

JQUERY :: SELECTORS

$(selector).method()

For example, $(‘#list’) will return the elements which has the attribute id=”list”.

For more, see http://api.jquery.com/category/selectors/.

JQUERY :: DOM MANIPULATIONS● $(selector).html()● $(selector).append(html)● $(selector).remove()● $(selector).attr('myAttr', 'value')● $(selector).removeAttr('myAttr')● $(selector).css('width', 40)● $(selector).addClass('my-class')● $(selector).removeClass('my-class')● $(selector).text()● $(selector).val()

JQUERY :: AJAX

$.ajax({ url: ‘/api/posts’ type: ‘POST’, data: {}, success: function () {}, error: function () {}});

JQUERY :: EVENTS● $(selector).click(function () {})● $(selector).dblclick(function () {})● $(selector).mousedown(function () {})● $(selector).mouseup(function () {})● $(selector).mouseover(function () {})● $(selector).mouseenter(function () {})● $(selector).mouseleave(function () {})● $(selector).on(eventName,

function () {})● $(selector).off(eventName,

function () {})

JAVASCRIPT :: GUIDELINES

Do not populate global space

Use namespaces: create one global variable, e.g. name of your app, and store

everything there.

window.YUI = {};YUI.version = ‘0.3’,YUI.start = function () {};

JAVASCRIPT :: GUIDELINES

Write JavaScript only in js file

Do NOT write it in HTML:

<a class=”add” onclick=”function () {}”>Add</a>

Instead use jQuery and register the click handler:

$(‘.add’).on(‘click’, function () {});

JAVASCRIPT :: GUIDELINES

Write small functions

JAVASCRIPT :: GUIDELINES

Write comments

QUESTIONS?