Spine js & creating non blocking user interfaces

4 likes1,313 views

This document discusses Spine.js and creating non-blocking user interfaces. It provides an overview of Spine.js, including how it compares to Backbone.js in its use of controllers instead of views and models instead of collections. It also discusses how Spine.js enables asynchronous user interfaces through its handling of events like save callbacks before ajax calls. Finally, it addresses some limitations of Spine.js for transactions and situations requiring server-side validation.

Technology

Spine.js & creating
non-blocking user interfaces
Hjortur Hilmarsson
@hjortureh

Agenda

● Why MVC ?
● Spine.js
● Async UIs
● Tips & Tricks
● QnA

Why MVC ?

“Can it be done in HTML5 ?”
The Boss

Why MVC ?

“So much Javascript, no structure
& always solving the same
problems”
The
Developer

Common problems

● Structure
● Events
● Routing
● RESTful sync
● Local storage

MVC Frameworks
● Backbone.js
● Ember.js (SproutCore 2.0)
● Spine.js
● JavaScriptMVC
● Sammy.js
● YUILibrary
● KnockoutJS (MVVM)
● Knockback
● AngularJS
● Broke.js
● Fidel.js
● ExtJS
Source: https://github.com/addyosmani/todomvc

Backbone & Spine
Lightweight MVC frameworks

Spine.js

● Inspire by Backbone.js
● Written in Coffee Script
● Async UIs
● Very light ( 2k )
● Includes
○ Classes
○ Models
○ Controllers
○ Routes
○ Events

Backbone vs Spine
Views vs. Controllers
Model/Collection vs. Model

Backbone model

var ContactModel = Backbone.Model.extend({});

var ContactCollection = Backbone.Collection.extend({
model: ContactModel,
url: "contacts"
});

// Usage

var contacts = new ContactCollection();
var contact = new ContactModel(
{ name: "Sven Svensson", email: "sven@svensson.se" }
);

contacts.create( contact );

Spine.js model

var ContactModel = Spine.Model.sub();
ContactModel.configure("Contact", "name", "email");
ContactModel.extend( Spine.Model.Ajax );

// Usage

var contact = new ContactModel(
{ name: "Sven Svensson", email: "sven@svensson.se" }
);

contact.save();

Spine.js model in Coffee Script

class ContactModel extends Spine.Model
@configure "Contact", "name", "email"
@extend "Contact", "name", "email"

// Usage

contact = new ContactModel(
name: "Sven Svensson", email: "sven@svensson.se"
)

contact.save()

Spine js & creating non blocking user interfaces

Backbone view
var ContactView = Backbone.View.extend({

events: { "click li": "openContact" },

initialize: function() {
contacts.bind( "reset", reset, this );
contacts.fetch();
},
reset: function() {
this.contactList = this.$("#contact-list");
...
},

openContact: function() { ... },

});

// Usage
new ContactView({ el: $("#view").get(0) });

Spine.js controller
var ContactView = Spine.Controller.create({

events: { "click li": "openContact" },

elements: { "#contact-list": "contactList" },

init: function() {
ContactModel.bind( "refresh", refresh );
ContactModel.fetch();
},

openContact: function() { ... },
refresh: function() { ... },

});

// Usage
new ContactView({ el: $("#view") });

Async UIs

Backbone Spine

save() save()

validate() validate()

ajax() save callback()

save callback() ajax()

Does not work everywhere

● Transaction
● Login
● Need for server-side validation

Notes:
● Spine.js also has ajaxSuccess & ajaxError events
● Works for CUD, not Read

Don't believe me ?

■ Amazon: 100 ms of extra load time caused a 1% drop in
sales (source: Greg Linden, Amazon).
■ Google: 500 ms of extra load time caused 20% fewer
searches (source: Marrissa Mayer, Google).
■ Yahoo!: 400 ms of extra load time caused a 5–9% increase
in the number of people who clicked “back” before the page
even loaded (source: Nicole Sullivan, Yahoo!).

Bonus

● Read Docs & Code
● Check TodoMVC
● Use Jasmine / Sinon.js for testing

This document discusses transactions in Django. It explains that Django runs database operations within transactions by default to maintain data integrity. Nested transactions are supported, and there are decorators like @transaction.commit_on_success to control transaction behavior. The document also warns about issues like race conditions and improperly using Model.save(), and discusses testing transactions in Django.

Lesson 09Gene Babon

This document provides an agenda for a lesson on jQuery. It introduces jQuery as a JavaScript library for simplifying client-side scripting. Key points covered include downloading and applying jQuery, using jQuery functions like toggleClass and hide/show, and two labs - one basic and one advanced - to create a divided times menu using jQuery plugins. Homework involves continuing work on the divided times menu, learning jQuery fundamentals through videos and readings, and starting to plan a personal project using jQuery.

Introduction à AngularJSNicolas PENNEC

