Ember, AngularJS, Backbone.js, Knockout, … eeem??

Slides:



Advertisements
Similar presentations
John Culviner johnculviner.com DEMO CODE:
Advertisements

Developing HTML5 Application using MVVM pattern Pekka Ylenius.
MVVM/MVC in Client-side SPA var subTitle = { value: ‘Single page application approaches and usage’, speaker1: ‘Stanimir Todorov, Product Developer Infragistics’,
JavaScript- Introduction. What it is and what it does? What it is? It is NOT Java It is NOT Server-side programming Users can see code It is a client-side.
Social Internet of Things Humans are connected to Internet. – Through Social Networking (e.g., facebook, foursquare, LinkedIn) Internet.
USING ANGULARJS WITH SITEFINITY
Agenda What is AJAX? What is jQuery? Demonstration/Tutorial Resources Q&A.
Single Page Applications with AngluarJS Bill Wolff Rob Keiser
NextGen Technology upgrade – Synerizip - Sandeep Kamble.
Ivan Marković MSP Lead Software Developer at SPAN d.o.o. m.
SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAngularJS AngularJS is a client-side JavaScript Framework for adding interactivity to HTML.
DIRECTOR + BACKBONE = :) JANESSA DET – LEAD FRONT-END THEFUTURE.FM.
JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages.
Button and Textbox. Input  Input objects are used to obtain input from the user viewing the webpage. They allow the user to interact with the Web. 
Abelian Kingdom Andrew, Kelvin and Peter. What is it? A web (browser) game MORPG on Google map Login with Facebook Interact with your friends And the.
Microsoft Virtual Academy Stacey Mulcahy | Technical Evangelist Christopher Harrison | Content Developer.
Play-By-Play Announcer: Todd Bashor Image credit:
+ BackBone.js By. Phil Sheperd. + What is BackBone BackBone is a Javascript Framework How is this different From jQuery or Prototype? Libraries vs Framework.
Canopy walk through Single-Page Apps (SPAs) Benjamin Howarth Freelancer, Code Gecko Umbraco UK Festival, Fri 30 th Oct 2015 CODE GECKO.
 An essential supporting structure of any thing  A Software Framework  Has layered structure ▪ What kind of functions and how they interrelate  Has.
Event Handling (the right way). A Simple Web Page Events - Summary The web page looks like this:
JavaScript Introduction inf385t Semantic Web 2/20/2006.
Mobile Applications With JQuery Mobile and VDF 17.1.
Building an End-to-End HTML5 App with ASP.NET MVC, EF and jQuery Dan Wahlin.
ASP.NET Core* Shahed Chowdhuri Sr. Technical WakeUpAndCode.com A Quick Overview of ASP.NET Core * aka ASP.NET 5 before.
Modern Development Technologies in SharePoint SHAREPOINT SATURDAY OMAHA APRIL, 2016.
ASP.NET Core* Shahed Chowdhuri Sr. Technical WakeUpAndCode.com A Quick Overview of ASP.NET Core RC2 * aka ASP.NET 5 before.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
Vineel Vutukuri. What is SPA? Why SPA? Pros & Cons When to use SPA?
Angular JS and SharePoint
Browser Routing Design Patterns in JS
WWU Hackathon May 6 & 7.
TechEd /1/2018 7:56 AM © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks.
Kendo UI Builder Bob Brennan
ASP MVP Web applications and Razor
Javascript and AJAX Willem Visser RW334.
AngularJS A Gentle Introduction John
CMPE 280 Web UI Design and Development October 24 Class Meeting
KnockoutJS -Pradeep Shet 31st August 2014.
CMPE 280 Web UI Design and Development November 7 Class Meeting
The Cliff Notes Version
Jessica Betts, Sophia Pandey, & Ryan Amundson
Angular (JS): A Framework for Dynamic Web Pages
Creating Single Page Applications with ASP.NET & Angular JS
jQuery The Easy JavaScript Nikolay Chochev Technical Trainer
Introduction to AngularJS
CMPE 280 Web UI Design and Development January 30 Class Meeting
A Quick Overview of ASP.NET Core 1.0
ASP.NET Core* MVC and Web API Shahed Chowdhuri
Secure Web Programming
Today’s Objectives Week 12 Announcements ASP.NET
CMPE 280 Web UI Design and Development January 29 Class Meeting
An Introduction to Animation
Flask Web Frameworks for Python
Lighting Up Real-time Web Communications with SignalR
Chengyu Sun California State University, Los Angeles
Lecture 12: The Fetch Api and AJAx
ASP.NET MVC Web Development
ASP.NET Imran Rashid CTO at ManiWeber Technologies.
Chengyu Sun California State University, Los Angeles
PART 1.
Top-Rated AngularJs Development Company in India
05 | An Introduction to AngularJS
Chengyu Sun California State University, Los Angeles
CMPE 280 Web UI Design and Development November 8 Class Meeting
© 2017, Mike Murach & Associates, Inc.
CMPE 280 Web UI Design and Development August 27 Class Meeting
Modern Front-end Development with Angular JS 2.0
Introduction to ASP.NET MVC
Presentation transcript:

