SlideShare a Scribd company logo
Javascript Frameworks
for Well Architected, Immersive Web Apps




                  Daniel Nelson
          Centresource Interactive Agency
A description of the problem
    and what we are seeking in a solution
An example unpacked
Traditional MVC Web App

Recommended for you

In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces

The document summarizes a presentation on exploring JSF 2.0 and PrimeFaces, highlighting new features in JSF 2.0 such as Facelets, AJAX support, resource handling, and navigations, and how PrimeFaces builds on JSF 2.0 with additional features like themes, mobile support, and an extensive component library.

myfacesgoogle guicewebflow
Implicit objects advance Java
Implicit objects advance JavaImplicit objects advance Java
Implicit objects advance Java

This is the most important concept in advance java. Why java is so much popular than other? answer is its implicit objects. It provides many implicit object in the library. So you don't need to declare object to use it. You just have to use whenever you need it.

javaadvanced javaimplicit object
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS

Workshop Isomorphic Web Apps with ReactJS: - Universal web apps - Isomorphic - Server Side Rendering (SSR) with ReactJS - Server Side Rendering with Redux - Server Side Rendering with React Router - Server Side Rendering: server.js - Main Entry Point - Server Side Rendering: server.js - HTML Template - Client main entry point: client.js - Webpack bundles - Avoiding FOUC - Webpack ExtractTextPlugin - Webpack code splitting - React Router - Configuration with Plain Routes - React Router - Dynamic Routing & WebPack - Dynamic Routing with new Reducers - Combining new Reducers - ReducerRegistry - Data fetching before rendering - React Router + Redux + Redial: Server Side - React Router + Redux + Redial: provideHooks - React Router + Redux + Redial: Client Side - SEO friendly universal web apps - React-Helmet - React-Helmet - Server Side Rendering Presentado por ingeniero: Marc Torrent

appsdeveloperdevelopers
Traditional MVC Web App


          Model
Traditional MVC Web App


          Model


         Controller
Traditional MVC Web App


          Model


         Controller


           View
Traditional MVC Web App


             Model
Server


            Controller


              View

Recommended for you

Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics

The document provides information on Node.js, including its definition, advantages, companies that use it, and basic terminology. Node.js is a server-side JavaScript platform that allows building fast and scalable network applications. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient for data-intensive real-time apps. Some key advantages are its use of JavaScript, the fast V8 engine, support for building highly scalable web apps, and thousands of available modules. Major companies like Microsoft, Yahoo, and LinkedIn use Node.js. Basic terminology discussed includes asynchronous programming, npm, Express framework, modules, and REPL.

mongodbexpress.jsangular.js
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen

The document discusses the Atlassian plugin development platform. It provides an overview of key features like the Shared Application Layer, Template Renderer, Plugins Framework, and REST APIs. It also demonstrates how to use these features to build plugins that integrate with Atlassian applications, render templates, schedule jobs, internationalize strings, and more. The platform is targeted at plugin developers and supported by a dedicated team focused on documentation and backwards compatibility.

Medium TechTalk — iOS
Medium TechTalk — iOSMedium TechTalk — iOS
Medium TechTalk — iOS

Grant Oladipo - Rendering the post view Elizabeth Ford - API caching Jimmy O'Neill - Singleton overuse Vinicius Baggio Fuentes - iOS build systems

Traditional MVC Web App

          Model


         Controller


           View


Server
Traditional MVC Web App

          Model

         Controller

           View

Server
Traditional MVC Web App

          Model

         Controller

           View

Server
                      My Web App
                      HTML
Traditional MVC Web App

          Model

         Controller

           View

Server
                       My Web App
                      HTTP

Recommended for you

Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017

Use React with Node, webpack, Redux and React Router to build an app with isomorphic architecture. ForwardJS 2017.

nodewebpackreact
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...

The document discusses the JavaScripters community, which connects front-end engineers to share knowledge of JavaScript concepts and frameworks. It provides information on upcoming events focused on topics like React JS, Angular, and TypeScript. The document also lists some common mistakes made by Angular developers, such as not following dependency injection and improper use of ng-if vs ng-show.

javascriptersjavascript
AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI

The document discusses modernizing plugin UIs for Atlassian products. It covers using Soy for templating, implementing pretty URLs, using pushstate for navigation history, rendering templates on both the server and client, injecting page data, defining JavaScript modules, and asynchronously loading resources to improve performance. Examples are provided for how to implement these techniques in Atlassian plugins.

Traditional MVC Web App

          Model

         Controller

           View

Server
                       My Web App
                      HTML
Without the Refresh

          Model

         Controller

           View

Server
Without the Refresh

          Model

         Controller

           View

Server
                       My Web App
                      HTML+JS
Without the Refresh

          Model

         Controller

           View

Server
                       My Web App
                      XHR

Recommended for you

Intro to emberjs
Intro to emberjsIntro to emberjs
Intro to emberjs

Ember.js is a JavaScript MVC framework for building single-page web applications. It uses conventions over configurations and includes features like two-way data binding, routing and templates using Handlebars. Key concepts in Ember include models, routes, controllers and templates which work together in a defined workflow. Templates are used to display dynamic data from models and controllers handle updating the view. Routing in Ember maps URLs to routes and controllers. Ember Data provides a standard way to handle data persistence and normalization of models.

Angular vs React for Web Application Development
Angular vs React for Web Application DevelopmentAngular vs React for Web Application Development
Angular vs React for Web Application Development

- Front-end frameworks like Angular and React use component-based architectures, with components having life-cycle hooks and handling their own state. - Both support data binding, but Angular uses two-way binding while React uses one-way binding. Angular also supports mutable data through services. - Both support routing, with Angular having a single built-in router and React having multiple options through libraries like React Router. - Other similarities include support for styling components and testing with libraries like Jasmine, though React testing approaches vary more between projects.

 
by FITC
web designweb developmentweb unleashed 2017
Go Fullstack: JSF for Public Sites (CONFESS 2013)
Go Fullstack: JSF for Public Sites (CONFESS 2013)Go Fullstack: JSF for Public Sites (CONFESS 2013)
Go Fullstack: JSF for Public Sites (CONFESS 2013)

Slides for session Go Fullstack: JSF for public sites by Michael Kurz held at the CONFESS 2013 in Vienna/Austria. This is an updated version of the same session held at CONFESS 2012 including JSF 2.2 view actions. The examples for this session can be found at https://github.com/jsflive (see slides for details).

javajavaserver facesjsf
Without the Refresh

          Model

         Controller

           View

Server
                       My Web App
                      JSON
How do we render the response?
Partials


<h1>My Web App</h1>

<div class="blurbs">
  <%= render :partial => "blurb",

</div>
             :collection => @blurbs %>        My Web App
<div class="blob">
  <%= render "blob" %>
</div>
Partials


<h1>My Web App</h1>

<div class="blurbs">
  <%= render :partial => "blurb",

</div>
             :collection => @blurbs %>        My Web App
<div class="blob">
  <%= render "blob" %>
</div>

Recommended for you

StrongLoop Node.js API Security & Customization
StrongLoop Node.js API Security & CustomizationStrongLoop Node.js API Security & Customization
StrongLoop Node.js API Security & Customization

API fine grained Authorization using Roles and ACLs in LoopBack Connecting authentication to the front end Third party and social (facebook, twitter) logins using OAuth2 Adding Node middleware for proxying, authentication, and traffic throttling

node.jsnodenodejs
ParisJS #10 : RequireJS
ParisJS #10 : RequireJSParisJS #10 : RequireJS
ParisJS #10 : RequireJS