Le document présente AngularJS comme un framework JavaScript open-source développé par Google, adapté pour la création d'applications web grâce à des fonctionnalités comme le data binding et l'injection de dépendances. Il mentionne également des directives et la validation des formulaires, ainsi que des frameworks concurrents comme Backbone.js et Ember.js. Enfin, il fait la promotion d'un groupe utilisateur JavaScript à Rennes, fournissant des liens pour plus d'informations et de lecture.

Lesson 09Gene Babon

This document provides an introduction and overview of jQuery. It discusses what jQuery is, which is a JavaScript library that simplifies client-side scripting of HTML and allows for document traversal, CSS manipulation, event handling, animation and more. It also covers how to apply jQuery using the $(document).ready() function, and includes examples of common jQuery functions like toggleClass(), hasClass(), hide(), show(), and more. Finally, it describes a lab activity where students will work with images, behaviors, and pseudo code to apply jQuery to HTML and CSS, and lists homework tasks related to further jQuery study and project conceptualization.

Mobile architecture problems and solutions.PiXeL16

MVVM and MVP are design patterns that improve upon the traditional MVC pattern by separating presentation logic from the view controller. MVVM moves presentation logic to a view model, reducing view controller complexity and improving testability. MVP uses a presenter layer to provide the view with data from the model, handling background tasks and keeping the view simple. Both patterns improve testability and maintainability over massive view controllers by dividing responsibilities between components.

Top 10 Mistakes AngularJS Developers MakeMark Meyer

This document outlines 10 common mistakes that AngularJS developers make, including: not using dependency injection properly, allowing controllers to become bloated, not properly scoping $scopes, and not handling memory leaks. It also provides best practices for directory structure, using modules, testing, and recommendations for further reading on Angular style guides and the changes coming in Angular 2.0.

Vue.js for beginnersJulio Bitencourt

Introduction to AJAX In WordPressCaldera Labs

This document provides an introduction to AJAX in WordPress. It explains that AJAX allows for asynchronous requests that do not require a page reload. It describes how AJAX works, with the client sending a request to the server, the server processing it, responding, and the client receiving the response using JavaScript. In WordPress, AJAX is implemented using jQuery to make GET/POST requests to the admin-ajax.php file, with callbacks to handle the response. Examples are provided and further reading suggested, including using AJAX without admin-ajax and processing forms with AJAX and the REST API.

Angularjs Anti-patternsSteven Lambert

Some common AngularJS anti-patterns include: - Using jQuery to manipulate the DOM instead of directives - Checking $scope.$$phase instead of moving $apply calls appropriately - Not making ng-model bindings objects which can break child scopes - Creating bloated controllers that do too much like DOM manipulation instead of focusing on data - Not programming in an "Angular way" by manipulating views instead of models - Failing to encapsulate third party libraries in Angular services

Mini-Training: AngularJSBetclic Everest Group Tech Team

Angularjs in mobile appYvonne Yu

This document discusses using AngularJS to build mobile web apps. It covers why AngularJS was chosen, including that it is developed by Google, open source, and supports single page applications with two-way data binding, templates and directives, dependency injection, and routing. It also discusses how AngularJS is suitable for mobile by allowing page changes without server requests, and supporting back/forward navigation. Templates, controllers, filters and directives are explained. Finally, it discusses performance improvements like using local storage to cache data and Gzip compression, as well as the Ionic framework.

Angular js tutorial slidessamhelman

Angular js for beginnersMunir Hoque

Vue js for beginner Chandrasekar G

Vue JS is a progressive framework for building user interfaces. It uses a component-driven approach and features like reactivity and computed properties that make it possible to build desktop, mobile, and web applications. Some key features include reactive data binding, conditional rendering, mixins, slots for content distribution, and Vuex for global state management between components. Asynchronous and dynamic components add flexibility. Vue shares similarities with React in using virtual DOM and components but differs in file structure and size.

Vue.jsBADR

Vue.js is a progressive JavaScript framework for building user interfaces. It uses declarative templates and components to render the view layer. The core library focuses only on the view layer and is lightweight, approachable for beginners knowing HTML, CSS, and JavaScript, and versatile enough to build complex applications. It works by compiling templates into virtual DOM render functions for efficient updates. Key features include conditional rendering, list rendering, templates with interpolations and directives to bind data to the DOM, and components to build reusable code. Larger applications can use a central store to manage global state.

AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora

Nuxt.JS IntrodructionDavid Ličen

This document provides an overview of a minimalist framework called Nuxt.js for creating universal server-side rendered (SSR) applications using Vue.js. Some key points covered include: - Nuxt.js allows developers to write Vue components and pages while abstracting away concerns of client-server code splitting and routing. - Features include automatic code splitting, SSR, routing, static file serving, bundling/minifying, and error handling. - The framework uses a pages/ directory to define routes and components and includes Vuex and Vue-Router functionality out of the box. - Async data loading, custom layouts, global meta tags, and asset handling are also

