Having Fun Building Web Applications (Day 1 Slides)

about me
Clarence Ngoh
Year 2 SIS
Telegram: @clarencenpy

Having Fun
Web Applications
building
Previously…

front end?
practice of producing HTML, CSS and Javascript for a
website or web application so that a user can see and
interact with them directly through the web browser
Why?
SE and beyond - you need an interface to your app
JS supports a great user experience that static pages can’t
Easy to get started with so many libraries to leverage

Web apps?a client-server software application in which the
client (or user interface) runs in a web browser.
Why?
> Write Once Run Anywhere
> Easy to reach a huge user base
> Browsers getting better and better
> BUT.. still many things we cant achieve like
access hardware and ﬁlesystem, a uniﬁed
payments platform, high performance 
> Not better than native, but Good Enough for
increasing types of applications

web pages VS webapps
data on the wire
html on the wire
- no page refresh
- javascript driven

what we will be building
Concept / Value proposition
a matchmaking application
for students searching love
that allows the user to match interests with other users
(compatible or not?)
and facilitate their budding love

create and update personal profile
view all other users on platform
check compatibility with another user
matching interests
astrology?
send gifts
rank by popularity
Mock Up - Job to be done

Profile
Card CardCard
Notifications
Mock Up - Page Structure

Course overview
Day 1
Pure front end app - no
server backend
Page scaffolding
No database, we will
hardcode data

Course overview
Day 2
Intro to Meteor.
Port existing app over
Database
User accounts

Environment setup
You will need a text editor, use any you like,
something you are familiar with!
Suggested: Sublime Text, Notepad++,
WebStorm
Look out for features like:
Syntax/error highlighting
HTML tag expansion (Emmet)
Auto-reformatting
Auto-completion
Chrome Web Browser

Using 3rd party code
we code some, we kope some
Web development
about composing
building blocks to
create something
Good programmers
reuse what is already
available

Using 3rd party code
we code some, we kope some Use HTML <script>
tag to import
src = use local copy or
Content Delivery
Network (CDN)
Beneﬁts of CDN
include:
Distributed data centers
Browser caching
Faster page load

Exercise 1Import jQuery
Open your web app in Chrome (no errors)

css Frameworks
Get pretty components out of the box
Help us to resolve browser differences
Someone else do the hard work (eg browser
preﬁxes)
Don’t have to write your own CSS - only if you
want to customise
Usually come with good documentation
Good way to learn CSS best practices
Take your pick: Bootstrap, Foundation, Semantic

How css frameworks work
.cool {
rules …
}
.nice {
rules …
}
your css
.red {
rules …
}
.button {
rules …
}
Framework css
<div class=“cool red”>
</div>
your HTML
for styling

How css frameworks work
.cool-component {
rules…
}
Framework css
lots of code…
Framework JS
<div class=“cool-
component”>
</div>
your HTML
$(‘.cool-component)
.startPlugin()
your JS
for behaviour

Exercise 2Play with SemanticUI components
Play with Grid System

Exercise 3Create a 2 panel layout
Add card for user proﬁle

Exercise 4Scaffold UI to display cards of other people

jquerya must have library for working on the browser
Help us to resolve browser differences
Great documentation
Super easy way to manipulate page
(DOM elements)
http://www.sitepoint.com/jquery-vs-
raw-javascript-3-events-ajax/
Extensive plugin system

https://api.jquery.com
jquery
we need to know how to…
Select Elements Add Behaviour Change state
.on() .click()$(…) .class() .html()
$(‘.donebutton’).class(‘hidden’)

Exercise 5Create global object with application data
Use this to generate n number of cards
for other users

get organised
some tips
Encapsulate everything into an object (don’t
pollute the global namespace)
Group related code into functions, so we know
where to ﬁnd/add our code
init()
bindEvents()
loadSomething()
refresh()
Initialise app when Document Ready  
$(function)

Templating engine
creating html strings manually is painful
https://mustache.github.io
so how?

Templating engine
<div class="entry">
<h1>{{name}}</h1>
<div class="body">
{{message}}
</div>
</div>
Template + Data = HTML
{
name: “John”
message: “hi”
}
<div class="entry">
<h1>John</h1>
<div class="body">
Hi
</div>
</div>
Mustache.render(template, data)
how it works

Templating engine
{{# }} {{# }}
template helpers
array boolean
{{/ }}
Loops Conditionals
html that is
displayed for every
element in array
html that is
displayed only if
boolean is true
array {{/ }}boolean

Exercise 6Use Mustache templating!

event handling
we use the .on() jQuery method to
attach a function to a DOM element
DOM element rendered DOM element not yet rendered
Attach callback
function to element
Attach callback to parent
element that is already
rendered, passing in
additional ﬁlter argument

passing data
when we attach the same event handler
for multiple DOM elements, we need a
way to uniquely identify each one
can be attached to these elements using
HTML5 Data Attributes
data-<name>
and retrieved with jQuery using .data(name)

Exercise 7Attach event handlers to Check Compatibility
button, and print the person id of the clicked
element to console

Javascript utilities
Perform common algorithms with
lesser pain
Find item in array, looping, sorting,
mapping etc.
We are using Underscore.js
sugary syntax for common algos

Exercise 8Implement check compatibility function
- Display modal on click
- Calculate number of common interests
- Display progress bars

APIs, our best friend
API is an agreement/contract between two people,
saying that if you give me this instruction, I will
execute this and do something for you.
This something could be anything: 
sending an email, drawing a chart, fetching data etc
We need an API because we are relying on some
code someone else did
Look at the API documentation to see what data
they take in, and what is the corresponding result
Application programming interface

APIs, our best friendApplication programming interface
General Steps
Download the library (if required)
Get the API keys (if required)
Transform your data to match their
expected input
Call the API!

Exercise 9Follow the API documentation of Vedic API to
display Horoscope matching report!

Exercise 10Every time the Check Compatibility button is
clicked, increment the number of views of the
person by 1 and refresh UI

End of day 1https://clarencengoh.typeform.com/to/kqWcZb

Having Fun Building Web Applications (Day 1 Slides)

More Related Content

What's hot

Viewers also liked

Similar to Having Fun Building Web Applications (Day 1 Slides)

Recently uploaded

Having Fun Building Web Applications (Day 1 Slides)