Richard Johnson Goal Designs Inc. Minnesota Web Design Meetup – April 15, 2013 Slides available:

Slides:



Advertisements
Similar presentations
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Advertisements

HTTP Request/Response Process 1.Enter URL ( in your browser’s address bar. 2.Your browser uses DNS to look up IP address of server.com.
INTRODUCTION TO ASP.NET MVC AND EXAMPLE WALKTHROUGH RAJAT ARYA EFECS - OIM DAWG – 4/21/2009 ASP.NET MVC.
John Culviner johnculviner.com DEMO CODE:
Developing HTML5 Application using MVVM pattern Pekka Ylenius.
Validation in Angular 1.3 And other angular tidbits.
Wireless: WDDPublic Follow along with the code: (or download the Join Me app.
1 Chapter 12 Working With Access 2000 on the Internet.
Microsoft ASP.NET AJAX - AJAX as it has to be Presented by : Rana Vijayasimha Nalla CSCE Grad Student.
Does Ajax suck? CS575 Spring 2007 Chanwit Suebsureekul.
USING ANGULARJS WITH SITEFINITY
SignalR Real Time with SignalR Jared Rhodes Senior Consultant Magenic.
User Group 2015 Version 5 Features & Infrastructure Enhancements.
Web Design Basic Concepts.
UNIT-V The MVC architecture and Struts Framework.
What Are My Choices for Building a Modern Web UI?
Agenda What is AJAX? What is jQuery? Demonstration/Tutorial Resources Q&A.
2012 National BDPA Technology Conference Creating Rich Data Visualizations using the Google API Yolanda M. Davis Senior Software Engineer AdvancED August.
Computer Concepts 2014 Chapter 7 The Web and .
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
Single Page Applications with AngluarJS Bill Wolff Rob Keiser
NextGen Technology upgrade – Synerizip - Sandeep Kamble.
FALL 2005CSI 4118 – UNIVERSITY OF OTTAWA1 Part 4 Web technologies: HTTP, CGI, PHP,Java applets)
Pittsburgh Java User Group– Dec Java PureFaces: A JSF Framework Extension.
Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.
SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAngularJS AngularJS is a client-side JavaScript Framework for adding interactivity to HTML.
JavaScript & jQuery the missing manual Chapter 11
Introduction Marko Marić, Danulabs
Joel Bapaga on Web Design Strategies Technologies Commercial Value.
Philly.NET Hands-on Labs JAVASCRIPT SERIES. July 9: JavaScript Syntax Visual Studio ◦Projects ◦Editors ◦Debugging ◦Script blocks ◦Minification and bundling.
May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Build Great Web Application 'Fast and Easy'
Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.
ASP.NET + Ajax Jesper Tørresø ITNET2 F08. Ajax Ajax (Asynchronous JavaScript and XML) A group of interrelated web development techniques used for creating.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
AJAX Without the “J” George Lawniczak. What is Ajax?
XP New Perspectives on XML, 2 nd Edition Tutorial 10 1 WORKING WITH THE DOCUMENT OBJECT MODEL TUTORIAL 10.
Client side web programming Introduction Jaana Holvikivi, DSc. School of ICT.
1 Geospatial and Business Intelligence Jean-Sébastien Turcotte Executive VP San Francisco - April 2007 Streamlining web mapping applications.
Building Rich Web Applications with Ajax Linda Dailey Paulson IEEE – Computer, October 05 (Vol.38, No.10) Presented by Jingming Zhang.
Dynamic web content HTTP and HTML: Berners-Lee’s Basics.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
Microsoft Virtual Academy Stacey Mulcahy | Technical Evangelist Christopher Harrison | Content Developer.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
Canopy walk through Single-Page Apps (SPAs) Benjamin Howarth Freelancer, Code Gecko Umbraco UK Festival, Fri 30 th Oct 2015 CODE GECKO.
Module: Software Engineering of Web Applications Chapter 2: Technologies 1.
Weekend MS CS Program Internet and Web Technologies COT 5930 Web Project Development - Ajax Dr. Roy Levow, Associate Chair & Professor
ICM – API Server & Forms Gary Ratcliffe.
Text INTRODUCTION TO ASP.NET. InterComm Campaign Guidelines CONFIDENTIAL Simply Server side language Simplified page development model Modular, well-factored,
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
The New Face of ASP.NET ASP.NET MVC, Razor, and jQuery Ido Flatow | Senior Architect | Sela | This session is.
AngularJS. What is AngularJS  Javascript Framework  MVC  for Rich Web Application Development  by Google.
AngularJS and SharePoint
Angular JS and SharePoint
Web Technologies Computing Science Thompson Rivers University
Extra Course
Kendo UI Builder Bob Brennan
Angular JS Training | Angular JS online Training at GoLogica
Jessica Betts, Sophia Pandey, & Ryan Amundson
AngularJS and SharePoint 2013: Lessons Learned from the Trenches
Angularjs Interview Questions and Answers By Hope Tutors.
Top Reasons to Choose Angular. Angular is well known for developing robust and adaptable Single Page Applications (SPA). The Application structure is.
Step by Step - AngularJS
Introduction to AngularJS
Rich single page applications with SharePoint
Creating Lightning Fast Apps Using AngularJS
Secure Web Programming
Web Technologies Computing Science Thompson Rivers University
Web Client Side Technologies Raneem Qaddoura
05 | An Introduction to AngularJS
#01# ASP.NET Core Overview Design by: TEDU Trainer: Bach Ngoc Toan
Presentation transcript:

Richard Johnson Goal Designs Inc. Minnesota Web Design Meetup – April 15, 2013 Slides available:

 Web designed for documents  Server creates pages / browser displays  Data input sent to and processed by the server  Updated pages created on the server and resent

Name: <?php echo " Hello ".$HTTP_POST_VARS["yourName"]."! "; ?> Name: <?php echo " Hello ".$HTTP_POST_VARS["yourName"]."! "; ?>

 Interactive client-side web  Collect input from user  Update display  Communicate with server  Client-side processing enabled by  JavaScript  DOM manipulation  HTTP server messaging

$(function() { $("#yourName").keyup(function () { $("#helloName").text("Hello " + this.value + "!"); }); Name: $(function() { $("#yourName").keyup(function () { $("#helloName").text("Hello " + this.value + "!"); }); Name:

 Simplifies event binding and DOM manipulation  Common API across multiple browsers  Supports plug-in modules to extend functionality  Requires writing JavaScript code to wire

 Follow good programming practices  Separate: data / display / processing  Simplify connecting data to display  Let us focus on the technologies of the web  HTML  CSS  JavaScript

<script src=" angularjs/1.0.6/angular.min.js"> Name: Hello {{yourName}}! <script src=" angularjs/1.0.6/angular.min.js"> Name: Hello {{yourName}}!

 Compare jQuery imperative wiring  to AngularJS declarative relationships Hello {{yourName}}! Hello {{yourName}}! $(function() { $("#yourName").keyup(function () { $("#helloName").text("Hello " + this.value + "!"); }); $(function() { $("#yourName").keyup(function () { $("#helloName").text("Hello " + this.value + "!"); });

 jQuery abstracts browser functionality  e.g. DOM traversal, event binding  AngularJS abstracts relationships (and more)  Note: AngularJS, and all web apps, are built on browser functionality

 HTML is a declarative document language  Browser translates HTML into a Document Object Model (DOM)  DOM is the browser’s in-memory document representation  JavaScript can manipulate the DOM

 Browsers send a document (i.e. DOM) ready event  AngularJS can intercede and rewrite the DOM  The rewrite is driven by markup in the DOM

 Software architectural pattern  Separates display from data  Originated with Smalltalk programmers  From work at Xerox PARC in the late 70’swork at Xerox PARC  Models represent knowledge  Views provide a (visual) representation of attached model data  Controllers connect to and control views and models

 Different variations of the pattern  Model-View-ViewModel (MVVM)  Model-View-Presenter (MVP)  Variations differ on…  … connectivity  … cardinality  … directionality

“MVC vs MVVM vs MVP. What a controversial topic that many developers can spend hours and hours debating and arguing about. For several years AngularJS was closer to MVC (or rather one of its client- side variants), but over time and thanks to many refactorings and api improvements, it's now closer to MVVM – the $scope object could be considered the ViewModel that is being decorated by a function that we call a Controller. … I hereby declare AngularJS to be MVW framework - Model-View- Whatever. …” Igor Minar – Google AngularJS Development Team

 Backbone.js Backbone.js  Ember.js Ember.js  Knockout Knockout  Others  Summary from 2012 Throne of JS conference2012 Throne of JS conference

 Library (Backbone and Knockout)  passive functionality  invoked by the application  Framework (Ember)  provides application architecture  handles common requirements  invokes application code  AngularJS is closer to a framework

 *I ported my Backbone application to angular. The Code size went down from 5k lines of code to guess what? 750 lines. Not just that.. The code is much cleaner.. Earlier, there was a huge technical debt attached to this implementation in backbone.. Each time I had to sit with it. It took me quite a while to understand all the hooks and how the individual models and classes and views interacted together....Now its a breeze.. * 

 Working with AJAX in mid-2011  XML for data  XSLT to map XML data to HTML  Considered changing to JSON  Found a link to AngularJS (alpha)

 AngularJS website: angularjs.organgularjs.org  Examples are live  Phonecat tutorial is worthwhile  My “goto” sources:  Developer guide  API reference

 Load AngularJS <script src=" angularjs/1.0.6/angular.min.js">  Bootstrap  Declare relationships ng-model="yourName” {{yourName}}

 One created with each controller  Prototypically inherits from parent  AngularJS has a root scope  Can create isolated scopes (e.g. in directive)

 Automatic propagation of data changes  Model is single source of truth  Digest cycle

 Contains the code behind the view  Try to keep lightweight

 Added to a WordPress site  Custom theme  Page templates with shortcodes  Built summer 2012 (just as AngularJS 1.0 shipped)  Created order form and product location pagesorder form product location Note – it’s a live site (and good wine )  Too much code in the controller - modularize

 Provides declarative form validation  Input fields declared as: required,  Form has flags for: $valid, $dirty  Usable as a standalone validation library

 Directives enhance HTML  Custom element name or attribute (also class and comment)  AngularJS provides over 50  form – element directive  ng-repeat – attribute directive (it’s amazing!) ng-repeat

 Declarative way to  format displayed data format  filter and sort data arrays filter sort

 Software architectural components  Services provide data and compute  Exist across views  Depend on other services  AngularJS has 20+  $http – service to communicate with servers $http

 $http service  Input config object  Returns promise  Communication is asynchronous $http({method: ‘GET’, url: fetchUrl}).success(function(data, status) { // process the data here }).error(function(data, status) { // error handling }); $http({method: ‘GET’, url: fetchUrl}).success(function(data, status) { // process the data here }).error(function(data, status) { // error handling });

 Promises represent result of an action Promises  Particularly used with asynchronous actions  They are either resolved or rejected

 DI is a software architectural pattern  Separation of concerns  Service creation independent from usage  Good for  Modular code  Allows AngularJS to wire in correct order  Supports substitution (for patching and testing)

 Services identified by parameter name  Minification obfuscates the name  Pass names as strings in array angular.module('GoaleryServices').factory('StatusManager', [ 'CloudLogin', '$q', function (cloudLogin, $q) { … angular.module('GoaleryServices').factory('StatusManager', [ 'CloudLogin', '$q', function (cloudLogin, $q) { …

 Prototype-based scripting language  Dynamic, weakly typed, first-class functions  Great JavaScript book:  Crockford (2008) JavaScript: The Good Parts – O’Reilly

 JavaScript doesn’t have a compiler  Must execute code to test  Testability was a fundamental objective of AngularJS  Miško Hevery (AngularJS creator)  Previously created JsTestDriver

 Unit testing support Unit testing  JsTestDriver  Jasmine  DI allows substituting mocks for hard to test code  Server communication  Logging  Angular Scenario Runner – E2E testingE2E testing  Simulates user interations

 Single web page  Loads the base HTML and included sources once  App changes views dynamically  Server is called upon when needed  Prefer using asynchronous server calls  Data changes  Fetch more data

 Declarative view specification  HTML augmented with:  Directives, Markup, Filter, Form Controls  Loaded either  with a simple single web page  dynamically into a view as partialsview

 Define the mapping from URL to view  Can also bind controller  Define URL parameters $routeProvider.when('/Book/:bookId', { templateUrl: 'book.html', controller: BookCntl }); $routeProvider.when('/Book/:bookId/ch/:chapterId', { templateUrl: 'chapter.html', controller: ChapterCntl }); $routeProvider.when('/Book/:bookId', { templateUrl: 'book.html', controller: BookCntl }); $routeProvider.when('/Book/:bookId/ch/:chapterId', { templateUrl: 'chapter.html', controller: ChapterCntl });

 AngularJS navigation updates the browser address bar  Uses the HTML5 history API – fallback to hash-bang (#!) URL  Users can link to pages in you app  Server must recognize the link pattern and serve the application

 Directives package reusable HTML Directives  Naming nuance: “myDir” becomes “my-dir”  Conceptual compile and link phases  Can specify: scope, binding, restrictions, etc  Supports transclusion  Consider creating a custom DSL

 Packaging of JavaScript code  Modules declare dependencies Modules  AngularJS instantiates in correct order  Provides separation of namespaces

 Open source – MIT License  Built by Google and community  1.0 released June 2012  current (April 2013) 

 AngularJS 1.0.X are considered stable production releases  Contains bug fixes and documentation updates  AngularJS 1.1.X is unstable development  Next stable feature release will be 1.2.X  Available on the Google CDN  ar.js ar.js  Both full source and minified (angular.min.js)

 AngularJS includes a jQuery “lite”  Provides the minimal features directly used  Including jQuery will be used instead  Note – jQuery must be included before AngularJS

 Chrome  Internet Explorer 9+ (others see next slide)  Firefox  Safari  Opera  mobile browsers (Android, Chrome Mobile, iOS Safari)

 IE 8 is officially supported and tested  Declare custom element tags  Routing uses #! mode (IE9 also has no HTML 5 history)  A few other XML namespace declarations  See  IE 6 & 7 support is possible “in theory”  Google doesn’t test these versions  < 1% of U.S. browsers (March 2013)

 Chrome debugger plugin  Jasmine testing framework plugin

 AngularJS UI –  Compilation of several projects ▪ AngularJS UI – calendar, date, map, if ▪ UI Bootstrap – Twitter bootstrap components ▪ ng-grid – data grid ▪ UI-Router – enhanced routing with UI states  AngularStrap - strap/ strap/

 Blog – official announcments Blog  Forums – support Forums  JSFiddle Examples JSFiddle Examples  Cheat Sheet Cheat Sheet

 AngularJS (April 29, 2013) Green & Seshadri – O’Reilly  AngularJS in Action (Fall 2013) Ford & Ruebbelke– Manning

 Coding in Angular   Front-end Masters Front-end Masters  AngularJS &Testability – Misko Hevery  Javascript the Good Parts – Douglas Crockford

 Animation support  More flexible (and faster) ngRepeat directive  Powerful promise-based http request interceptors  Dynamically generated directive templates  Initial batch of mobile/touch support

 “What a web browser would have been had it been designed for web applications”  - Miško Hevery  Upcoming AngularJS presentation  Google Developer Group – Twin Cities  May 1, 2013 at CoCo May 1, 2013 at CoCo