The document discusses dependency management in JavaScript using RequireJS. It introduces RequireJS as a script module loader that handles dependencies and avoids global namespace pollution. It demonstrates how to define modules with dependencies using AMD (Asynchronous Module Definition) and the define() function. It shows examples of using RequireJS to load configuration, models, views and plugins. It also discusses optimizing modules for production using the r.js optimizer to compile and minify code.

modulesjavascript
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...

This document discusses how to build rich mobile user experiences using web standards like HTML5, CSS3, and JavaScript. It covers various HTML5 features such as new elements, forms, video/audio, geolocation and caching. It also discusses CSS techniques including transforms, transitions, animations and vendor-specific properties. Challenges with fixed positioning, touch events and performance are addressed. The document promotes building web apps that are native-like using frameworks like jQTouch and Sencha Touch.

htmlipadframeworks
Partials



json_response = {
  :html => render(:partial => "blurb",
                  :collection => @blurbs),
                                              My Web App
  :other_info => "blah"
}
Sending HTML in the JSON

          Model

         Controller

           View

Server
                       My Web App
                      XHR
Sending HTML in the JSON

          Model

         Controller

           View

Server
                       JSON
                      My Web App
                        with
                       HTML
Is this a good solution?

Recommended for you

Wt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side frameworkWt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side framework

Angular JS is a JavaScript framework used for building single-page applications. It uses MVC architecture with models for data, views for displaying data, and controllers for logic. The document discusses key Angular JS concepts like directives, expressions, controllers, filters, tables, modules, forms, includes, views, and internationalization. Directives extend HTML, expressions bind data to HTML, and controllers control interactions. Modules separate code into logical units. Forms provide data binding and validation. Views allow single-page applications with multiple views on one page.

client and server side frameworkwt
AspNetWhitePaper
AspNetWhitePaperAspNetWhitePaper
AspNetWhitePaper

The document discusses trends toward browser-based, client-side development and simpler yet more powerful products. It describes building a web-based document viewer using the Accusoft Pegasus ASP.NET Imaging SDK. The application allows searching a document library and viewing documents. Code examples show creating search and view pages, loading a document into the viewer, and JavaScript for viewer controls.

jquery tutorial
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application

React.js has taken the web development world by storm, and for good reason: React offers a declarative, component-oriented approach to building highly-scalable web UIs. But how can we take advantage of a JavaScript library like React in our server-side PHP applications. In this talk l cover the different ways React.js can be integrated into an existing PHP web application: from a client-side only approach to multiple techniques that support full server-side rendering with a Node.js server or PHP’s v8js. I also discuss the trade-offs in each of these designs and the challenges involved with adding React to a PHP site. Most importantly, I consider the higher-level issue of how to improve view cohesion across the client-server divide in a PHP application.

react.jsjavascriptphp
Degrades gracefully
Easy to test
It works
It works
(up to a point)

Recommended for you

Create an application with ember
Create an application with ember Create an application with ember
Create an application with ember

Ember is an open source JavaScript framework that uses a strict MVC pattern. It avoids boilerplate code and creates standard application architecture. Ember follows a pure MVC pattern to improve testability and keep application code modular. The document then discusses Ember's routing, templating with Handlebars, defining models and controllers, and the overall application lifecycle.

handlebarsember jsember
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers

Angular Js

webweb2.0javascript
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js

This document provides an overview of AngularJS, including its core features and concepts. It discusses how AngularJS is a client-side JavaScript framework that uses MVC architecture. Key points covered include two-way data binding, templates, dependency injection, modules, controllers, views, models, scopes, filters, services, and directives. Custom directives and their creation are demonstrated. The document aims to give attendees an introduction to AngularJS and its basic building blocks.

web developmentprogrammingjavascript
A More Accurate Picture

            Model       Browser
          Controller
                             View Logic
          View Logic

Server
                        My Web App
                       XHR
What happens when the front
 end of the application becomes
as sophisticated as the back end?
What Happened to our MVC?
                       Browser
                             JS Model
           Model
                           JS Controller
         Controller
                            View Logic
         View Logic

Server
                       My Web App
                      XHR
A better way

Recommended for you

ASP.NET MVC as the next step in web development
ASP.NET MVC as the next step in web developmentASP.NET MVC as the next step in web development
ASP.NET MVC as the next step in web development

This document discusses ASP.NET MVC, an alternative web development framework to ASP.NET Web Forms. It provides an overview of MVC patterns and how they are implemented in ASP.NET MVC, including features like controllers, actions, views, routing and unit testing support. Key benefits of ASP.NET MVC cited include testability, flexibility and separation of concerns compared to Web Forms. A sample application is outlined to demonstrate typical MVC concepts and components.

asp.netmvc.net framework
Angular beans
Angular beansAngular beans
Angular beans

This document introduces AngularBeans, which aims to integrate AngularJS with Java EE backends using CDI. Some key points: - AngularBeans allows defining Angular services using CDI beans, and enables features like dependency injection, JSON-RPC calls, and real-time capabilities between the frontend and backend. - It supports concepts of single-page applications and thin server architectures. AngularBeans services can make HTTP requests, handle events, and communicate over websockets. - Examples show how to create an AngularBean that exposes methods to the frontend, handle requests and return responses, access the backend via JSON-RPC calls, and implement real-time functionality using events and websockets.

javascriptsockjsangularjs;java;javaee;cdi;html5
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs

AngularJS is an open source JavaScript framework for building dynamic web applications. It enhances HTML with custom directives and bindings to enrich client-side web applications with reusable components. Key features include two-way data binding, reusable components, support for MVC/MVVM design patterns, end-to-end testing, cross-browser compatibility, and services. AngularJS allows developers to organize applications into modules and controllers to keep code clean and reusable.

angularjswebmvc
Decouple
Two Applications


Server
                                 Browser
   Model                               Model
                       JSON
                REST




 Controller                           Controller
                 API




                          JSON

                                           View
How do we achieve this?
Rails + Javascript Framework

Recommended for you

Ng-init
Ng-init Ng-init
Ng-init

This document provides an overview of AngularJS including why to use it, what it is, and its key concepts. It discusses AngularJS directives, filters, data binding, modules, controllers, dependencies, services, and routing. It also includes code examples and lists additional tutorial resources. The document aims to introduce the basics of AngularJS and how it can be used to build dynamic and responsive single-page web applications.

googleigcnovavision
Ng-init
Ng-init Ng-init
Ng-init

This document provides an overview of AngularJS including why to use it, what it is, key concepts like directives, filters, data binding, modules, controllers, dependencies, services, and routing. It also includes code examples and lists additional tutorial resources. The agenda outlines explaining why AngularJS, what it is, and covering directives, modules, controllers, dependencies, services, and routing. Example code is provided to demonstrate directives, controllers, and using the $http service.

angularjsigcnovavision
Python Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - AppenginePython Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - Appengine

Google App Engine provides a platform for building and hosting scalable web applications. It allows developers to write applications in Python, Java, Go or PHP and handle all the complexities of scaling an application. The document demonstrates building a simple Stack Overflow clone called App Overflow on App Engine, including adding user authentication, storing and querying data, and using services like Memcache, Images and Task Queue. It also discusses how App Engine handles scalability automatically through its distributed architecture and services.

python irelandpythonappengine
Rails + Javascript Framework
 • AngularJS

 • Backbone.js

 • Batman

 • ExtJS/ExtDirect

 • Javascript   MVC
 • Knockout.js

 • Spine

 • SproutCore