AngularJS in 60ish MinutesDan Wahlin

The document provides an overview of AngularJS, focusing on its features for building single-page applications (SPA) such as directives, filters, data binding, and routing. It includes practical examples of using controllers, views, and factories, demonstrating how to create and manage dynamic content within an application. Additionally, it offers resources for further learning and tutorials related to AngularJS development.

Node.js with WebMatrixMilindu Sanoj Kumarage

Angular.js опыт использования, проблемы и решенияOlga Lavrentieva

The document details the author's experience using AngularJS as a JavaScript framework, highlighting its key features such as two-way data binding, a declarative style, and a strong community. It addresses common challenges faced during development, such as data conversion and view rendering, and offers solutions through Angular's built-in directives. Additionally, it includes guidance on integrating AngularJS with Rails and using jQuery within Angular applications.

Unobtrusive JavaScriptVitaly Baum

This document discusses unobtrusive JavaScript and patterns for implementing it in web frameworks. It begins by outlining problems with server-side JavaScript generation and the proliferation of JavaScript frameworks. It then covers common patterns for unobtrusive JavaScript like double templating, just Ajax, and update panels. The document also explains how Rails implements unobtrusive JavaScript using drivers, data attributes, and remote forms. It concludes by discussing how these patterns and techniques could be adapted for ASP.NET MVC.

Service worker - Offline WebBruno Oliveira

The document explains the use of service workers for creating offline web applications, highlighting their advantages such as running in the background and being programmatic. It contrasts service workers with the older app cache method, detailing their implementation, initialization, and event handling. Despite some limitations such as requiring HTTPS and being asynchronous, service workers are presented as the future of web development with potential features like background sync and push notifications.

Getting started with node.jsMudassar Ali Sahil

This document discusses building a basic "Hello World" Node.js application and provides an overview of Node.js. It demonstrates how to create a server using the http module, handle requests and responses, and listen on a port. Key features of Node.js are that it is event-driven, non-blocking, and uses JavaScript for both client-side and server-side applications. It also addresses some Node.js challenges like requiring a non-traditional server environment and advanced JavaScript skills.

Webpack Sofian Hadiwijaya

Webpack is a module bundler that packs JavaScript files and their dependencies into small bundles for efficient loading on the browser. It builds a dependency graph by walking through imports and outputs bundles or individual files. Loaders allow transforming assets and piping them together, like using babel-loader to transpile JSX to ES5 and css-loader to bundle CSS. This summarizes the key points about Webpack's purpose, how it builds dependencies, and the role of loaders.

VueJS: The Simple RevolutionRafael Casuso Romate

The document provides an overview of Vue.js, a progressive framework designed for building user interfaces, emphasizing its core principles such as reactivity and componentization. It discusses the framework's architecture, lifecycle, reactivity methods, component communication, and state management using Vuex, as well as Vue CLI and other tools for development. It also compares Vue.js to React, highlighting differences in performance and ecosystem richness.

An introduction to knockout.jsEmanuele DelBono

Knockout.js is a JavaScript library that helps create rich, responsive user interfaces with a clean underlying data model. It allows for declarative data binding between view models and HTML, automatic UI refresh when view models change, and templating capabilities. Key features include declarative binding, automatic UI refresh, templating, and dependency tracking. The library uses observables to track changes to view model properties and update the UI accordingly.

Windows 8 for Web DevelopersGustaf Nilsson Kotte

Windows 8 for Web Developers discusses using JavaScript and HTML5 to build Metro style apps for Windows 8. Key points include: - HTML5, CSS, JavaScript, and client frameworks like WinJS can be used to build the app experience. WinJS provides Metro styled controls and utilities. - Apps are packaged and distributed using the .appx package format. This contains the app code and manifest. - WinJS provides a library of controls, utilities for navigation, and an application model to manage the app lifecycle. Controls are touch enabled and styled for Metro. - CSS3 Grid Layout can be used for page layout, replacing floats. Media queries allow styling for different device states.

Angularjs PerformanceSteven Lambert

The document discusses performance bottlenecks in AngularJS, particularly focusing on the $digest cycle and its impact on performance due to dirty checking. It provides recommendations for improving $digest performance by reducing the number of bindings, simplifying binding logic, and avoiding certain directives like ng-repeat and filters. The document emphasizes the use of native DOM manipulation when applicable and encourages cleaning up watchers when they are no longer needed.

Javascript MVC & Backbone Tips & TricksHjörtur Hilmarsson

The document discusses MVC frameworks in JavaScript and covers topics like why use MVC, Backbone and Spine fundamentals, Backbone views, models, collections, routers and history, as well as tips and tricks for using Backbone including bootstrapping data, handling nested models, custom ajax requests, and testing with Jasmine. It provides code examples and explanations of concepts to illustrate how to build applications using the MVC pattern with Backbone.js.

Javascript frameworks: Backbone.jsSoós Gábor

