Scribd
Upload
843 views20 pages

Js Development: An Important Aspect of Web 2.0

This document discusses JavaScript (JS) development as an important aspect of Web 2.0. It covers JS concepts like object-oriented programming, documentation, and performance. Design patterns like creational, structural, and behavioral are explained. JS development topics include managing dependencies, mobile development, games, video chat, templates, Node.js, and tools. The document emphasizes that JS dominates modern coding, especially on the web, and design patterns are helpful for development.

Uploaded by

Manley Frost
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
843 views20 pages

Js Development: An Important Aspect of Web 2.0

This document discusses JavaScript (JS) development as an important aspect of Web 2.0. It covers JS concepts like object-oriented programming, documentation, and performance. Design patterns like creational, structural, and behavioral are explained. JS development topics include managing dependencies, mobile development, games, video chat, templates, Node.js, and tools. The document emphasizes that JS dominates modern coding, especially on the web, and design patterns are helpful for development.

Uploaded by

Manley Frost
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

JS DEVELOPMENT

An Important Aspect of Web 2.0


27 MAR 16 * Manley Frost * WEBD220 Win 16 * http://manleyweek2blog.blogspot.com /

INTRODUCTION
JS in Web 2.0
JS Concepts

JS Development

Object-Oriented JavaScript
Documenting JavaScript
Writing High-Quality JavaScript
Boosting JavaScript Performance

JS Design Patterns

Design
Design
Design
Design

Patterns:
Patterns:
Patterns:
Patterns:

Creational
Structural
Behavioral
Architectural

Managing Code File Dependencies


Mobile JavaScript Development
Building Games with Canvas API
Using WebRTC for Video Chat
Using Client-Side Templates
The Node.js Application Platform
Building Tools and Automation
Browser Developer Tools

Summary

JAVASCRIPT AS WEB 2.0


Software above the level
of a single device
User Interactions
Customization
Lightweight user
interfaces, development
models, AND business
models

JS CONCEPTS:

OBJECT-ORIENTED JAVASCRIPT
Composition
Variable(s) & function(s)
Properties & Methods

Purpose
Group together related
Concepts
Functionality

Simplify code

http://www.w3schools.com/js/js_objects.asp

JS CONCEPTS:

DOCUMENTING JAVASCRIPT
// example of basic inline comments

Benefits Developers
Primary
Collaborator(s)
API users

Two basic types


Inline
Block

Special Formatting
YUIDoc

/*
The block comment is appropriate when there are going to
be multiple lines of text in a comment.
/*
/**
*YUIDoc only recognizes block *comments following this
format
*/
@class ClassTag
npm g install yuidocjs
^installs YUIDoc globally using node.js

JS CONCEPTS:

WRITING HIGH-QUALITY JAVASCRIPT


Perform Code Analysis Using Tools
JSLint
JSHint
Googles Closure Tools

Closure
Closure
Closure
Closure

Compiler
Linter
Library
Templates

Unit Testing
Manually
Using Frameworks
Qunit
Mocha
Jasmine

npm install jslint g


Jslint *.js
http://bit.ly/jslint_node
npm install jshint g
Jshint * .js
http://bit.ly/jshint_install
http://bit.ly/closure_compile +
compile
gjslint *.js
Fixjsstyle *.js
http://bit.ly/q_test
http://bit.ly/mocha_test
http://bit.ly/jas_test

JS CONCEPTS:

BOOSTING JAVASCRIPT PERFORMANCE


Reduce Loop Activity
Reduce DOM

Delaying JS Loading

Access
Size

Reduce Variables
Delay JS Loading
Avoid With
Debug code

http://www.w3schools.com/js/js_performance.asp

JS DESIGN PATTERNS:

CREATIONAL

For OOB in general

Factory
Abstract Factory
Builder
Prototype
Singleton

For JS in particular

Name spacing
Declaring dependencies
Module
Sandbox

http://www.dofactory.com/javascript/designpatterns

JS DESIGN PATTERNS:

STRUCTURAL

Describe how objects and classes


are combined to form larger
structures
Consist of the following types

Adapter
Bridge
Composite
Decorator
Faade
Flyweight
Proxy

http://www.dofactory.com/javascript/designpatterns

JS DESIGN PATTERNS:

BEHAVIORAL

Chain of Responsibility
Command
Interpreter
Iterator
Mediator
Memento
Observer
State
Strategy
Template Method
Visitor

http://www.dofactory.com/javascript/designpatterns

JS DESIGN PATTERNS:

ARCHITECTURAL

Combination of Design Patterns


Creational
Structural
Behavioral

Three Most Common Architectural Design Patterns:


Model-View-Controller (MVC)
Model-View-Presenter (MVP)
Model-View-ViewModel (MVVM)

JS DEVELOPMENT:

MANAGING CODE FILE DEPENDENCIES


Complexity as a Function of Dependencies
Dependency Management Tools

RequireJS
BDLoad
Cajon
CurlJS
LoaderJS
UMD
Yabble

jQuery
Module Name Aliases

Content Delivery Networks (CDNs)

JS DEVELOPMENT:

MOBILE JAVASCRIPT DEVELOPMENT


Limitations

Battery Life
Network Speeds & Latency
On-Board Memory Size
OS Responsiveness

Device Sensors

Geolocation
Touch
Orientation and Direction
Motion
Missing
Camera
Microphone

JS DEVELOPMENT:

BUILDING GAMES WITH CANVAS API


HTML5
Browser-Based Games
Images
Sprite Maps
Animation
Input control
Collision detection
Game loop

JS DEVELOPMENT:

USING WEBRTC FOR VIDEO CHAT


Capture
Audio
Video

Connection & Signalling


P2P
Firebase Service

Chat Client
Web Server
Personally Hosted
Hosted Online

JS DEVELOPMENT:

USING CLIENT-SIDE TEMPLATES


Simplifying Code with Templates
Text markers
JS Data object values

Templating

Without a Library
With Mustache.js
With Handlebars.js
With Embedded JS (EJS)
With Underscore.js

JS DEVELOPMENT:

THE NODE.JS APPLICATION PLATFORM


Server-Side Application Platform
Lightweight
Scalable
Google V8 JS Engine
NPM
Cross-Platform
Hosting

JS DEVELOPMENT:

BROWSER DEVELOPER TOOLS


Internet Explorer
F12

CHROME/Opera
Ctrl+Shift+I

Safari
PreferencesAdvancedShow Develop

Firefox
Ctrl+Shift+C

Firebug
https://getfirebug.com
ToolsWeb DeveloperFirebugShow Firebug

Almost Universally
Right-click and Inspect Element

SUMMARY
JS is an important aspect of Web 2.0
JS dominates modern coding, especially on the web
JS Design Patterns are helpful
Node.js isnt for everyone
It is a good Time to be a Developer

REFERENCES
(n.d.) (n.a.) Java Design Patterns. Retrieved 18 FEB 2016 from
http://www.allapplabs.com/java_design_patterns/singleton_pattern.htm
Odell, Den (2014). Pro JavaScript Development: Coding, Capabilities, and Tooling.

Apress.

O'Reilly, Tim(2005-09-30)."What Is Web 2.0". O'Reilly Network. RetrievedMarch 27, 2016


fromhttp://www.oreilly.com/pub/a/web2/archive/what-is-web-20.html?page=1

Stefanov, Stoyan (2010). JavaScript Patterns. OReilly books. Yahoo!, Inc.


http://www.dofactory.com/javascript/design-patterns
http://www.w3schools.com/js/js_performance.asp
http://www.w3schools.com/js/js_htmldom.asp

You might also like