What are we looking for?
What are we looking for?
in general
• documentation     & community
• testability

• ability   to organize code
• opinionated
What are we looking for?
in general
• documentation     & community
• testability

• ability   to organize code
• opinionated

Recommended for you

Angular js
Angular jsAngular js
Angular js

AngularJS is a JavaScript framework that allows developers to create single-page applications. It provides features like data binding, directives, dependency injection and MVC architecture. The presentation provided an overview of AngularJS, its core features and concepts like modules, controllers, services and routing. Key benefits of AngularJS include building reusable components, easier testing and single page application capabilities.

information technologyeducation
Angular js
Angular jsAngular js
Angular js

The document provides an overview of AngularJS, including its core concepts and how it can be used with Java frameworks like Spring, Struts, and Hibernate. AngularJS is an open-source JavaScript framework that assists with building single-page applications using MVC architecture. It allows developers to specify custom HTML tags and directives to control element behavior. The document then discusses key AngularJS concepts like data binding, directives, expressions, filters, controllers, dependency injection, views/routing, and services. It provides examples of how these concepts work and how AngularJS can integrate with Java frameworks in a sample reader application divided into multiple sub-projects.

AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin

AngularJS is a very powerful JavaScript library. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

angularjsvipin mundayadvipin
What are we looking for?
in general                       in particular
• documentation     & community • decouple GUI from
                                  implementation logic
• testability
                                 • persisting   data abstracts XHR
• ability   to organize code
                                 • sensible   routing (for deep
• opinionated                      linking)
                                 • compatible with other tools
                                   (such as jQuery)
AngularJS
Documentation & community
        http://angularjs.org
Testability
AngularJS comes with testing built in
• Jasmine   & “e2e”
• every    step of the angularjs.org tutorial shows how to test

Fits naturally into the Rails testing ecosystem
• Jasmine   for unit specs
• RSpec    (or Cucumber) + Capybara for integration specs
• easier   in Rails than Angular alone

Recommended for you

Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications

Dev-day presented at Redu Educational Technologies about Ember.js. It points some Ember.js' benefits and gives an overview.

mvcjavascriptemberjs
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS

AngularJS is a JavaScript framework that allows developers to create single-page applications. It provides features like two-way data binding, dependency injection, templating, directives and services. The document defines AngularJS, describes its key features and provides examples of how to use controllers, scopes, expressions, services, factories, directives and more to build Angular applications. It also includes exercises for readers to practice creating an Angular movie app that displays now playing movies, actors and allows loading more movies.

angular
Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Introduction to ASP.NET MVC
Introduction to ASP.NET MVC

This document provides an introduction to ASP.NET MVC, covering the basics of MVC including models, views, controllers, routing, security, and more. It discusses how MVC fits into today's web development with frameworks built on top of HTTP. The "good parts" of MVC are highlighted, like separation of concerns, testability, and clean HTML output. Examples are provided throughout to demonstrate key MVC concepts.

Organization & Opinionation
  will become apparent as we explore the code
A demo app
               Rails 3.1 + AngularJS


http://github.com/centresource/angularjs_rails_demo
Everything dynamic
 class ApplicationController < ActionController::Base
protect_from_forgery

before_filter :intercept_html_requests

layout nil

private

def intercept_html_requests
  render('layouts/dynamic') if request.format == Mime::HTML
end

def handle_unverified_request
  reset_session
  render "#{Rails.root}/public/500.html", :status => 500, :layout => nil
end
views / layouts / dynamic.html.erb

<!doctype html>
<html xmlns:ng="http://angularjs.org/">
<head>
  <meta charset="utf-8">
  <title>Angular Rails Demo</title>
  <%= stylesheet_link_tag "application" %>
  <%= csrf_meta_tag %>
</head>
<body ng:controller="PhotoGalleryCtrl">

 <ng:view></ng:view>

  <script src="/assets/angular.min.js" ng:autobind></script>
  <%= javascript_include_tag "application" -%>
</body>
</html>

Recommended for you

Mvc3 crash
Mvc3 crashMvc3 crash
Mvc3 crash

This document provides an overview of ASP.NET MVC 3, including its features, technology stack, how it works, controllers, routing, action results, views, models, and jQuery integration. ASP.NET MVC 3 is a framework for building scalable and standards-based web applications using well-established design patterns and the power of ASP.NET. It features improvements like sessionless controllers, the ViewBag property, JSON model binding, and granular input validation.

MVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Rails

Examines the MVC design pattern and how Rails adheres to this powerful design pattern. Good introduction to Ruby on Rails framework.

Angular js anupama
Angular js anupamaAngular js anupama
Angular js anupama

AngularJS is a JavaScript MVC framework developed by Google for building dynamic web applications. It uses HTML as the template language and allows two-way data binding between models and views. Some key features of AngularJS include declarative templates, dependency injection, MVC pattern, routing, and reusable components. It aims to address limitations of HTML for building dynamic views by providing structure and organization to code through directives, modules, and other features. Training in AngularJS is available from the Victorious Digital institute.

angularjsvictoriousdigitalaffordablefees
Routes

/* app/assets/javascripts/controllers.js.erb */

$route.when('/photographers',
    {template: '<%= asset_path("photographers.html") %>', controller: PhotographersCtrl});

$route.when('/photographers/:photographer_id/galleries',
    {template: '<%= asset_path("galleries.html") %>', controller: GalleriesCtrl});

$route.when('/photographers/:photographer_id/galleries/:gallery_id/photos',
    {template: '<%= asset_path("photos.html") %>', controller: PhotosCtrl});

$route.otherwise({redirectTo: '/photographers'});

$route.onChange(function() {
  this.params = $route.current.params;
});
AngularJS controller


/* app/assets/javascripts/controllers.js.erb */

function GalleriesCtrl(Galleries, Photographers) {
  this.photographer = Photographers.get({ photographer_id: this.params.photographer_id });
  this.galleries = Galleries.index({ photographer_id: this.params.photographer_id });
}
Data binding


/* app/assets/templates/photographers.html */

<h1>Galleries of {{photographer.name}}</h1>

<ul id="galleries">
  <li class="gallery" ng:repeat="gallery in galleries">
    <a href="#/photographers/{{photographer.id}}/galleries/{{gallery.id}}/
photos">{{gallery.title}}</a>
  </li>
</ul>
Resources
/* app/assets/javascripts/services.js */

angular.service('Photographers', function($resource) {
 return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }});
});

angular.service('Galleries', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET',
isArray: true }});
});

angular.service('Photos', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method:
'GET', isArray: true }});
});

angular.service('SelectedPhotos', function($resource) {
 return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' },
                                                              'index': { method: 'GET', isArray: true },
                                                              'update': { method: 'PUT' },
                                                              'destroy': { method: 'DELETE' }});
});

Recommended for you

AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios

AngularJs is next big thing. Have a read for making strong your skills in AngularJs. We are sharing with you basic model of angularjs, How it is work and what are his basics. Enjoy the information.

angularjsdevelopment
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure

Recent advancements in the NIST-JARVIS infrastructure: JARVIS-Overview, JARVIS-DFT, AtomGPT, ALIGNN, JARVIS-Leaderboard

jarvisjarvis-dftalignn
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition

The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.

Resources
/* app/assets/javascripts/services.js.erb */
                                      */

angular.service('Photographers', function($resource) {
 return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }});
});

angular.service('Galleries', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET',
isArray: true }});
});