Ember, AngularJS, Backbone.js, Knockout, … eeem?? Aleš Rosina, SAOP d.o.o.

Not yet another JS I have jQuery, why using anything else?

Single Page Aplication (SPA)

MVC pattern

RESTfull API aka ASP.NET WebAPI GET, POST, PUT, DELTE

Tools

„What HTML would have been had it been designed for web apps“ Largest community Google, Nike, msnbc.com Size: 36K

Dependecies jQuery or jQueryLite, if jQuery not present

MVC Model Routing Controlers View $scope – attributes of it – not a „real“ model Routing Maps URLs to templates and vice versa Controlers View aka Template

Simple example Index.html http://jsfiddle.net/rszmu/ function MainCtrl($scope) { // Model initialisation $scope.userName = 'world'; $scope.greet = function() { // Event handler $scope.userName = $scope.userName.toUpperCase(); $scope.message = "Hello " + $scope.userName; } Index.html <div ng-app ng-controller="MainCtrl"> <input type="text" ng-model="userName" /> <button ng-click="greet()">Click here!</button> <h3>{{message}}</h3> </div>

„Gives structure to web apps with MVC“ Quite big community Twitter, Foursquare, SoundCloud Size: 6.4K

Dependencies jQuery or Zepto Underscore.js Json2.js <script type="text/template" id="item-template"> <li> <%= Name %> </li> </script>

MVC Model View Controller Router Collection Template Maps URLs to function

„Framework for creating ambitious web applications“ New, getting traction (v1.0 in 2013) Grupon, Zendesk, Square Size: 69K

Dependencies jQuery Handlebars.js <script type="text/x-handlebars" data-template-name="answer"> <a href="#" class="author-name">{{ answer.author.name }}</a> <span class="status-info">respondeu:</span> {{#if answer.created_at}} {{datetime answer.created_at}} {{/if}} <p class="input-user">{{ answer.content.text }}</p> </script>

MVC Model Routers Controlers Views Uses JS objects with getters and setters Routers Maps URLs to states and vice versa Controlers Where all the magic happens Views Always associated with a template

Core app Index.html var App = Em.Application.create(); App.ApplicationView = Em.View.extend({ templateName: 'application' }); App.ApplicationController = Em.View.extend({ App.Router = Em.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/' }) App.initialize(); Index.html (...) <body> <script type="text/x-handlebars" data-template-name="application"> <h1>Hello World!</h1> </script> </body>

Another example Index.html http://jsfiddle.net/qQ382/ App = Ember.Application.create({}); App.wife = Ember.Object.create({ householdIncome: 80000 }); App.husband = Ember.Object.create({ householdIncomeBinding: 'App.wife.householdIncome' Ember.run.later(function() { // someone gets a raise App.husband.set('householdIncome', 90000); }, 3000); Index.html <script type="text/x-handlebars" > Wifes income: {{App.wife.householdIncome}}<br/> Husbands income: {{App.husband.householdIncome}} </script>

Which one is best for me? Picking a Javascript framework isn't about preference. It's about what best fits your project. by Lauren Orsini from readwrite.com

Examples