1. Backbone.js is a lightweight JavaScript framework that brings structure to client-side code through an MVC pattern. 2. It separates presentation logic from business logic by defining Models, Collections, and Views. Models represent data, Collections hold lists of Models, and Views render the UI and handle events. 3. While Backbone.js allows building single page applications quickly, code can become disorganized without its structure. The framework encourages maintainable, loosely coupled code through its MVC implementation.

More Related Content

What's hot (20)

Angularjs Anti-patternsSteven Lambert

Mini-Training: AngularJSBetclic Everest Group Tech Team

Angularjs in mobile appYvonne Yu

Angular js tutorial slidessamhelman

Angular js for beginnersMunir Hoque

Vue js for beginner Chandrasekar G

Vue.jsBADR

AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora

Nuxt.JS IntrodructionDavid Ličen

AngularJS in 60ish MinutesDan Wahlin

Node.js with WebMatrixMilindu Sanoj Kumarage

Angular.js опыт использования, проблемы и решенияOlga Lavrentieva

Unobtrusive JavaScriptVitaly Baum

Service worker - Offline WebBruno Oliveira

Getting started with node.jsMudassar Ali Sahil

Webpack Sofian Hadiwijaya

VueJS: The Simple RevolutionRafael Casuso Romate

An introduction to knockout.jsEmanuele DelBono

Windows 8 for Web DevelopersGustaf Nilsson Kotte

Angularjs PerformanceSteven Lambert

Angularjs Anti-patternsSteven Lambert

Mini-Training: AngularJSBetclic Everest Group Tech Team

Angularjs in mobile appYvonne Yu

Angular js tutorial slidessamhelman

Angular js for beginnersMunir Hoque

Vue js for beginner Chandrasekar G

Vue.jsBADR

AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora

Nuxt.JS IntrodructionDavid Ličen

AngularJS in 60ish MinutesDan Wahlin

Node.js with WebMatrixMilindu Sanoj Kumarage

Angular.js опыт использования, проблемы и решенияOlga Lavrentieva

Unobtrusive JavaScriptVitaly Baum

Service worker - Offline WebBruno Oliveira

Getting started with node.jsMudassar Ali Sahil

Webpack Sofian Hadiwijaya

VueJS: The Simple RevolutionRafael Casuso Romate

An introduction to knockout.jsEmanuele DelBono

Windows 8 for Web DevelopersGustaf Nilsson Kotte

Angularjs PerformanceSteven Lambert

Similar to Spine js & creating non blocking user interfaces (20)

Javascript MVC & Backbone Tips & TricksHjörtur Hilmarsson

Javascript frameworks: Backbone.jsSoós Gábor

JavascriptMVC: Another choice of web frameworkAlive Kuo

The document discusses various web frameworks for building web applications, focusing on JavaScriptMVC as a client-side MVC framework. It compares several libraries like jQuery, ExtJS, and Backbone.js, highlighting their pros and cons, particularly JavaScriptMVC's clear documentation and total solutions for web application development. Additionally, it addresses struggles with CSS, data handling, and the need for a structured approach to manage dependencies and AJAX requests in large web applications.

Spine.jswearefractal

BackboneSayed Ahmed

This document provides an introduction to Backbone.js including: - Why use Backbone.js for single page applications on mobile/tablet devices - Benefits of Backbone like its small size while providing structure and modularity - Overview of models, views, and collections in Backbone including setting attributes, listening for changes, and interacting with servers - Examples of creating models, fetching data, updating and deleting models - Using templates and listening to events in views - Basic routing in Backbone using hash tags and dynamic routes

Javascript for Wep AppsMichael Puckett

JavaScript frameworks allow business logic to run on the client by sending JSON data on page load rather than dynamic HTML. This allows JavaScript to set up objects and classes to make assumptions without round trips to the server, improving performance. Popular frameworks like Backbone, Ember, Angular, Knockout, and Meteor emphasize separating UI from logic, data binding, templating, and routing to enable single-page applications. Meteor stands out by using the same syntax on client and server and web sockets for automatic UI updates.

Viking academy backbone.jsBert Wijnants

Backbone.js is a JavaScript framework that provides structure and conventions for developing single-page web applications. It helps avoid unnecessary DOM manipulations by separating the application state from the DOM using models. Views observe changes to models and re-render the DOM accordingly. Models can be synced to a back-end API to persist data. Backbone.js uses an MVVM pattern with models representing the application state, views for rendering, and the DOM acting as the view model.

Backbone.jsVO Tho

This document outlines a plan to introduce the Backbone.js JavaScript framework. It begins with an introduction to MVC and other models in JavaScript. It then discusses third party libraries that can be used with Backbone like jQuery. The rest of the document details the core components of Backbone - Models, Collections, Views and controllers. It provides examples of implementing each component and discusses benefits like easier maintenance and decoupling of logic from the user interface.

An approach to responsive, realtime with Backbone.js and WebSocketsAndrei Sebastian Cîmpean