angular.service('Photos', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method:
'GET', isArray: true }});
});

angular.service('SelectedPhotos', function($resource) {
 return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' },
                                                              'index': { method: 'GET', isArray: true },
                                                              'update': { method: 'PUT' },
                                                              'destroy': { method: 'DELETE' }});
});
Resources
/* app/assets/javascripts/services.js.erb */
                                      */

angular.service('Photographers', function($resource) {
 return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }});
});        <%= photographers_path(':photographer_id') %>

angular.service('Galleries', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET',
isArray: true }});
});

angular.service('Photos', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method:
'GET', isArray: true }});
});

angular.service('SelectedPhotos', function($resource) {
 return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' },
                                                              'index': { method: 'GET', isArray: true },
                                                              'update': { method: 'PUT' },
                                                              'destroy': { method: 'DELETE' }});
});
Resources
/* app/assets/javascripts/services.js.erb */
                                      */

angular.service('Photographers', function($resource) {
 return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }});
});        <%= photographers_path(':photographer_id') %>

angular.service('Galleries', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET',
                   <%= photographers_galleries_path(':photographer_id', ':gallery_id') %>
isArray: true }});
});

angular.service('Photos', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method:
'GET', isArray: true }});
});

angular.service('SelectedPhotos', function($resource) {
 return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' },
                                                              'index': { method: 'GET', isArray: true },
                                                              'update': { method: 'PUT' },
                                                              'destroy': { method: 'DELETE' }});
});
Resources
/* app/assets/javascripts/services.js.erb */
                                      */

angular.service('Photographers', function($resource) {
 return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }});
});        <%= photographers_path(':photographer_id') %>

angular.service('Galleries', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET',
                   <%= photographers_galleries_path(':photographer_id', ':gallery_id') %>
isArray: true }});
});

angular.service('Photos', function($resource) {
                   <%= photographers_galleries_photos_path(':photographer_id', ':gallery_id') %>
 return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method:
'GET', isArray: true }});
});

angular.service('SelectedPhotos', function($resource) {
 return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' },
                                                              'index': { method: 'GET', isArray: true },
                                                              'update': { method: 'PUT' },
                                                              'destroy': { method: 'DELETE' }});
});

Recommended for you

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges

accommodate the strengths, weaknesses, threats and opportunities of autonomous vehicles

automotive self-driving car technology
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...

Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge. You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter. The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.

dartflutteropenssf
Resources
/* app/assets/javascripts/services.js.erb */
                                      */

angular.service('Photographers', function($resource) {
 return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }});
});        <%= photographers_path(':photographer_id') %>

angular.service('Galleries', function($resource) {
 return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET',
                   <%= photographers_galleries_path(':photographer_id', ':gallery_id') %>
isArray: true }});
});

angular.service('Photos', function($resource) {
                   <%= photographers_galleries_photos_path(':photographer_id', ':gallery_id') %>
 return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method:
'GET', isArray: true }});
});

angular.service('SelectedPhotos', function($resource) {
 return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' },
         <%= selected_photos_path(':selected_photo_id') %>    'index': { method: 'GET', isArray: true },
                                                              'update': { method: 'PUT' },
                                                              'destroy': { method: 'DELETE' }});
});
/* app/assets/javascripts/controllers.js.erb */
function PhotosCtrl(Photos, Galleries, Photographers, SelectedPhotos) {
  var self = this;

  self.photographer = Photographers.get({ photographer_id: this.params.photographer_id });
  self.gallery = Galleries.get({ photographer_id: this.params.photographer_id, gallery_id:
this.params.gallery_id });
  self.photos = Photos.index({ photographer_id: this.params.photographer_id, gallery_id:
this.params.gallery_id });
  self.selected_photos = SelectedPhotos.index();



    self.selectPhoto = function(photo) {
      var selected_photo = new SelectedPhotos({ selected_photo: { photo_id: photo.id } });
      selected_photo.$create(function() {
        self.selected_photos.push(selected_photo);
      });
    }

    self.deleteSelectedPhoto = function(selected_photo) {
      angular.Array.remove(self.selected_photos, selected_photo);
      selected_photo.$destroy({ selected_photo_id: selected_photo.id });
    }

    self.saveSelectedPhoto = function(selected_photo) {
      selected_photo.$update({ selected_photo_id: selected_photo.id });
      $('input').blur();
    }
}
/* app/assets/javascripts/controllers.js.erb */
function PhotosCtrl(Photos, Galleries, Photographers, SelectedPhotos) {
  var self = this;

  self.photographer = Photographers.get({ photographer_id: this.params.photographer_id });
  self.gallery = Galleries.get({ photographer_id: this.params.photographer_id, gallery_id:
this.params.gallery_id });
  self.photos = Photos.index({ photographer_id: this.params.photographer_id, gallery_id:
this.params.gallery_id });
  self.selected_photos = SelectedPhotos.index();



    self.selectPhoto = function(photo) {
      var selected_photo = new SelectedPhotos({ selected_photo: { photo_id: photo.id } });
      selected_photo.$create(function() {
        self.selected_photos.push(selected_photo);
      });
    }

    self.deleteSelectedPhoto = function(selected_photo) {
      angular.Array.remove(self.selected_photos, selected_photo);
      selected_photo.$destroy({ selected_photo_id: selected_photo.id });
    }

    self.saveSelectedPhoto = function(selected_photo) {
      selected_photo.$update({ selected_photo_id: selected_photo.id });
      $('input').blur();
    }
}
/* app/assets/javascripts/controllers.js.erb */
function PhotosCtrl(Photos, Galleries, Photographers, SelectedPhotos) {
  var self = this;

  self.photographer = Photographers.get({ photographer_id: this.params.photographer_id });
  self.gallery = Galleries.get({ photographer_id: this.params.photographer_id, gallery_id:
this.params.gallery_id });
  self.photos = Photos.index({ photographer_id: this.params.photographer_id, gallery_id:
this.params.gallery_id });
  self.selected_photos = SelectedPhotos.index();



    self.selectPhoto = function(photo) {
      var selected_photo = new SelectedPhotos({ selected_photo: { photo_id: photo.id } });
      selected_photo.$create(function() {
        self.selected_photos.push(selected_photo);
      });
    }

    self.deleteSelectedPhoto = function(selected_photo) {
      angular.Array.remove(self.selected_photos, selected_photo);
      selected_photo.$destroy({ selected_photo_id: selected_photo.id });
    }

    self.saveSelectedPhoto = function(selected_photo) {
      selected_photo.$update({ selected_photo_id: selected_photo.id });
      $('input').blur();
    }
}

Recommended for you

Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant

Password Rotation in 2024 is still Relevant

passwordmanagementrotation
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces

An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)

augmented realitycross realityvirtual reality
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf

In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.

social media hackerfacebook hackerhire a instagram hacker
/* app/assets/templates/photos.html */
<h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1>

<div id="outer_picture_frame">
  <div id="picture_frame">
    <div id="prev">&lsaquo;</div>
    <div id="photos" my:cycle>
      <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)"
ng:repeat="photo in photos">
        <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" />
        <span class="title">{{photo.title}}</span>
      </div>
    </div>
    <div id="next">&rsaquo;</div>
    <span class="caption">Click a photo to add it to your collection</span>
  </div>
</div>

<div id="selected_frame">
  <div id="selected_photos">
    <div class="selected_photo" ng:repeat="selected_photo in selected_photos">
      <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" />
      <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span>
      <form ng:submit="saveSelectedPhoto(selected_photo)">
        <input ng:model="selected_photo.title" />
      </form>
    </div>
  </div>
