![ECE 3822: Lecture 32, Slide 28
Typescript
JavaScript
var num = 5;
var name = "Speros";
var something = 123;
var list = [1,2,3];
function square(num) {
return num * num;
}
TypeScript
var num: number = 5;
var name: string = "Speros"
var something: any = 123;
var list: Array<number> = [1,2,3];
function square(num: number):
number {
return num * num;
}](https://image.slidesharecdn.com/lecture32-210917134656/85/Lecture-32-29-320.jpg)
Lecture 32
- 1. ECE 3822: Lecture 32, Slide 0 • Objectives: Basic Web Application Model Web Development Frameworks/Languages • Resources: Web Frameworks Popular Frameworks 10 Things to Know Angular React Knockout • Videos: Rest Postman Chrome Developer Tools LECTURE 32: INTRO TO WEB DEVELOPMENT
- 2. ECE 3822: Lecture 32, Slide 1 Principles of Web Design • Availability • Performance • Reliability • Scalability • Manageability • Cost
- 3. ECE 3822: Lecture 32, Slide 2 Core Components of Web Applications • UI (Front End (DOM, Framework)) • Request Layer (Web API) • Back End (Database, Logic) Internet Browser Media Cache API Front End JSON Database Logic Client Server
- 4. ECE 3822: Lecture 32, Slide 3 FRONTEND DEVELOPMENT
- 5. ECE 3822: Lecture 32, Slide 4 Front End Languages • HTML/CSS • Javascript • Java (applets) What is the most popular? Answer: Javascript/HTML/CSS is the only real option for front-end native languages and is basically the standard. But there are many variations on JavaScript that are used.
- 6. ECE 3822: Lecture 32, Slide 5 DOM (Document Object Model) • Document Object Model makes every addressable item in a web application an Object that can be manipulated for color, transparency, position, sound and behaviors. • Every HTML Tag is a DOM object
- 7. ECE 3822: Lecture 32, Slide 6 DOM (Document Object Model) DOM CSS HTML JavaScript
- 8. ECE 3822: Lecture 32, Slide 7 What is a Framework? • Software Framework designed to reduce overhead in web development • Types of Framework Architectures – Model-View-Controller (MVC) – Push vs Pull Based • Most MVC Frameworks user push-based architecture “action based” (Django, Ruby on Rails, Symfony, Stripes) • Pull-based or “component based” (Lift, Angular2, React) – Three Tier Organization • Client (Usually the browser running HTML/Javascipt/CSS) • Application (Running the Business Logic) • Database (Data Storage) • Types of Frameworks – Server Side: Django, Ruby on Rails – Client Side: Angular, React, Vue
- 9. ECE 3822: Lecture 32, Slide 8 Framework Framework DOM CSS HTML JavaScript
- 10. ECE 3822: Lecture 32, Slide 9 Javascript Frameworks • AngularJS/Angular 2 • ASP.net • React • Polymer 1.0 • Ember.js • Vue.js http://hotframeworks.com
- 11. ECE 3822: Lecture 32, Slide 10 MVC (Model View Controller) • A Web Application Development Framework • Model (M): – Where the data for the DOM is stored and handled) – This is where the backend connects • View (V): – Think of this like a Page which is a single DOM – Where changes to the page are rendered and displayed • Control (C): – This handles user input and interactions • Buttons • Forms • General Interface
- 12. ECE 3822: Lecture 32, Slide 11 MVC Model Controller Model View
- 13. ECE 3822: Lecture 32, Slide 12 BACKEND DEVELOPMENT
- 14. ECE 3822: Lecture 32, Slide 13 What is a Backend? • All of the awesome that runs your application. • Web API – Connection layer between the frontend and backend – Connected through API calls (POST, GET, PUT, etc. ) – Transmit Content from the Backend to the Frontend commonly in JSON Blobs • Service Architecture that drives everything (Where all the logic is)
- 15. ECE 3822: Lecture 32, Slide 14 What is a WebAPI? • The intermediate layer between front end and back-end systems • A “must have” if your APIs will be consumed by third-party services • Attention to details: – How consumable is the API (signature, content negotiation)? – Does it comply with standards (response codes, etc.)? – Is it secure? – How do you handle multiple versions? – Is it truly RESTful?
- 16. ECE 3822: Lecture 32, Slide 15 Representational State Transfer (REST) • Client-server • Stateless • Resource-based (vs. remote procedure call) • HTTP methods (GET, POST, PUT, DELETE) • Side Effects • It’s a style, not a standard • Don’t hate on HATEOAS
- 17. ECE 3822: Lecture 32, Slide 16 WebAPI Terms • GET – “read” • POST – “insert” (collection) • PUT – “replace” • DELETE – “remove” • PATCH – “update” • Custom (proceed with caution)
- 18. ECE 3822: Lecture 32, Slide 17 Web Status Codes • 200 – OK – things are great (return the item) • 201 Created – after POST (HATEOAS – return location) • 204 No Content (i.e. successful DELETE) • 400 – Bad Request (validation error, missing parms, etc.) • 401 – Unauthorized – Who are you? • 403 – Forbidden – No soup for you • 404 – Not Found
- 19. ECE 3822: Lecture 32, Slide 18 Popular Tools Development Tools: • Chrome/Firefox Developer Tools • Postman (API) • Dreamweaver • Git / SourceTree Analytics Tools: • Google/Adobe Analytics
- 20. ECE 3822: Lecture 32, Slide 19 Chrome Development Tools Demo • Demo Time!
- 21. ECE 3822: Lecture 32, Slide 20 Tools for Testing WebAPI • Postman Chrome extension http://bit.ly/postmanext • Fiddler by Telerik http://www.Telerik.com/fiddler
- 22. ECE 3822: Lecture 32, Slide 21 WebAPI Demo Demo Time!
- 23. ECE 3822: Lecture 32, Slide 22 APPENDIX
- 24. ECE 3822: Lecture 32, Slide 23 Hypermedia as the Engine of Application State (HATEOAS) • Hypermedia is the key • It all starts at a URL • Resources are returned • Media types and locations are included • References based on state
- 25. ECE 3822: Lecture 32, Slide 24 What is Angular • MVC Structure • Framework • Single Page Application (SPA) • Client Side Template • Testing
- 26. ECE 3822: Lecture 32, Slide 25 Why Angular? New Developers • Popularity • Demand • Support and Resources • Front End Seasoned Developers • Structured and Opinionated Framework • Productivity • Consistency Team Leads • Efficiency • Longevity
- 27. ECE 3822: Lecture 32, Slide 26 Angular vs. Angular 2 • Angular 2 – Component Based UI – More Modular Design – TypeScript – Backwards Compatible – Faster • Angular 1 – Structured MVC Framework – Separation of HTML and Logic – Client Side Templating
- 28. ECE 3822: Lecture 32, Slide 27 Angular vs. Angular2 angular.module('myModule') .controller('myController',function(){ }) <body> <div ng-controller="myController"> </div> </body> import { Component } from '@angular/core' @Component({ selector: 'my-app', template: `` }) export class MyAppComponent { } <my-app></my-app>
- 29. ECE 3822: Lecture 32, Slide 28 Typescript JavaScript var num = 5; var name = "Speros"; var something = 123; var list = [1,2,3]; function square(num) { return num * num; } TypeScript var num: number = 5; var name: string = "Speros" var something: any = 123; var list: Array<number> = [1,2,3]; function square(num: number): number { return num * num; }
- 30. ECE 3822: Lecture 32, Slide 29 Typescript JavaScript var Person = (function () { function Person(name) { this.name = name; } return Person; }()); var aPerson = new Person("Ada"); TypeScript class Person { constructor(public name: string){ } } var aPerson = new Person("Ada Lovelace");
- 31. ECE 3822: Lecture 32, Slide 30 Building Blocks • Directives – Component – Templates (HTML), Styles (CSS), & Logic (JavaScript) – Attribute – Styling HTML – Structural – Manipulating HTML • Data Flow – Interpolation – Variable Printing in Templates – Event Binding – Trigger Events – 2-Way Binding – Variables updated in real time • Providers – Services • Reusable Logic • Data Storing and Manipulation – Libraries
- 32. ECE 3822: Lecture 32, Slide 31 Component Directives "…reusable building blocks for an application" Components have: – HTML – CSS – JavaScript
- 33. ECE 3822: Lecture 32, Slide 32 Learn Angular/Angular2 http://www.learn-angular.org/ http://learnangular2.com/
- 34. ECE 3822: Lecture 32, Slide 33 How does React fit MVC? Controller Model View
- 35. ECE 3822: Lecture 32, Slide 34 Flux Model Data Flow Action Dispatcher Store View Action Flow Action Dispatcher Store View Action
- 36. ECE 3822: Lecture 32, Slide 35 React Components // Create a component name MessageComponent var MessageComponent = React.createClass({ render: function() { return ( <div>{this.props.message}</div> ); } }); // Render an instance of MessageCoponent into document body ReactDOM.render( <MessageComponent message=“Hello!” /> document.body );
- 37. ECE 3822: Lecture 32, Slide 36 React Components // Create a component name MessageComponent var MessageComponent = React.createClass({ render: function() { return ( <div>{this.props.message}</div> ); } }); // Render an instance of MessageCoponent into document body ReactDOM.render( <MessageComponent message=“Hello!” /> document.body ); What is JSX?
- 38. ECE 3822: Lecture 32, Slide 37 React Components // Create a component name MessageComponent var MessageComponent = React.createClass({ render: function() { return ( <div>{this.props.message}</div> ); } }); // Render an instance of MessageCoponent into document body ReactDOM.render( <MessageComponent message=“Hello!” /> document.body ); What is JSX?
- 39. ECE 3822: Lecture 32, Slide 38 React
- 40. ECE 3822: Lecture 32, Slide 39 Learn React https://www.codecademy.com/lrn/react-101 https://css-tricks.com/learning-react-redux/
- 41. ECE 3822: Lecture 32, Slide 40 Intro to Knockout • An MVVM library • Automatic UI refresh and updates • Reusable templates • Can be used with nearly any framework • Focused on data binding • Small library size jQuery Knockout Ember Angular
- 42. ECE 3822: Lecture 32, Slide 41 MVVM (Model, View, View-Model) View – Defines structure and layout of UI Model – Domain Model – Data Model – Business logic View Model – Intermediary between M/V – Handles View Logic – Deals with State Change
- 43. ECE 3822: Lecture 32, Slide 42 Learn Knockout http://learn.knockoutjs.com/#/?tutorial=intro
Editor's Notes
- #3: Availability: The uptime of a website is absolutely critical to the reputation and functionality of many companies. For some of the larger online retail sites, being unavailable for even minutes can result in thousands or millions of dollars in lost revenue, so designing their systems to be constantly available and resilient to failure is both a fundamental business and a technology requirement. High availability in distributed systems requires the careful consideration of redundancy for key components, rapid recovery in the event of partial system failures, and graceful degradation when problems occur. Performance: Website performance has become an important consideration for most sites. The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention. As a result, creating a system that is optimized for fast responses and low latency is key. Reliability: A system needs to be reliable, such that a request for data will consistently return the same data. In the event the data changes or is updated, then that same request should return the new data. Users need to know that if something is written to the system, or stored, it will persist and can be relied on to be in place for future retrieval. Scalability: When it comes to any large distributed system, size is just one aspect of scale that needs to be considered. Just as important is the effort required to increase capacity to handle greater amounts of load, commonly referred to as the scalability of the system. Scalability can refer to many different parameters of the system: how much additional traffic can it handle, how easy is it to add more storage capacity, or even how many more transactions can be processed. Manageability: Designing a system that is easy to operate is another important consideration. The manageability of the system equates to the scalability of operations: maintenance and updates. Things to consider for manageability are the ease of diagnosing and understanding problems when they occur, ease of making updates or modifications, and how simple the system is to operate. (I.e., does it routinely operate without failure or exceptions?) Cost: Cost is an important factor. This obviously can include hardware and software costs, but it is also important to consider other facets needed to deploy and maintain the system. The amount of developer time the system takes to build, the amount of operational effort required to run the system, and even the amount of training required should all be considered. Cost is the total cost of ownership.
- #4: Break down into front end and back end
- #6: Javascript adoption with ES6, ‘don’t forget about babel’ Node.js: Swift 2: Apples vision for modern web programming Go: growing in popularity with startups TypeScript: Beauty of statically type Javascript (PS: Microsoft Technology)
- #8: HTML: Creates the DOM CSS: Decorates the DOM JavaScript: Modifies the DOM Dynamically Back End Language: (PHP, Python, Ruby, F#): Generates the DOM on the fly
- #9: MVC: separated (data model, logic, user interface) Push-based frameworks use actions that do the required processing, and then "push" the data to the view layer to render the results component-based: These frameworks start with the view layer, which can then "pull" results from multiple controllers as needed.
- #10: HTML: Creates the DOM CSS: Decorates the DOM JavaScript: Modifies the DOM Dynamically Back End Language: (PHP, Python, Ruby, F#): Generates the DOM on the fly
- #33: "…reusable building blocks for an application"
- #36: Action: Every action is sent to all stores via the callbacks After stores update they emit a change event Controller view listen for change events then retrieve updates from stores
- #42: Lightweight vs. full frameworks jQuery most lightweight