This document discusses the development of a real-time, responsive JavaScript client application for Chrome and IE8 using Backbone.js and WebSockets. It outlines the need for instant UI updates and communication without overloading the server, detailing the architecture, technology choices, and implementation strategies. Key concepts include the use of Backbone.js for structuring models and views, CometD for real-time communication, and an optimistic UI approach to enhance user experience.

MVC & backbone.jsMohammed Arif

The document discusses Model-View-Controller (MVC) architecture and Backbone.js. It defines MVC as separating a web application into three parts: the model (data), view (presentation), and controller (user interaction). It explains that Backbone.js implements an MVC-like structure using models, views, and routers to organize JavaScript code. The document also introduces JavaScript templating as a way to render templates with data bindings into the HTML DOM.

Drupal Backbone.js in the FrontendDavid Corbacho Román

Backbone.js is a JavaScript framework that provides structure to web applications by utilizing models, collections, and views to connect with existing APIs through a RESTful JSON interface. It emphasizes a minimalistic approach, being the first among JavaScript MVC frameworks, requiring users to understand its core principles before incorporating additional functionalities. The document discusses its advantages, as well as guidelines on when not to use Backbone.js, particularly in small projects or when SEO is a priority.

[Coscup 2012] JavascriptMVCAlive Kuo

This document discusses JavascriptMVC, an alternative Javascript MVC framework to BackboneJS. It provides an overview of JavascriptMVC's features such as MIT licensing, clear documentation, and providing an almost total solution for building web applications. Potential pros include the licensing, documentation, and comprehensive features. Potential cons include it being less well known and having fewer online resources than BackboneJS in Taiwan. Examples of how it handles classes, CSS, data loading/validation, and views are also provided.

Single Page Application Development with backbone.js and Simple.WebChris Canal

This document summarizes a presentation about developing single page applications using Backbone.js and Simple.Web. It discusses Backbone.js and its core components like models, views and routers. It also covers libraries that are commonly used with Backbone like Underscore, Handlebars and RequireJS. Finally, it provides an overview of Simple.Web, a SOLID-based REST framework that can be used with Backbone.js applications.

AngularJS UTOSCroboncode

Rob Taylor is a software engineer and technologist with 16 years of experience building browser, server, mobile, and architecture applications. He has found that Ember.js passes his litmus test for building web applications that can run across desktop browsers and mobile devices with a single code base. In his presentation, he will provide a breakdown of Ember.js's implementation of MVC, data binding, templates, routing, shared data, and connecting to web services. He will demonstrate how Ember.js satisfies his requirements of having a low barrier to entry, intuitive API, support for MVC patterns, and an active community.

Real World Single Page App - A Knockout Case Studyhousecor

The document presents a case study by Cory House on developing a Single Page Application (SPA) using technologies like Knockout.js and Durandal, detailing lessons learned and key decisions made during the process. It highlights the complexities of choices regarding libraries, performance optimization, and maintaining separation of concerns while addressing issues related to debugging and user experience. Additionally, the author emphasizes the importance of minimizing HTTP requests and managing dependencies effectively in JavaScript applications.

Intro to Backbone.js by Azat Mardanov for General AssemblyAzat Mardanov

This document serves as an introduction to Backbone.js and covers its history, structure, and advantages in front-end development. It emphasizes the importance of using the MVC architecture for better code organization and maintenance, and provides insights into Backbone's components, best practices, and a starter kit. It also includes resources for building Backbone applications and exercises for hands-on learning.

MV* presentation frameworks in Javascript: en garde, pret, allez!Roberto Messora

The document discusses the differences between two popular JavaScript presentation frameworks, Backbone.js and Knockout.js, focusing on their architectural patterns: MVC and MVVM. It highlights their strengths, weaknesses, and suitability for various web application development scenarios, as well as historical context and evolution of presentation design patterns. The session also emphasizes the importance of structured organization, maintainability, and testing in client-side development.

Planbox Backbone MVCAcquisio

The document discusses the migration of Model-View-Controller (MVC) architecture from the back-end to the front-end using Backbone.js, emphasizing the benefits of using JavaScript for MVC implementation. It outlines the limitations of traditional back-end MVC approaches and describes how Backbone.js facilitates a more dynamic and decoupled application structure, allowing for rapid development and better client-server interaction. Key features of Backbone.js, including models, collections, and views, are explained with code examples demonstrating their functionality.

Sugarcoating your frontend one ViewModel at a timeEinar Ingebrigtsen

This document discusses modern JavaScript development approaches like MVVM and KnockoutJS. It promotes using a ViewModel pattern to separate application logic and state from the view. This improves testability and avoids issues like tightly coupled JavaScript code. The document provides examples of building Single Page Applications with KnockoutJS, handling dependencies through AMD, and using frameworks to create composable user interfaces. Overall it advocates for test-driven development and leveraging new JavaScript capabilities for building maintainable, modular applications.