</div>
/* app/assets/templates/photos.html */
<h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1>

<div id="outer_picture_frame">
  <div id="picture_frame">
    <div id="prev">&lsaquo;</div>
    <div id="photos" my:cycle>
      <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)"
ng:repeat="photo in photos">
        <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" />
        <span class="title">{{photo.title}}</span>
      </div>
    </div>
    <div id="next">&rsaquo;</div>
    <span class="caption">Click a photo to add it to your collection</span>
  </div>
</div>

<div id="selected_frame">
  <div id="selected_photos">
    <div class="selected_photo" ng:repeat="selected_photo in selected_photos">
      <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" />
      <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span>
      <form ng:submit="saveSelectedPhoto(selected_photo)">
        <input ng:model="selected_photo.title" />
      </form>
    </div>
  </div>
</div>
/* app/assets/templates/photos.html */
<h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1>

<div id="outer_picture_frame">
  <div id="picture_frame">
    <div id="prev">&lsaquo;</div>
    <div id="photos" my:cycle>
      <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)"
ng:repeat="photo in photos">
        <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" />
        <span class="title">{{photo.title}}</span>
      </div>
    </div>
    <div id="next">&rsaquo;</div>
    <span class="caption">Click a photo to add it to your collection</span>
  </div>
</div>

<div id="selected_frame">
  <div id="selected_photos">
    <div class="selected_photo" ng:repeat="selected_photo in selected_photos">
      <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" />
      <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span>
      <form ng:submit="saveSelectedPhoto(selected_photo)">
        <input ng:model="selected_photo.title" />
      </form>
    </div>
  </div>
</div>
/* app/assets/templates/photos.html */
<h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1>

<div id="outer_picture_frame">
  <div id="picture_frame">
    <div id="prev">&lsaquo;</div>
    <div id="photos" my:cycle>
      <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)"
ng:repeat="photo in photos">
        <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" />
        <span class="title">{{photo.title}}</span>
      </div>
    </div>
    <div id="next">&rsaquo;</div>
    <span class="caption">Click a photo to add it to your collection</span>
  </div>
</div>

<div id="selected_frame">
  <div id="selected_photos">
    <div class="selected_photo" ng:repeat="selected_photo in selected_photos">
      <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" />
      <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span>
      <form ng:submit="saveSelectedPhoto(selected_photo)">
        <input ng:model="selected_photo.title" />
      </form>
    </div>
  </div>
</div>

Recommended for you

Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers

The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era. Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.

programmingcodingcivil engineering
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024

Everything that I found interesting about machines behaving intelligently during June 2024

quantumfaxmachine
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
Two way data binding


<form ng:submit="saveSelectedPhoto(selected_photo)">
  <input ng:model="selected_photo.title" />
</form>




self.saveSelectedPhoto = function(selected_photo) {
   selected_photo.$update({ selected_photo_id: selected_photo.id });
   $('input').blur();
 }
/* app/assets/templates/photos.html */
<h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1>

<div id="outer_picture_frame">
  <div id="picture_frame">
    <div id="prev">&lsaquo;</div>
    <div id="photos" my:cycle>
      <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)"
ng:repeat="photo in photos">
        <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" />
        <span class="title">{{photo.title}}</span>
      </div>
    </div>
    <div id="next">&rsaquo;</div>
    <span class="caption">Click a photo to add it to your collection</span>
  </div>
</div>

<div id="selected_frame">
  <div id="selected_photos">
    <div class="selected_photo" ng:repeat="selected_photo in selected_photos">
      <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" />
      <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span>
      <form ng:submit="saveSelectedPhoto(selected_photo)">
        <input ng:model="selected_photo.title" />
      </form>
    </div>
  </div>
</div>
/* app/assets/templates/photos.html */
<h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1>

<div id="outer_picture_frame">
  <div id="picture_frame">
    <div id="prev">&lsaquo;</div>
    <div id="photos" my:cycle>
      <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)"
ng:repeat="photo in photos">
        <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" />
        <span class="title">{{photo.title}}</span>
      </div>
    </div>
    <div id="next">&rsaquo;</div>
    <span class="caption">Click a photo to add it to your collection</span>
  </div>
</div>

<div id="selected_frame">
  <div id="selected_photos">
    <div class="selected_photo" ng:repeat="selected_photo in selected_photos">
      <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" />
      <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span>
      <form ng:submit="saveSelectedPhoto(selected_photo)">
        <input ng:model="selected_photo.title" />
      </form>
    </div>
  </div>
</div>
/* app/assets/javascripts/widgets.js */

angular.directive("my:cycle", function(expr,el){
   return function(container){
        var scope = this;
        var lastChildID = container.children().last().attr('id');

          var doIt = function() {
              var lastID = container.children().last().attr('id');
              if (lastID != lastChildID) {
                  lastChildID = lastID;
                  $(container).cycle({ fx: 'fade',
                                        speed: 500,
                                        timeout: 3000,
                                        pause: 1,
                                        next: '#next',
                                        prev: '#prev'});
              }
          }

          var defer = this.$service("$defer");
          scope.$onEval( function() {
              defer(doIt);
          });
      }
});

Recommended for you

BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL

Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.

blockchainweb3blockchain technology
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems

Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states. In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing. Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.

Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx

MuleSoft Meetup on APM and IDP

mulesoftai
Thank You
http://github.com/centresource/angularjs_rails_demo



                    @bluejade

More Related Content

What's hot

amis-adf-enterprise-mobility
amis-adf-enterprise-mobilityamis-adf-enterprise-mobility
amis-adf-enterprise-mobility
Luc Bors
 
243329387 angular-docs
243329387 angular-docs243329387 angular-docs
243329387 angular-docs
Abhi166803
 
Beginners' guide to Ruby on Rails
Beginners' guide to Ruby on RailsBeginners' guide to Ruby on Rails
Beginners' guide to Ruby on Rails
Victor Porof
 
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
Skills Matter
 
Implicit objects advance Java
Implicit objects advance JavaImplicit objects advance Java
Implicit objects advance Java
Darshit Metaliya
 
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
Visual Engineering
 
Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics
Aishura Aishu
 
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
Atlassian
 
Medium TechTalk — iOS
Medium TechTalk — iOSMedium TechTalk — iOS
Medium TechTalk — iOS
jimmyatmedium
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
 
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Community
 
AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI
colleenfry
 
Intro to emberjs
Intro to emberjsIntro to emberjs
Intro to emberjs
Mandy Pao
 
Angular vs React for Web Application Development
Angular vs React for Web Application DevelopmentAngular vs React for Web Application Development
Angular vs React for Web Application Development
FITC
 
Go Fullstack: JSF for Public Sites (CONFESS 2013)
Go Fullstack: JSF for Public Sites (CONFESS 2013)Go Fullstack: JSF for Public Sites (CONFESS 2013)
Go Fullstack: JSF for Public Sites (CONFESS 2013)
Michael Kurz
 
StrongLoop Node.js API Security & Customization
StrongLoop Node.js API Security & CustomizationStrongLoop Node.js API Security & Customization
StrongLoop Node.js API Security & Customization
jguerrero999
 
ParisJS #10 : RequireJS
ParisJS #10 : RequireJSParisJS #10 : RequireJS
ParisJS #10 : RequireJS
Julien Cabanès
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
David Kaneda
 
Wt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side frameworkWt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side framework
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
AspNetWhitePaper
AspNetWhitePaperAspNetWhitePaper
AspNetWhitePaper
tutorialsruby
 

What's hot (20)

amis-adf-enterprise-mobility
amis-adf-enterprise-mobilityamis-adf-enterprise-mobility
amis-adf-enterprise-mobility
 
243329387 angular-docs
243329387 angular-docs243329387 angular-docs
243329387 angular-docs
 
Beginners' guide to Ruby on Rails
Beginners' guide to Ruby on RailsBeginners' guide to Ruby on Rails
Beginners' guide to Ruby on Rails
 
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
 
Implicit objects advance Java
Implicit objects advance JavaImplicit objects advance Java
Implicit objects advance Java
 
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
 
Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics
 
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
 
Medium TechTalk — iOS
Medium TechTalk — iOSMedium TechTalk — iOS
Medium TechTalk — iOS
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
 
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
 
AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI
 
Intro to emberjs
Intro to emberjsIntro to emberjs
Intro to emberjs
 
Angular vs React for Web Application Development
Angular vs React for Web Application DevelopmentAngular vs React for Web Application Development
Angular vs React for Web Application Development
 
Go Fullstack: JSF for Public Sites (CONFESS 2013)
Go Fullstack: JSF for Public Sites (CONFESS 2013)Go Fullstack: JSF for Public Sites (CONFESS 2013)
Go Fullstack: JSF for Public Sites (CONFESS 2013)
 
StrongLoop Node.js API Security & Customization
StrongLoop Node.js API Security & CustomizationStrongLoop Node.js API Security & Customization
StrongLoop Node.js API Security & Customization
 
ParisJS #10 : RequireJS
ParisJS #10 : RequireJSParisJS #10 : RequireJS
ParisJS #10 : RequireJS
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
Wt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side frameworkWt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side framework
 
AspNetWhitePaper
AspNetWhitePaperAspNetWhitePaper
AspNetWhitePaper
 

Similar to Javascript Frameworks for Well Architected, Immersive Web Apps

Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Andrew Rota
 
Create an application with ember
Create an application with ember Create an application with ember
Create an application with ember
Chandra Sekar
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
jobinThomas54
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
Aayush Shrestha
 
ASP.NET MVC as the next step in web development
ASP.NET MVC as the next step in web developmentASP.NET MVC as the next step in web development
ASP.NET MVC as the next step in web development
Volodymyr Voytyshyn
 
Angular beans
Angular beansAngular beans
Angular beans
Bessem Hmidi
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
 
Ng-init
Ng-init Ng-init
Ng-init
Hamdi Hmidi
 
Ng-init
Ng-init Ng-init
Ng-init
Hamdi Hmidi
 
Python Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - AppenginePython Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - Appengine
Python Ireland
 
Angular js
Angular jsAngular js
Angular js
Angular jsAngular js
Angular js
Behind D Walls
 
AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
Vipin Mundayad
 
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications
Juliana Lucena
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
Filip Janevski
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Introduction to ASP.NET MVC
Introduction to ASP.NET MVC
Joe Wilson
 
Mvc3 crash
Mvc3 crashMvc3 crash
MVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Rails
codeinmotion
 
Angular js anupama
Angular js anupamaAngular js anupama
Angular js anupama
Anupama Prabhudesai
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
Learnimtactics
 

Similar to Javascript Frameworks for Well Architected, Immersive Web Apps (20)

Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
 
Create an application with ember
Create an application with ember Create an application with ember
Create an application with ember
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
 
ASP.NET MVC as the next step in web development
ASP.NET MVC as the next step in web developmentASP.NET MVC as the next step in web development
ASP.NET MVC as the next step in web development
 
Angular beans
Angular beansAngular beans
Angular beans
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
Ng-init
Ng-init Ng-init
Ng-init
 
Ng-init
Ng-init Ng-init
Ng-init
 
Python Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - AppenginePython Ireland Nov 2009 Talk - Appengine
Python Ireland Nov 2009 Talk - Appengine
 
Angular js
Angular jsAngular js
Angular js
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
 
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Introduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Mvc3 crash
Mvc3 crashMvc3 crash
Mvc3 crash
 
MVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Rails
 
Angular js anupama
Angular js anupamaAngular js anupama
Angular js anupama
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
 

Recently uploaded

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 

Recently uploaded (20)

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 