Developing Backbonejs Applications Early Release Addy Osmanilittelenkali

Javascript MVC & Backbone Tips & TricksHjörtur Hilmarsson

Javascript frameworks: Backbone.jsSoós Gábor

JavascriptMVC: Another choice of web frameworkAlive Kuo

Spine.jswearefractal

BackboneSayed Ahmed

Javascript for Wep AppsMichael Puckett

Viking academy backbone.jsBert Wijnants

Backbone.jsVO Tho

An approach to responsive, realtime with Backbone.js and WebSocketsAndrei Sebastian Cîmpean

MVC & backbone.jsMohammed Arif

Drupal Backbone.js in the FrontendDavid Corbacho Román

[Coscup 2012] JavascriptMVCAlive Kuo

Single Page Application Development with backbone.js and Simple.WebChris Canal

AngularJS UTOSCroboncode

Real World Single Page App - A Knockout Case Studyhousecor

Intro to Backbone.js by Azat Mardanov for General AssemblyAzat Mardanov

MV* presentation frameworks in Javascript: en garde, pret, allez!Roberto Messora

Planbox Backbone MVCAcquisio

Sugarcoating your frontend one ViewModel at a timeEinar Ingebrigtsen

Developing Backbonejs Applications Early Release Addy Osmanilittelenkali

Recently uploaded (20)

AI VIDEO MAGAZINE - June 2025 - r/aivideo1pcity Studios, Inc

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

👉𝗡𝗼𝘁𝗲:𝗖𝗼𝗽𝘆 𝗹𝗶𝗻𝗸 & 𝗽𝗮𝘀𝘁𝗲 𝗶𝗻𝘁𝗼 𝗚𝗼𝗼𝗴𝗹𝗲 𝗻𝗲𝘄 𝘁𝗮𝗯> https://pcprocore.com/ 👈◀ CapCut Pro Crack is a powerful tool that has taken the digital world by storm, offering users a fully unlocked experience that unleashes their creativity. With its user-friendly interface and advanced features, it’s no wonder why aspiring videographers are turning to this software for their projects.

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.

9-1-1 Addressing: End-to-End Automation Using FMESafe Software

This session will cover a common use case for local and state/provincial governments who create and/or maintain their 9-1-1 addressing data, particularly address points and road centerlines. In this session, you'll learn how FME has helped Shelby County 9-1-1 (TN) automate the 9-1-1 addressing process; including automatically assigning attributes from disparate sources, on-the-fly QAQC of said data, and reporting. The FME logic that this presentation will cover includes: Table joins using attributes and geometry, Looping in custom transformers, Working with lists and Change detection.

"Scaling in space and time with Temporal", Andriy Lupa.pdfFwdays

Design patterns like Event Sourcing and Event Streaming have long become standards for building real-time analytics systems. However, when the system load becomes nonlinear with fast and often unpredictable spikes, it's crucial to respond quickly in order not to lose real-time operating itself. In this talk, I’ll share my experience implementing and using a tool like Temporal.io. We'll explore the evolution of our system for maintaining real-time report generation and discuss how we use Temporal both for short-lived pipelines and long-running background tasks.

Python Conference Singapore - 19 Jun 2025ninefyi

Mastering AI Workflows with FME by Mark DöringSafe Software

Harness the full potential of AI with FME: From creating high-quality training data to optimizing models and utilizing results, FME supports every step of your AI workflow. Seamlessly integrate a wide range of models, including those for data enhancement, forecasting, image and object recognition, and large language models. Customize AI models to meet your exact needs with FME’s powerful tools for training, optimization, and seamless integration

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand

Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

Managing airport and airspace data is no small task, especially when you’re expected to deliver it in AIXM format without spending a fortune on specialized tools. But what if there was a smarter, more affordable way? Join us for a behind-the-scenes look at how Sweco partnered with Swedavia, the Swedish airport operator, to solve this challenge using FME and Esri. Learn how they built automated workflows to manage periodic updates, merge airspace data, and support data extracts – all while meeting strict government reporting requirements to the Civil Aviation Administration of Sweden. Even better? Swedavia built custom services and applications that use the FME Flow REST API to trigger jobs and retrieve results – streamlining tasks like securing the quality of new surveyor data, creating permdelta and baseline representations in the AIS schema, and generating AIXM extracts from their AIS data. To conclude, FME expert Dean Hintz will walk through a GeoBorders reading workflow and highlight recent enhancements to FME’s AIXM (Aeronautical Information Exchange Model) processing and interpretation capabilities. Discover how airports like Swedavia are harnessing the power of FME to simplify aviation data management, and how you can too.

Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical UniversesSaikat Basu

Quantum AI: Where Impossible Becomes ProbableSaikat Basu

EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdfEarley Information Science

As AI reshapes expectations in retail and B2B commerce, organizations are recognizing a critical reality: meaningful AI outcomes depend on well-structured, adaptable infrastructure. In this session, Seth Earley is joined by Phil Ryan - AI strategist, search technologist, and founder of Glass Leopard Technologies - for a candid conversation on what it truly means to engineer systems for scale, agility, and intelligence. Phil draws on more than two decades of experience leading search and AI initiatives for enterprise organizations. Together, he and Seth explore the challenges businesses face when legacy architectures limit personalization, agility, and real-time decisioning - and what needs to change to support agentic technologies and next-best-action capabilities. Key themes from the webinar include: Composability as a prerequisite for AI - Why modular, loosely coupled systems are essential for adapting to rapid innovation and evolving business needs Search and relevance as foundational to AI - How techniques honed-in enterprise search have laid the groundwork for more responsive and intelligent customer experiences From MDM and CDP to agentic systems - How data platforms are evolving to support richer customer context and dynamic orchestration Engineering for business alignment - Why successful AI programs require architectural decisions grounded in measurable outcomes The conversation is practical and forward-looking, connecting deep technical understanding with real-world business needs. Whether you’re modernizing your commerce stack or exploring how AI can enhance product discovery, personalization, or customer journeys, this session provides a clear-eyed view of the capabilities, constraints, and priorities that matter most.

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

Let's talk about our history. How we started the project with a small vector database of less than 2 million records. Later, we received a request for +100 million records, then another +100... And so gradually we reached almost 1 billion. Standard tools were quickly running out of steam - we were running into performance, index size, and very limited resources. After a long series of trials and errors, we built our own low-cost cluster, which today stably processes thousands of queries to more than 1B vectors.

PyCon SG 25 - Firecracker Made Easy with Python.pdfMuhammad Yuga Nugraha

Explore the ease of managing Firecracker microVM with the firecracker-python. In this session, I will introduce the basics of Firecracker microVM and demonstrate how this custom SDK facilitates microVM operations easily. We will delve into the design and development process behind the SDK, providing a behind-the-scenes look at its creation and features. While traditional Firecracker SDKs were primarily available in Go, this module brings a simplicity of Python to the table.

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

WebdriverIO & JavaScript: The Perfect Duo for Web Automationdigitaljignect

In today’s dynamic digital landscape, ensuring the quality and dependability of web applications is essential. While Selenium has been a longstanding solution for automating browser tasks, the integration of WebdriverIO (WDIO) with Selenium and JavaScript marks a significant advancement in automation testing. WDIO enhances the testing process by offering a robust interface that improves test creation, execution, and management. This amalgamation capitalizes on the strengths of both tools, leveraging Selenium’s broad browser support and WDIO’s modern, efficient approach to test automation. As automation testing becomes increasingly vital for faster development cycles and superior software releases, WDIO emerges as a versatile framework, particularly potent when paired with JavaScript, making it a preferred choice for contemporary testing teams.

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

The Future of Product Management in AI ERA.pdfAlyona Owens

Hi, I’m Aly Owens, I have a special pleasure to stand here as over a decade ago I graduated from CityU as an international student with an MBA program. I enjoyed the diversity of the school, ability to work and study, the network that came with being here, and of course the price tag for students here has always been more affordable than most around. Since then I have worked for major corporations like T-Mobile and Microsoft and many more, and I have founded a startup. I've also been teaching product management to ensure my students save time and money to get to the same level as me faster avoiding popular mistakes. Today as I’ve transitioned to teaching and focusing on the startup, I hear everybody being concerned about Ai stealing their jobs… We’ll talk about it shortly. But before that, I want to take you back to 1997. One of my favorite movies is “Fifth Element”. It wowed me with futuristic predictions when I was a kid and I’m impressed by the number of these predictions that have already come true. Self-driving cars, video calls and smart TV, personalized ads and identity scanning. Sci-fi movies and books gave us many ideas and some are being implemented as we speak. But we often get ahead of ourselves: Flying cars,Colonized planets, Human-like AI: not yet, Time travel, Mind-machine neural interfaces for everyone: Only in experimental stages (e.g. Neuralink). Cyberpunk dystopias: Some vibes (neon signs + inequality + surveillance), but not total dystopia (thankfully). On the bright side, we predict that the working hours should drop as Ai becomes our helper and there shouldn’t be a need to work 8 hours/day. Nobody knows for sure but we can require that from legislation. Instead of waiting to see what the government and billionaires come up with, I say we should design our own future. So, we as humans, when we don’t know something - fear takes over. The same thing happened during the industrial revolution. In the Industrial Era, machines didn’t steal jobs—they transformed them but people were scared about their jobs. The AI era is making similar changes except it feels like robots will take the center stage instead of a human. First off, even when it comes to the hottest space in the military - drones, Ai does a fraction of work. AI algorithms enable real-time decision-making, obstacle avoidance, and mission optimization making drones far more autonomous and capable than traditional remote-controlled aircraft. Key technologies include computer vision for object detection, GPS-enhanced navigation, and neural networks for learning and adaptation. But guess what? There are only 2 companies right now that utilize Ai in drones to make autonomous decisions - Skydio and DJI.