Javascript Frameworks for Well Architected, Immersive Web Apps

  • 1. Javascript Frameworks for Well Architected, Immersive Web Apps Daniel Nelson Centresource Interactive Agency
  • 2. A description of the problem and what we are seeking in a solution
  • 6. Traditional MVC Web App Model Controller
  • 7. Traditional MVC Web App Model Controller View
  • 8. Traditional MVC Web App Model Server Controller View
  • 9. Traditional MVC Web App Model Controller View Server
  • 10. Traditional MVC Web App Model Controller View Server
  • 11. Traditional MVC Web App Model Controller View Server My Web App HTML
  • 12. Traditional MVC Web App Model Controller View Server My Web App HTTP
  • 13. Traditional MVC Web App Model Controller View Server My Web App HTML
  • 14. Without the Refresh Model Controller View Server
  • 15. Without the Refresh Model Controller View Server My Web App HTML+JS
  • 16. Without the Refresh Model Controller View Server My Web App XHR
  • 17. Without the Refresh Model Controller View Server My Web App JSON
  • 18. How do we render the response?
  • 19. Partials <h1>My Web App</h1> <div class="blurbs"> <%= render :partial => "blurb", </div> :collection => @blurbs %> My Web App <div class="blob"> <%= render "blob" %> </div>
  • 20. Partials <h1>My Web App</h1> <div class="blurbs"> <%= render :partial => "blurb", </div> :collection => @blurbs %> My Web App <div class="blob"> <%= render "blob" %> </div>
  • 21. Partials json_response = { :html => render(:partial => "blurb", :collection => @blurbs), My Web App :other_info => "blah" }
  • 22. Sending HTML in the JSON Model Controller View Server My Web App XHR
  • 23. Sending HTML in the JSON Model Controller View Server JSON My Web App with HTML
  • 24. Is this a good solution?
  • 28. It works (up to a point)
  • 29. A More Accurate Picture Model Browser Controller View Logic View Logic Server My Web App XHR
  • 30. What happens when the front end of the application becomes as sophisticated as the back end?
  • 31. What Happened to our MVC? Browser JS Model Model JS Controller Controller View Logic View Logic Server My Web App XHR
  • 34. Two Applications Server Browser Model Model JSON REST Controller Controller API JSON View
  • 35. How do we achieve this?
  • 36. Rails + Javascript Framework
  • 37. Rails + Javascript Framework • AngularJS • Backbone.js • Batman • ExtJS/ExtDirect • Javascript MVC • Knockout.js • Spine • SproutCore
  • 38. What are we looking for?
  • 39. What are we looking for? in general • documentation & community • testability • ability to organize code • opinionated
  • 40. What are we looking for? in general • documentation & community • testability • ability to organize code • opinionated
  • 41. What are we looking for? in general in particular • documentation & community • decouple GUI from implementation logic • testability • persisting data abstracts XHR • ability to organize code • sensible routing (for deep • opinionated linking) • compatible with other tools (such as jQuery)
  • 43. Documentation & community http://angularjs.org
  • 44. Testability AngularJS comes with testing built in • Jasmine & “e2e” • every step of the angularjs.org tutorial shows how to test Fits naturally into the Rails testing ecosystem • Jasmine for unit specs • RSpec (or Cucumber) + Capybara for integration specs • easier in Rails than Angular alone
  • 45. Organization & Opinionation will become apparent as we explore the code
  • 46. A demo app Rails 3.1 + AngularJS http://github.com/centresource/angularjs_rails_demo
  • 47. Everything dynamic class ApplicationController < ActionController::Base protect_from_forgery before_filter :intercept_html_requests layout nil private def intercept_html_requests render('layouts/dynamic') if request.format == Mime::HTML end def handle_unverified_request reset_session render "#{Rails.root}/public/500.html", :status => 500, :layout => nil end
  • 48. views / layouts / dynamic.html.erb <!doctype html> <html xmlns:ng="http://angularjs.org/"> <head> <meta charset="utf-8"> <title>Angular Rails Demo</title> <%= stylesheet_link_tag "application" %> <%= csrf_meta_tag %> </head> <body ng:controller="PhotoGalleryCtrl"> <ng:view></ng:view> <script src="/assets/angular.min.js" ng:autobind></script> <%= javascript_include_tag "application" -%> </body> </html>
  • 49. Routes /* app/assets/javascripts/controllers.js.erb */ $route.when('/photographers', {template: '<%= asset_path("photographers.html") %>', controller: PhotographersCtrl}); $route.when('/photographers/:photographer_id/galleries', {template: '<%= asset_path("galleries.html") %>', controller: GalleriesCtrl}); $route.when('/photographers/:photographer_id/galleries/:gallery_id/photos', {template: '<%= asset_path("photos.html") %>', controller: PhotosCtrl}); $route.otherwise({redirectTo: '/photographers'}); $route.onChange(function() { this.params = $route.current.params; });
  • 50. AngularJS controller /* app/assets/javascripts/controllers.js.erb */ function GalleriesCtrl(Galleries, Photographers) { this.photographer = Photographers.get({ photographer_id: this.params.photographer_id }); this.galleries = Galleries.index({ photographer_id: this.params.photographer_id }); }
  • 51. Data binding /* app/assets/templates/photographers.html */ <h1>Galleries of {{photographer.name}}</h1> <ul id="galleries"> <li class="gallery" ng:repeat="gallery in galleries"> <a href="#/photographers/{{photographer.id}}/galleries/{{gallery.id}}/ photos">{{gallery.title}}</a> </li> </ul>
  • 52. Resources /* app/assets/javascripts/services.js */ angular.service('Photographers', function($resource) { return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('Galleries', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('Photos', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('SelectedPhotos', function($resource) { return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' }, 'index': { method: 'GET', isArray: true }, 'update': { method: 'PUT' }, 'destroy': { method: 'DELETE' }}); });
  • 53. Resources /* app/assets/javascripts/services.js.erb */ */ angular.service('Photographers', function($resource) { return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('Galleries', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('Photos', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('SelectedPhotos', function($resource) { return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' }, 'index': { method: 'GET', isArray: true }, 'update': { method: 'PUT' }, 'destroy': { method: 'DELETE' }}); });
  • 54. Resources /* app/assets/javascripts/services.js.erb */ */ angular.service('Photographers', function($resource) { return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }}); }); <%= photographers_path(':photographer_id') %> angular.service('Galleries', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('Photos', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('SelectedPhotos', function($resource) { return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' }, 'index': { method: 'GET', isArray: true }, 'update': { method: 'PUT' }, 'destroy': { method: 'DELETE' }}); });
  • 55. Resources /* app/assets/javascripts/services.js.erb */ */ angular.service('Photographers', function($resource) { return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }}); }); <%= photographers_path(':photographer_id') %> angular.service('Galleries', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET', <%= photographers_galleries_path(':photographer_id', ':gallery_id') %> isArray: true }}); }); angular.service('Photos', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('SelectedPhotos', function($resource) { return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' }, 'index': { method: 'GET', isArray: true }, 'update': { method: 'PUT' }, 'destroy': { method: 'DELETE' }}); });
  • 56. Resources /* app/assets/javascripts/services.js.erb */ */ angular.service('Photographers', function($resource) { return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }}); }); <%= photographers_path(':photographer_id') %> angular.service('Galleries', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET', <%= photographers_galleries_path(':photographer_id', ':gallery_id') %> isArray: true }}); }); angular.service('Photos', function($resource) { <%= photographers_galleries_photos_path(':photographer_id', ':gallery_id') %> return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('SelectedPhotos', function($resource) { return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' }, 'index': { method: 'GET', isArray: true }, 'update': { method: 'PUT' }, 'destroy': { method: 'DELETE' }}); });
  • 57. Resources /* app/assets/javascripts/services.js.erb */ */ angular.service('Photographers', function($resource) { return $resource('photographers/:photographer_id', {}, { 'index': { method: 'GET', isArray: true }}); }); <%= photographers_path(':photographer_id') %> angular.service('Galleries', function($resource) { return $resource('photographers/:photographer_id/galleries/:gallery_id', {}, { 'index': { method: 'GET', <%= photographers_galleries_path(':photographer_id', ':gallery_id') %> isArray: true }}); }); angular.service('Photos', function($resource) { <%= photographers_galleries_photos_path(':photographer_id', ':gallery_id') %> return $resource('photographers/:photographer_id/galleries/:gallery_id/photos', {}, { 'index': { method: 'GET', isArray: true }}); }); angular.service('SelectedPhotos', function($resource) { return $resource('selected_photos/:selected_photo_id', {}, { 'create': { method: 'POST' }, <%= selected_photos_path(':selected_photo_id') %> 'index': { method: 'GET', isArray: true }, 'update': { method: 'PUT' }, 'destroy': { method: 'DELETE' }}); });
  • 58. /* app/assets/javascripts/controllers.js.erb */ function PhotosCtrl(Photos, Galleries, Photographers, SelectedPhotos) { var self = this; self.photographer = Photographers.get({ photographer_id: this.params.photographer_id }); self.gallery = Galleries.get({ photographer_id: this.params.photographer_id, gallery_id: this.params.gallery_id }); self.photos = Photos.index({ photographer_id: this.params.photographer_id, gallery_id: this.params.gallery_id }); self.selected_photos = SelectedPhotos.index(); self.selectPhoto = function(photo) { var selected_photo = new SelectedPhotos({ selected_photo: { photo_id: photo.id } }); selected_photo.$create(function() { self.selected_photos.push(selected_photo); }); } self.deleteSelectedPhoto = function(selected_photo) { angular.Array.remove(self.selected_photos, selected_photo); selected_photo.$destroy({ selected_photo_id: selected_photo.id }); } self.saveSelectedPhoto = function(selected_photo) { selected_photo.$update({ selected_photo_id: selected_photo.id }); $('input').blur(); } }
  • 59. /* app/assets/javascripts/controllers.js.erb */ function PhotosCtrl(Photos, Galleries, Photographers, SelectedPhotos) { var self = this; self.photographer = Photographers.get({ photographer_id: this.params.photographer_id }); self.gallery = Galleries.get({ photographer_id: this.params.photographer_id, gallery_id: this.params.gallery_id }); self.photos = Photos.index({ photographer_id: this.params.photographer_id, gallery_id: this.params.gallery_id }); self.selected_photos = SelectedPhotos.index(); self.selectPhoto = function(photo) { var selected_photo = new SelectedPhotos({ selected_photo: { photo_id: photo.id } }); selected_photo.$create(function() { self.selected_photos.push(selected_photo); }); } self.deleteSelectedPhoto = function(selected_photo) { angular.Array.remove(self.selected_photos, selected_photo); selected_photo.$destroy({ selected_photo_id: selected_photo.id }); } self.saveSelectedPhoto = function(selected_photo) { selected_photo.$update({ selected_photo_id: selected_photo.id }); $('input').blur(); } }
  • 60. /* app/assets/javascripts/controllers.js.erb */ function PhotosCtrl(Photos, Galleries, Photographers, SelectedPhotos) { var self = this; self.photographer = Photographers.get({ photographer_id: this.params.photographer_id }); self.gallery = Galleries.get({ photographer_id: this.params.photographer_id, gallery_id: this.params.gallery_id }); self.photos = Photos.index({ photographer_id: this.params.photographer_id, gallery_id: this.params.gallery_id }); self.selected_photos = SelectedPhotos.index(); self.selectPhoto = function(photo) { var selected_photo = new SelectedPhotos({ selected_photo: { photo_id: photo.id } }); selected_photo.$create(function() { self.selected_photos.push(selected_photo); }); } self.deleteSelectedPhoto = function(selected_photo) { angular.Array.remove(self.selected_photos, selected_photo); selected_photo.$destroy({ selected_photo_id: selected_photo.id }); } self.saveSelectedPhoto = function(selected_photo) { selected_photo.$update({ selected_photo_id: selected_photo.id }); $('input').blur(); } }
  • 61. /* app/assets/templates/photos.html */ <h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1> <div id="outer_picture_frame"> <div id="picture_frame"> <div id="prev">&lsaquo;</div> <div id="photos" my:cycle> <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)" ng:repeat="photo in photos"> <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" /> <span class="title">{{photo.title}}</span> </div> </div> <div id="next">&rsaquo;</div> <span class="caption">Click a photo to add it to your collection</span> </div> </div> <div id="selected_frame"> <div id="selected_photos"> <div class="selected_photo" ng:repeat="selected_photo in selected_photos"> <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" /> <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span> <form ng:submit="saveSelectedPhoto(selected_photo)"> <input ng:model="selected_photo.title" /> </form> </div> </div> </div>
  • 62. /* app/assets/templates/photos.html */ <h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1> <div id="outer_picture_frame"> <div id="picture_frame"> <div id="prev">&lsaquo;</div> <div id="photos" my:cycle> <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)" ng:repeat="photo in photos"> <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" /> <span class="title">{{photo.title}}</span> </div> </div> <div id="next">&rsaquo;</div> <span class="caption">Click a photo to add it to your collection</span> </div> </div> <div id="selected_frame"> <div id="selected_photos"> <div class="selected_photo" ng:repeat="selected_photo in selected_photos"> <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" /> <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span> <form ng:submit="saveSelectedPhoto(selected_photo)"> <input ng:model="selected_photo.title" /> </form> </div> </div> </div>
  • 63. /* app/assets/templates/photos.html */ <h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1> <div id="outer_picture_frame"> <div id="picture_frame"> <div id="prev">&lsaquo;</div> <div id="photos" my:cycle> <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)" ng:repeat="photo in photos"> <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" /> <span class="title">{{photo.title}}</span> </div> </div> <div id="next">&rsaquo;</div> <span class="caption">Click a photo to add it to your collection</span> </div> </div> <div id="selected_frame"> <div id="selected_photos"> <div class="selected_photo" ng:repeat="selected_photo in selected_photos"> <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" /> <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span> <form ng:submit="saveSelectedPhoto(selected_photo)"> <input ng:model="selected_photo.title" /> </form> </div> </div> </div>
  • 64. /* app/assets/templates/photos.html */ <h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1> <div id="outer_picture_frame"> <div id="picture_frame"> <div id="prev">&lsaquo;</div> <div id="photos" my:cycle> <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)" ng:repeat="photo in photos"> <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" /> <span class="title">{{photo.title}}</span> </div> </div> <div id="next">&rsaquo;</div> <span class="caption">Click a photo to add it to your collection</span> </div> </div> <div id="selected_frame"> <div id="selected_photos"> <div class="selected_photo" ng:repeat="selected_photo in selected_photos"> <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" /> <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span> <form ng:submit="saveSelectedPhoto(selected_photo)"> <input ng:model="selected_photo.title" /> </form> </div> </div> </div>
  • 65. Two way data binding <form ng:submit="saveSelectedPhoto(selected_photo)"> <input ng:model="selected_photo.title" /> </form> self.saveSelectedPhoto = function(selected_photo) { selected_photo.$update({ selected_photo_id: selected_photo.id }); $('input').blur(); }
  • 66. /* app/assets/templates/photos.html */ <h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1> <div id="outer_picture_frame"> <div id="picture_frame"> <div id="prev">&lsaquo;</div> <div id="photos" my:cycle> <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)" ng:repeat="photo in photos"> <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" /> <span class="title">{{photo.title}}</span> </div> </div> <div id="next">&rsaquo;</div> <span class="caption">Click a photo to add it to your collection</span> </div> </div> <div id="selected_frame"> <div id="selected_photos"> <div class="selected_photo" ng:repeat="selected_photo in selected_photos"> <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" /> <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span> <form ng:submit="saveSelectedPhoto(selected_photo)"> <input ng:model="selected_photo.title" /> </form> </div> </div> </div>
  • 67. /* app/assets/templates/photos.html */ <h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1> <div id="outer_picture_frame"> <div id="picture_frame"> <div id="prev">&lsaquo;</div> <div id="photos" my:cycle> <div class="photo" id="photo_{{photo.id}}" ng:click="selectPhoto(photo)" ng:repeat="photo in photos"> <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" /> <span class="title">{{photo.title}}</span> </div> </div> <div id="next">&rsaquo;</div> <span class="caption">Click a photo to add it to your collection</span> </div> </div> <div id="selected_frame"> <div id="selected_photos"> <div class="selected_photo" ng:repeat="selected_photo in selected_photos"> <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" /> <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span> <form ng:submit="saveSelectedPhoto(selected_photo)"> <input ng:model="selected_photo.title" /> </form> </div> </div> </div>
  • 68. /* app/assets/javascripts/widgets.js */ angular.directive("my:cycle", function(expr,el){ return function(container){ var scope = this; var lastChildID = container.children().last().attr('id'); var doIt = function() { var lastID = container.children().last().attr('id'); if (lastID != lastChildID) { lastChildID = lastID; $(container).cycle({ fx: 'fade', speed: 500, timeout: 3000, pause: 1, next: '#next', prev: '#prev'}); } } var defer = this.$service("$defer"); scope.$onEval( function() { defer(doIt); }); } });

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. In a traditional model-view-controller web app, business logic is defined in the Model layer. The Controller responds to incoming requests by talking to the model layer and passing model objects to the View, which renders the objects for presentation in a browser.\n\nThe implementation of such a system is pure MVC. It is very easy to illustrate where the application executes in the client/server relationship: it all executes on the server.\n
  5. In a traditional model-view-controller web app, business logic is defined in the Model layer. The Controller responds to incoming requests by talking to the model layer and passing model objects to the View, which renders the objects for presentation in a browser.\n\nThe implementation of such a system is pure MVC. It is very easy to illustrate where the application executes in the client/server relationship: it all executes on the server.\n
  6. In a traditional model-view-controller web app, business logic is defined in the Model layer. The Controller responds to incoming requests by talking to the model layer and passing model objects to the View, which renders the objects for presentation in a browser.\n\nThe implementation of such a system is pure MVC. It is very easy to illustrate where the application executes in the client/server relationship: it all executes on the server.\n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n