AI VIDEO MAGAZINE - June 2025 - r/aivideo1pcity Studios, Inc

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

9-1-1 Addressing: End-to-End Automation Using FMESafe Software

"Scaling in space and time with Temporal", Andriy Lupa.pdfFwdays

Python Conference Singapore - 19 Jun 2025ninefyi

Mastering AI Workflows with FME by Mark DöringSafe Software

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand

Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical UniversesSaikat Basu

Quantum AI: Where Impossible Becomes ProbableSaikat Basu

EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdfEarley Information Science

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

PyCon SG 25 - Firecracker Made Easy with Python.pdfMuhammad Yuga Nugraha

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

WebdriverIO & JavaScript: The Perfect Duo for Web Automationdigitaljignect

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

The Future of Product Management in AI ERA.pdfAlyona Owens

Spine js & creating non blocking user interfaces

1. Spine.js & creating non-blocking user interfaces Hjortur Hilmarsson @hjortureh

2. Agenda ● Why MVC ? ● Spine.js ● Async UIs ● Tips & Tricks ● QnA

3. Javascript MVC

4. Why MVC ? “I wan't better UX” The user

5. Why MVC ? “Can it be done in HTML5 ?” The Boss

6. Why MVC ? “So much Javascript, no structure & always solving the same problems” The Developer

7. Common problems ● Structure ● Events ● Routing ● RESTful sync ● Local storage

8. MVC Frameworks ● Backbone.js ● Ember.js (SproutCore 2.0) ● Spine.js ● JavaScriptMVC ● Sammy.js ● YUILibrary ● KnockoutJS (MVVM) ● Knockback ● AngularJS ● Broke.js ● Fidel.js ● ExtJS Source: https://github.com/addyosmani/todomvc

9. Backbone & Spine Lightweight MVC frameworks

10. Spine.js ● Inspire by Backbone.js ● Written in Coffee Script ● Async UIs ● Very light ( 2k ) ● Includes ○ Classes ○ Models ○ Controllers ○ Routes ○ Events

11. Backbone vs Spine Views vs. Controllers Model/Collection vs. Model

12. Backbone model var ContactModel = Backbone.Model.extend({}); var ContactCollection = Backbone.Collection.extend({ model: ContactModel, url: "contacts" }); // Usage var contacts = new ContactCollection(); var contact = new ContactModel( { name: "Sven Svensson", email: "[email protected]" } ); contacts.create( contact );

13. Spine.js model var ContactModel = Spine.Model.sub(); ContactModel.configure("Contact", "name", "email"); ContactModel.extend( Spine.Model.Ajax ); // Usage var contact = new ContactModel( { name: "Sven Svensson", email: "[email protected]" } ); contact.save();

14. Spine.js model in Coffee Script class ContactModel extends Spine.Model @configure "Contact", "name", "email" @extend "Contact", "name", "email" // Usage contact = new ContactModel( name: "Sven Svensson", email: "[email protected]" ) contact.save()

16. Backbone view var ContactView = Backbone.View.extend({ events: { "click li": "openContact" }, initialize: function() { contacts.bind( "reset", reset, this ); contacts.fetch(); }, reset: function() { this.contactList = this.$("#contact-list"); ... }, openContact: function() { ... }, }); // Usage new ContactView({ el: $("#view").get(0) });

17. Spine.js controller var ContactView = Spine.Controller.create({ events: { "click li": "openContact" }, elements: { "#contact-list": "contactList" }, init: function() { ContactModel.bind( "refresh", refresh ); ContactModel.fetch(); }, openContact: function() { ... }, refresh: function() { ... }, }); // Usage new ContactView({ el: $("#view") });

18. Async UIs

19. Async UIs Backbone Spine save() save() validate() validate() ajax() save callback() save callback() ajax()

20. Contact Us - Examples

21. Does not work everywhere ● Transaction ● Login ● Need for server-side validation Notes: ● Spine.js also has ajaxSuccess & ajaxError events ● Works for CUD, not Read

22. Don't believe me ? ■ Amazon: 100 ms of extra load time caused a 1% drop in sales (source: Greg Linden, Amazon). ■ Google: 500 ms of extra load time caused 20% fewer searches (source: Marrissa Mayer, Google). ■ Yahoo!: 400 ms of extra load time caused a 5–9% increase in the number of people who clicked “back” before the page even loaded (source: Nicole Sullivan, Yahoo!).

24. What about read ? - Examples

25. Bonus ● Read Docs & Code ● Check TodoMVC ● Use Jasmine / Sinon.js for testing

26. QnA

27. Thanks! @hjortureh

Spine js & creating non blocking user interfaces

Recommended

More Related Content

What's hot (20)

Similar to Spine js & creating non blocking user interfaces (20)

Recently uploaded (20)

Spine js & creating non blocking user interfaces