Sugarcoating your frontend one ViewModel at a time

Feb 29, 2012Download as KEY, PDF1 like778 views

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.

Sugarcoating your frontend one ViewModel at a time

Sugarcoating your frontend
one ViewModel at a time
A dive into modern JavaScript development

FocusH
Web Junkie asS
hifted™
d MVP
@ pavsaun @einar
i

What is jQuery?
• "jQuery is designed to change the way you write
JavaScript"

• Cross browser

• Dom traversing

• Event handling

• Animations

• Ajax

And it all begins with $

• Target elements with CSS selectors

• $("#elementId").makeMagic()

... ask what you can do
for the DOM...
• Polluted CSS selectors
• Passive views
• Heavy coupling
• Bleeding JavaScript (business logic) to DOM
• Hard to test

MVVM
Get from
Model server

View

Observes

ViewModel Observable

Like they do on the
Discovery Channel
• Based on Martin Fowlers
Presentation Model - 2004
(http://martinfowler.com/eaaDev/PresentationModel.html)

• XAML
• WPF
• Silverlight
• WP7
• WinRT

Model

• Typically data fetched from the server
• Could be observable
• Can be extended with computed values
(e.g. FullName = FirstName + LastName)

View

• Declaratively observe the ViewModel
• The control is given back to the designer
• Separation between the designer and the
developer

ViewModel
...there is no DOM!

• “Code Contract”
• State
• Behavior
• Enables Mockup data much easier
• Testable

KnockoutJS
• Steve Sanderson (Microsoft fella)
• v2.0
• Nuget
• http://www.knockoutjs.com
• ... or on a CDN
http://cdn.dolittle.com/knockout/knockout-2.0.0.js

Knockout some more
with..

• Custom bindings
• Extenders
• Plugins

Custom Bindings

• Declaratively used from the View
• No bleeding of view concern into
ViewModel
• Transitions based on state
• Insert jQuery here!

.. no-one writes code without tests / specs..
yes, JavaScript is code!

Its a jungle out there
• JsTestDriver
• YUI Test
• BusterJs
• Jasmine
• JsUnit
• QUnit
• ... and then some...

Forseti
• Getting started easily
• Intuitive UI (Yes, I said it - UI)
• Easy to install
• Integrate with the most popular tools (IDEs + Test Runners)
• Run headlessly
• In fact - without any browser, not even hidden!
• Run any test framework
• Run on multiple JavaScript engines
• Eventually run in a browser context

Single Page Applications

• Never postback - again
• It is an application approach - not a site
approach, different mindset!

Application Storage

• 5 MB storage for your application
• HTML
• CSS
• JavaScript
• Other static ﬁles...

Local Storage

• 25MB by default - can be increased
programatically with user interaction
• Ofﬂine data storage

Frameworks
• Sencha / ExtJs
• Backbone
• Ember
• Spine
• Skeleton
• JavaScriptMVC
• Sammy.js
• YUI
• Knockback (hybrid)
• ... and then some...

what about my
dependencies?
• AMD - Asynchronous Module Deﬁnition
• CommonJs
• RequireJs
• curl.js
• ...
• JS vNext / Harmony

Compositional UIs

• Bifrost - Features
• UriMapper

Event Aggregator
ViewModel 1 ViewModel 2

Resources

• http://knockoutjs.com
• http://github.com/dolittlestudios/bifrost
• http://github.com/dolittlestudios/forseti

The document discusses JavaScript application development for both server-side and client-side applications. It covers dependency management with Node.js Package Manager, using MVC frameworks like Railway.js and Spine.js, testing with tools like QUnit and Tobi.js, and developing Windows 8 Metro apps with WinJS for navigation and fragments. Common patterns like namespaces, modules, and promises are also discussed.

MEAN stackIryney Baran

The document discusses the MEAN stack, including its components (MongoDB, Express, AngularJS, Node.js) and how they work together. It notes that the MEAN stack allows building full-stack web applications using only JavaScript, and that it offers advantages like increased productivity, ease of debugging, and support for MVC architecture. Some disadvantages mentioned are that MongoDB may not scale as well for very large applications. The document then proposes building a simple app to demonstrate the MEAN stack in action.

Be German About Your FrontendArush Sehgal

- The document discusses improving Magento's frontend by removing its default JavaScript (Prototype and Scriptaculous) and replacing it with modern libraries like jQuery, AngularJS, and Backbone for modular and responsive code. - It recommends organizing CSS and JavaScript into reusable components to avoid spaghetti code, and using techniques like OOCSS, SASS, and pre-fetching to optimize performance. - The key ideas are to think of pages as independent and reusable components, stay organized, and use the right technologies for dynamic and adaptive frontends.

新版阿尔法城背后的前端MVC实践Dexter Yang

This document discusses the Model-View-Controller (MVC) pattern and how to implement it for web applications. Some key points discussed include: 1. Using small JavaScript modules and message passing between components to implement MVC. 2. Using an observer pattern to notify views when models change and controllers when user events occur. 3. Implementing a URL router to handle application URLs and navigation. 4. Having views delegate user interface handling to separate UI components.

You know what iMEAN? Using MEAN stack for application dev on InformixKeshav Murthy

Introduction to mean stackPraveen Gubbala

The document provides an overview of the MEAN stack, which is a collection of JavaScript technologies used to develop web applications. It consists of MongoDB (a no-SQL database), ExpressJS (a web application framework), AngularJS (a front-end JavaScript framework), and NodeJS (a runtime environment for JavaScript). Each technology is described briefly, outlining its purpose and benefits like performance, scalability, and the use of a single programming language throughout the application stack.

Web development using nodejsVaisakh Babu

This document provides an overview of web development using Node.js. It discusses what Node.js is, its event-driven and non-blocking I/O model. It also covers internal structures like the event loop and callbacks, issues like callback hell and ways to fix it. The document introduces Express as a web framework for Node.js and lists important related NPM libraries. It provides references for further reading.

An introduction to Node.jsKasey McCurdy

This document provides a high-level overview of JavaScript and Node.js. It discusses how JavaScript originated as a browser scripting language but is now widely used for server-side applications through Node.js. Node.js uses Google's V8 JavaScript engine and allows JavaScript code to run outside of browsers. Popular Node.js frameworks like Express.js are introduced. Key features of JavaScript like asynchronous programming and Node.js concepts like modules, middleware, and MongoDB are summarized at a high level.

Get MEAN! Node.js and the MEAN stackNicholas McClay

This meetup will bring us back to basics with a bootstrapping session on building an all Javascript web application on a MEAN Stack: • MongoDB - NoSQL DB • ExpressJS - Server Application Framework • AngularJS - Client Application Framework • NodeJS - Application Platform I'll cover the basics of getting bootstrapped with Node.js and building out a fully featured web application from backend-to-frontend. I'll highlight some of the advantages of an all javascript web application as well as show some development tips leveraging gruntJS based on Nate's presentation last meetup.

MEAN StackKrishnaprasad k

MongoDB Days Silicon Valley: Building Applications with the MEAN StackMongoDB

Presented by Jason Zucchetto, Curriculum Engineer, MongoDB Experience level: Introductory Walk through building a sample application with the MEAN stack (MongoDB-Express-Angular-Node.js). We'll start from the beginning, walking through every component of the MEAN stack, in building a modern web application. The presentation focuses on building MongoMart, a simple application for searching and viewing MongoDB merchandise. You'll walk away with a basic knowledge of MEAN stack components and how to leverage them in building applications.

Mean Stack - An OverviewNaveen Pete

The document provides an overview of the MEAN stack, which uses JavaScript for full-stack development. It discusses the evolution of web development from separate front-end and back-end work to full-stack JavaScript with Node.js. The MEAN stack combines MongoDB for the database, Express for the web framework, Angular for the front-end, and Node.js as the runtime environment. Each component is introduced, with Node.js using a single-threaded and asynchronous model, Express providing features like routing and middleware, Angular using templates and two-way data binding, and MongoDB as a flexible document database.

Mean PPTHarendra Singh Bisht

The document discusses the MEAN stack, which is a full-stack JavaScript solution for building web applications using MongoDB, Express, AngularJS, and Node.js. It describes each component, why the MEAN stack is useful, and key concepts like non-blocking I/O, MVC architecture, and Angular directives. Tools like Yeoman, Grunt, and Bower that are often used with MEAN projects are also covered, as well as deployment.

Introduction to Vue.js DevStaff Meetup 13.02Paul Bele

Vue.js is a popular JavaScript framework that provides components for building user interfaces and single-page applications. It offers a lightweight and performant alternative to frameworks like Angular and React with a simpler programming model based around one-way reactive data flows. The core features of Vue.js include templates for rendering views, components for building reusable UI elements, directives for dynamic behavior and event handling, and services for global state management and routing. A simple single-page application example is demonstrated using Vue CLI to initialize a project with common tools and dev server configuration.

Node js (runtime environment + js library) platformSreenivas Kappala

This document provides an overview of Node.js, including what it is, its features, advantages, limitations, and how to use related tools like npm and Express.js. Node.js is a JavaScript runtime environment that allows building fast and scalable server-side web applications. It uses non-blocking I/O and event-driven architecture, making it suitable for data-intensive real-time applications. Common uses of Node.js include building APIs and web servers. Related modules like npm and Express.js provide functionality for package/module management and creating web app frameworks.

Angular js introductionPraveen Gubbala

PHP Indonesia - Nodejs Web DevelopmentIrfan Maulana

This document provides an introduction to Node.js web development. It discusses Node.js basics including its asynchronous, non-blocking architecture. It also covers building a simple web app with Express, MongoDB, and Jade. Tools for bundling assets like Grunt and unit testing with Mocha are described. Sample code demonstrates basic routing, database queries, templating, and unit tests. Contact information and GitHub repos are provided to learn more.

Nodejs - Building a RESTful APISang Cù

The document discusses building a RESTful API and deploying it to the cloud. It outlines using Node.js, Express.js, MongoDB, and other tools to build a scalable API. It then discusses deploying the application to services like Heroku and Travis CI for continuous integration and monitoring with New Relic. Case studies are provided of other companies like PayPal that were able to build applications faster and handle more traffic using similar Node.js architectures.

The Realtime Web: Stateful and ProgrammableChristopher Gomez

This document discusses the evolving web from a stateless to a stateful and real-time model. It describes challenges with the traditional stateless web and introduces concepts like WebSockets and SignalR that enable real-time functionality. Examples are given of a multiplayer game that maintains a shared game state and allows players to update and see changes in real-time. Frameworks like EaselJS, SignalR, and hosting JavaScript engines on servers are presented as technologies to build such stateful and real-time web applications.

MongoDB MEAN Stack Webinar October 7, 2015Valeri Karpov

Lessons in Open Source from the MongooseJS ODMValeri Karpov

Valeri Karpov discusses his experience with the Mongoose ODM project for Node.js. He got involved after discovering Mongoose helped reduce his code, and later became the main maintainer. He provides an overview of how Mongoose works through schema validation, syntactic sugar for updates, and hooks/middleware. Recent additions include query middleware and promises support. Lessons learned include being responsive to issues and maintaining a clear vision for an open source project.

Conquering AngularJS LimitationsValeri Karpov

The document discusses strategies for addressing common AngularJS challenges including SEO, responsive design, and integration testing. It recommends using Prerender.io to generate static HTML for search engines to index Single Page Apps. For responsive design, it suggests using reactive directives that emit events in response to screen size changes rather than having directives know about screen size. Finally, it outlines an approach to integration testing AngularJS directives in isolation using Karma and bootstrapping directives for testing DOM logic.

WebAssembly overview. KievJS meetupAlexandr Skachkov

WebAssembly is a new low-level compilation target that provides better performance than JavaScript without compromising on portability and security. It runs at native speed by taking advantage of common hardware capabilities available on a wide range of platforms. WebAssembly code is portable and works consistently across multiple browsers without modifications. It also inherits JavaScript's security model and allows safe sandboxing of code.

SharePoint Ribbon Deep DiveChris O'Brien

MVVM frameworksEgor Bogatov

This document discusses several popular MVVM frameworks for building cross-platform applications with XAML and .NET/C#, including MVVM Light, Caliburn.Micro, Simple MVVM, ReactiveUI, Catel, and MvvmCross. It provides an overview of key features of each framework such as base view models, command implementations, messaging, navigation, data binding, and cross-platform support. Popular features include shared view models across platforms, model-view-viewmodel patterns, messaging support, and plugins for platform-specific functionality.

An Introduction to Node.js Development with Windows AzureTroy Miles

Node.js has taken off in popularity. Find out why major internet companies like Yammer, CouchOne, DocumentCloud, and LinkedIn are using Node to power their servers. And why Microsoft added support for it to Azure. In this session we will build a simple yet functional web server using Node, enhance it using plugins known as Modules, and hopefully explain why Node is such a powerful new web server paradigm.

Angular jsTed Hsu

This document provides an introduction to AngularJS, describing its key features including two-way data binding, model-view-controller (MVC) architecture, and common directives like ng-app, ng-bind, and ng-model. It also covers CRUD operations for creating, reading, updating, and deleting data, compares AngularJS templating to other templating languages, and provides references for additional AngularJS learning materials.

Web assembly overview by Mikhail SorokovskyValeriia Maliarenko

WebAssembly is a new binary format for the web that is fast, compact and provides near-native performance. It was developed by major browser vendors as a compilation target for programming languages like C/C++ to run on the web. WebAssembly has a small binary format, runs in any browser, and provides performance comparable to native code. It fills gaps in JavaScript for heavy computation tasks. The roadmap includes adding threads, shared memory and exception handling to WebAssembly.

Windows 8 BootCampEinar Ingebrigtsen

Pptsummativeassessment 130217030359-phpapp01Mariz Encabo

The document discusses pre, formative, and summative assessments. It defines them and provides examples. Formative assessments are used during instruction to provide feedback and guide teaching, like pre-tests. Summative assessments measure learning after instruction, like final exams. The document also discusses tools for each type of assessment and provides a sample teaching plan and summative assessment about sexually transmitted diseases.

More Related Content

What's hot (20)

Get MEAN! Node.js and the MEAN stackNicholas McClay

MEAN StackKrishnaprasad k

MongoDB Days Silicon Valley: Building Applications with the MEAN StackMongoDB

Mean Stack - An OverviewNaveen Pete

Mean PPTHarendra Singh Bisht

Introduction to Vue.js DevStaff Meetup 13.02Paul Bele

Node js (runtime environment + js library) platformSreenivas Kappala

Angular js introductionPraveen Gubbala

PHP Indonesia - Nodejs Web DevelopmentIrfan Maulana

Nodejs - Building a RESTful APISang Cù

The Realtime Web: Stateful and ProgrammableChristopher Gomez

MongoDB MEAN Stack Webinar October 7, 2015Valeri Karpov

Lessons in Open Source from the MongooseJS ODMValeri Karpov

Conquering AngularJS LimitationsValeri Karpov

WebAssembly overview. KievJS meetupAlexandr Skachkov

SharePoint Ribbon Deep DiveChris O'Brien

MVVM frameworksEgor Bogatov

An Introduction to Node.js Development with Windows AzureTroy Miles

Angular jsTed Hsu

Web assembly overview by Mikhail SorokovskyValeriia Maliarenko

Get MEAN! Node.js and the MEAN stackNicholas McClay

MEAN StackKrishnaprasad k

MongoDB Days Silicon Valley: Building Applications with the MEAN StackMongoDB

Mean Stack - An OverviewNaveen Pete

Mean PPTHarendra Singh Bisht

Introduction to Vue.js DevStaff Meetup 13.02Paul Bele

Node js (runtime environment + js library) platformSreenivas Kappala

Angular js introductionPraveen Gubbala

PHP Indonesia - Nodejs Web DevelopmentIrfan Maulana

Nodejs - Building a RESTful APISang Cù

The Realtime Web: Stateful and ProgrammableChristopher Gomez

MongoDB MEAN Stack Webinar October 7, 2015Valeri Karpov

Lessons in Open Source from the MongooseJS ODMValeri Karpov

Conquering AngularJS LimitationsValeri Karpov

WebAssembly overview. KievJS meetupAlexandr Skachkov

SharePoint Ribbon Deep DiveChris O'Brien

MVVM frameworksEgor Bogatov

An Introduction to Node.js Development with Windows AzureTroy Miles

Angular jsTed Hsu

Web assembly overview by Mikhail SorokovskyValeriia Maliarenko

Viewers also liked (17)

Windows 8 BootCampEinar Ingebrigtsen

Pptsummativeassessment 130217030359-phpapp01Mariz Encabo

Lets focus on business valueEinar Ingebrigtsen

Ausdance celebrates Australian dance at the 2014 Australian Performing Arts M...Rae Jennings

It's Primetime: A Javascript StoryEinar Ingebrigtsen

It’s pretty fair to say that JavaScript is not a fad; it is by far the most widespread programming language out there and also the most available runtime we have, ranging from toasters to the web, and even to the backend development through Node.js. Its probably also fair to say that we should really embrace it and start treating it like a first class citizen of our day to day work. In this talk, Einar will take you on a tour of how you can work with JavaScript with similar patterns you’re already used to from the rest of your server code. Writing tests or specifications that proves your code is also important, Einar will show how to get started with this and how you can achieve more testable JavaScript by applying patterns like MVVM (Model View ViewModel) using KnockoutJS

Genealogylecture2012MelissaFromTheLibrary

The document summarizes the genealogical resources available at the Lee County Library. It outlines that the library has microfilm records, books, maps, newspapers, and personal collections. It provides access to genealogy databases like Ancestry Library Edition and HeritageQuest through funding. The document describes how to access and use HeritageQuest from the library or remotely with a library card to search census records, periodicals, books, and military records.

Developing on Windows 8Einar Ingebrigtsen

An Agile JourneyPrakash Bettadapur

The document discusses the transformation of a program to an agile methodology. It begins with an introduction to agile, discussing why it was adopted and how it differs from traditional software development lifecycles. It then outlines the initial problematic state of the program and how agile principles could help address issues like product quality, team dynamics, and outdated architecture. The document goes on to describe the agile journey, significant phases of progress, and how practices like frequent delivery, customer collaboration, and team empowerment were implemented. It contrasts agile and waterfall methodologies and principles.

SME Breakfast Seminar - Keynote Session - The Data LandscapeNathean Technologies

This document summarizes a data management breakfast briefing hosted by Nathean Technologies. The agenda included presentations on the data landscape, achieving successful reporting projects, a case study, and the agile approach. It discusses how the data landscape is changing with trends in mobile, social, and big data. Mobile devices and social media are generating more varied data sources in real-time. Big data involves analyzing large, diverse, and fast-moving data to provide business value. Organizations must adapt their IT strategies and develop new skills to leverage these changes.

Genealogylecture2012MelissaFromTheLibrary

해맑은 어린이집 상담자료정순 최

HCB patents catalogueJoanna Huang

This document provides information about Hwang Cherng Bin Specialty Tools Inc., including its company profile, products, and contact information. It details that HCB is a leading manufacturer of automotive specialty tools founded in 1990 in Taiwan. The company has over 4,000 square meters of factory space and a professional R&D team that has developed over 700 tool types, with more than 70 patents. The document includes an index of HCB tools for brands like Mercedes Benz, BMW, and Honda.

Genealogylecture2012MelissaFromTheLibrary

The document summarizes genealogical resources available at the Lee County Library, including microfilm records, books, internet resources, and how to access the HeritageQuest database from home using a library card. Key resources mentioned are census records, newspapers, death records, family histories, maps, and HeritageQuest which allows searching census records, periodicals, books, and Revolutionary War records.

Windows Azure Camps - Oktober 2012Einar Ingebrigtsen

Windows Azure Camps covers basics of cloud computing and details about Microsoft's Azure cloud platform. The agenda includes an overview of cloud computing concepts, architectural details of how Azure is built, and how to get started using Azure services like deploying a web site and using storage. The presentation is delivered by Einar Ingebrigtsen, a Microsoft MVP, and includes demos of building applications with Azure building blocks like compute, storage, databases, and messaging services.

Law Related ( Guidelines on the PTA )Mariz Encabo

This document provides guidelines and answers frequently asked questions regarding Parent-Teacher Associations (PTAs) in the Philippines. It states that every school should organize a PTA to provide a forum for discussing school issues and ensuring parental cooperation. Membership is voluntary and open to parents and teachers of enrolled students. The PTA is led by a Board of Directors composed of 15 members including a President, Vice President, Secretary, and Treasurer. The PTA can collect voluntary contributions from members and is responsible for reasonable fundraising once per year with the school head's approval. The school principal recognizes the PTA and may cancel recognition for violations of guidelines.

Laws related EducationMariz Encabo

This document summarizes several laws related to teachers and schools in the Philippines. It outlines laws providing rights and protections for teachers, such as consent for transfers, leave privileges, and freedom of organization. It also discusses laws around child protection, sexual harassment, campus journalism funding, apprehending drug offenders on school premises, and the role of schools in juvenile justice. The document defines what constitutes child abuse and sexual harassment. It requires school heads to form teams to deliver education programs. Overall, it concisely summarizes many important Philippine laws impacting the rights and responsibilities of teachers.

Theoretical perspectives in sociologyMariz Encabo

This document provides summaries of several major sociological theories and perspectives: - The functionalist perspective developed by Emile Durkheim focuses on how society functions as an interrelated system to maintain stability. - The conflict perspective developed by Karl Marx focuses on how competition for scarce resources leads to social change and conflict. - Max Weber's interactionist perspective focuses on how individuals interact through symbols and attach subjective meanings to actions. It also provides brief biographies of Durkheim, Marx, and Weber, outlining their major concepts and contributions to sociology.

Windows 8 BootCampEinar Ingebrigtsen

Pptsummativeassessment 130217030359-phpapp01Mariz Encabo

Lets focus on business valueEinar Ingebrigtsen

Ausdance celebrates Australian dance at the 2014 Australian Performing Arts M...Rae Jennings

It's Primetime: A Javascript StoryEinar Ingebrigtsen

Genealogylecture2012MelissaFromTheLibrary

Developing on Windows 8Einar Ingebrigtsen

An Agile JourneyPrakash Bettadapur

SME Breakfast Seminar - Keynote Session - The Data LandscapeNathean Technologies

Genealogylecture2012MelissaFromTheLibrary

해맑은 어린이집 상담자료정순 최

HCB patents catalogueJoanna Huang

Genealogylecture2012MelissaFromTheLibrary

Windows Azure Camps - Oktober 2012Einar Ingebrigtsen

Law Related ( Guidelines on the PTA )Mariz Encabo

Laws related EducationMariz Encabo

Theoretical perspectives in sociologyMariz Encabo

Similar to Sugarcoating your frontend one ViewModel at a time (20)

Node.js for .NET DevelopersDavid Neal

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Jeremy Likness

This document summarizes a presentation on JavaScript frameworks and libraries. It discusses tools like JSLint and JSHint for code quality, jQuery for DOM manipulation, JSON and Web API for data, Twitter Bootstrap for layouts, Underscore.js for utility functions, Backbone.js for MVC, RequireJS for dependencies, Kendo UI for MVVM, and Amplify.js for pub/sub messaging. It recommends using these libraries to make code cross-browser compatible, modular, data-friendly, consistent, and decoupled.

【前端Mvc】mvc behind-alphatowntaobao.com

This document discusses the Model-View-Controller (MVC) pattern and how to implement it for web applications. Some key points discussed include: 1. Using small JavaScript modules and message passing between components to implement MVC. 2. Using an observer pattern to connect views to controllers and models. 3. Implementing a URL router to handle application routes and updating the DOM. 4. Having views delegate tasks like rendering to separate UI modules to separate concerns.

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.

Women Who Code, Ground FloorKatie Weiss

This document provides a whirlwind tour of software development topics including common terminology like front-end vs back-end, languages vs frameworks. It describes the basic building blocks of a web application like HTML, CSS, JavaScript and how they are tied together by the DOM. Common technology stacks that pair languages like Java, PHP and Ruby with frameworks and databases are also outlined. The document concludes by suggesting ways for developers to take their skills to the next level in areas like responsive design, testing, design patterns and preparing applications to scale.

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.

JavaScript in Universal Windows Platform appsTimmy Kokke

JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...Speedment, Inc.

The best code is the one you never need to write. Using code generation and automated builds, you can minimize the risk of human error when developing software, but how do you maintain control over code when large parts of it are handed over to a machine? In this tutorial, you will learn how to use open source software to create and control code automation. You will see how you can generate a completely object-oriented domain model by automatically analyzing your database schemas. Every aspect of the process is transparent and configurable, giving you, as a developer, 100 percent control of the generated code. This will not only increase your productivity but also help you build safer, more maintainable Java applications and is a perfect solution for Microservices.

How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...Malin Weiss

Wheel.jsbaccigalupi

20120802 timisoaraRichard Rodger

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that allows for writing server-side code in JavaScript. It has a single-threaded, event-driven architecture that makes it efficient for data-intensive real-time applications. Some key advantages of Node.js include using JavaScript for both client-side and server-side code, high performance due to event-driven and non-blocking model, and rich ecosystem of third-party modules. Mobile web apps can be built with Node.js by using HTML5 features and JavaScript on the server and client sides.

Mvvm knockout vs angularBasarat Syed

Introduction to node.js by jibanJibanananda Sana

Talk Paris Infovis 091207132953 Phpapp01(2)johnnybiz

This document discusses using web standards to create interactive data visualizations for the web. It provides an overview of the JavaScript InfoVis Toolkit, which allows creating multiple graph and tree layouts using web standards and JavaScript. It also discusses upcoming improvements to browser engines and JavaScript that will further improve performance of interactive visualizations. Finally, it introduces WebGL and V8-GL as emerging web standards that will enable hardware-accelerated 3D graphics directly from JavaScript.

Using Web Standards to create Interactive Data Visualizations for the Webphilogb

This document discusses using web standards to create interactive data visualizations for the web. It provides an overview of the JavaScript InfoVis Toolkit, which allows creating multiple graph and tree layouts using web standards and JavaScript. It also discusses upcoming improvements to browser engines and JavaScript that will further improve performance of interactive visualizations. Finally, it introduces WebGL and V8-GL as emerging web standards that bring hardware-accelerated 3D graphics to the web through JavaScript.

Going Offline with JSbrendankowitz

The document discusses JavaScript application development for both server-side and client-side environments. It covers dependency management with tools like Node.js Package Manager, common patterns like MVC with Spine.js, and Windows 8 development with WinJS. Code examples demonstrate using Node.js, Railway.js, Spine.js, and WinJS for asynchronous operations, navigation, and fragments. The talk encourages leveraging common JavaScript tools and patterns for building cross-platform applications.

Usersnap and the javascript magic behind the scenes - ViennaJSUsersnap

AngularJS - Architecture decisionsin a large project Elad Hirsch

This document discusses architecture decisions for a large JavaScript project. It covers the project's technology stack including using Bower for frontend artifacts, ES6 classes for cleaner code, and RequireJS for asynchronous module loading. It also discusses design principles like separation of concerns, testing as a baseline, and enabling easier reusability of components. Specific Angular directives design topics are covered such as making directives singletons, handling state with $scope, and the compile and link functions.

Seven Versions of One Web ApplicationYakov Fain

Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann

The document discusses the state of JavaScript and opportunities for its responsible use. It encourages learning JavaScript properly rather than copying code without understanding. It argues against workarounds for browser issues and urges focusing on standards compliance. Updating tools and libraries, removing legacy code, and embracing modern JavaScript features like those in ES6 can help address past issues and enable further innovation on the web.

Node.js for .NET DevelopersDavid Neal

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Jeremy Likness

【前端Mvc】mvc behind-alphatowntaobao.com

Javascript for Wep AppsMichael Puckett

Women Who Code, Ground FloorKatie Weiss

An introduction to knockout.jsEmanuele DelBono

JavaScript in Universal Windows Platform appsTimmy Kokke

JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...Speedment, Inc.

How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...Malin Weiss

Wheel.jsbaccigalupi

20120802 timisoaraRichard Rodger

Mvvm knockout vs angularBasarat Syed

Introduction to node.js by jibanJibanananda Sana

Talk Paris Infovis 091207132953 Phpapp01(2)johnnybiz

Using Web Standards to create Interactive Data Visualizations for the Webphilogb

Going Offline with JSbrendankowitz

Usersnap and the javascript magic behind the scenes - ViennaJSUsersnap

AngularJS - Architecture decisionsin a large project Elad Hirsch

Seven Versions of One Web ApplicationYakov Fain

Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann

Recently uploaded (20)

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Building 10x Organizations with Modern Productivity Metrics 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Want to learn practical tips for designing systems that can scale efficiently without compromising speed? Join us for a workshop where we’ll address these challenges head-on and explore how to architect low-latency systems using Rust. During this free interactive workshop oriented for developers, engineers, and architects, we’ll cover how Rust’s unique language features and the Tokio async runtime enable high-performance application development. As you explore key principles of designing low-latency systems with Rust, you will learn how to: - Create and compile a real-world app with Rust - Connect the application to ScyllaDB (NoSQL data store) - Negotiate tradeoffs related to data modeling and querying - Manage and monitor the database for consistently low latencies

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Procurement Insights Cost To Value Guide.pptxJon Hansen

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Most consumers believe they’re making informed decisions about their personal data—adjusting privacy settings, blocking trackers, and opting out where they can. However, our new research reveals that while awareness is high, taking meaningful action is still lacking. On the corporate side, many organizations report strong policies for managing third-party data and consumer consent yet fall short when it comes to consistency, accountability and transparency. This session will explore the research findings from TrustArc’s Privacy Pulse Survey, examining consumer attitudes toward personal data collection and practical suggestions for corporate practices around purchasing third-party data. Attendees will learn: - Consumer awareness around data brokers and what consumers are doing to limit data collection - How businesses assess third-party vendors and their consent management operations - Where business preparedness needs improvement - What these trends mean for the future of privacy governance and public trust This discussion is essential for privacy, risk, and compliance professionals who want to ground their strategies in current data and prepare for what’s next in the privacy landscape.

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-und-verwaltung-von-multiuser-umgebungen/ HCL Nomad Web wird als die nächste Generation des HCL Notes-Clients gefeiert und bietet zahlreiche Vorteile, wie die Beseitigung des Bedarfs an Paketierung, Verteilung und Installation. Nomad Web-Client-Updates werden “automatisch” im Hintergrund installiert, was den administrativen Aufwand im Vergleich zu traditionellen HCL Notes-Clients erheblich reduziert. Allerdings stellt die Fehlerbehebung in Nomad Web im Vergleich zum Notes-Client einzigartige Herausforderungen dar. Begleiten Sie Christoph und Marc, während sie demonstrieren, wie der Fehlerbehebungsprozess in HCL Nomad Web vereinfacht werden kann, um eine reibungslose und effiziente Benutzererfahrung zu gewährleisten. In diesem Webinar werden wir effektive Strategien zur Diagnose und Lösung häufiger Probleme in HCL Nomad Web untersuchen, einschließlich - Zugriff auf die Konsole - Auffinden und Interpretieren von Protokolldateien - Zugriff auf den Datenordner im Cache des Browsers (unter Verwendung von OPFS) - Verständnis der Unterschiede zwischen Einzel- und Mehrbenutzerszenarien - Nutzung der Client Clocking-Funktion

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Procurement Insights Cost To Value Guide.pptxJon Hansen

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

AI and Data Privacy in 2025: Global TrendsInData Labs

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

Sugarcoating your frontend one ViewModel at a time

3. Sugarcoating your frontend one ViewModel at a time A dive into modern JavaScript development FocusH Web Junkie asS hifted™ d MVP @ pavsaun @einar i

4. The Web

5. DDD

6. DDD DOM Driven Development

8. What is jQuery?

9. What is jQuery? • "jQuery is designed to change the way you write JavaScript" • Cross browser • Dom traversing • Event handling • Animations • Ajax

10. And it all begins with $

11. And it all begins with $ • Target elements with CSS selectors • $("#elementId").makeMagic()

12. And it all begins with $

13. And it all begins with $

14. And it all begins with $

15. And it all begins with $

16. ... ask what you can do for the DOM... • Polluted CSS selectors • Passive views • Heavy coupling • Bleeding JavaScript (business logic) to DOM • Hard to test

17. ... thats so 2011...

18. MVVM Model View ViewModel

19. MVVM Model View Observes ViewModel

20. MVVM Get from Model server View Observes ViewModel Observable

21. Like they do on the Discovery Channel • Based on Martin Fowlers Presentation Model - 2004 (http://martinfowler.com/eaaDev/PresentationModel.html) • XAML • WPF • Silverlight • WP7 • WinRT

22. Model • Typically data fetched from the server • Could be observable • Can be extended with computed values (e.g. FullName = FirstName + LastName)

23. View • Declaratively observe the ViewModel • The control is given back to the designer • Separation between the designer and the developer

24. ViewModel ...there is no DOM! • “Code Contract” • State • Behavior • Enables Mockup data much easier • Testable

25. KnockoutJS • Steve Sanderson (Microsoft fella) • v2.0 • Nuget • http://www.knockoutjs.com • ... or on a CDN http://cdn.dolittle.com/knockout/knockout-2.0.0.js

26. ... by example ...

27. ... by example ...

28. ... by example ...

29. ... by example ...

30. Knockout some more with.. • Custom bindings • Extenders • Plugins

31. Custom Bindings • Declaratively used from the View • No bleeding of view concern into ViewModel • Transitions based on state • Insert jQuery here!

33. .. no-one writes code without tests / specs.. yes, JavaScript is code!

34. Its a jungle out there • JsTestDriver • YUI Test • BusterJs • Jasmine • JsUnit • QUnit • ... and then some...

35. Forseti • Getting started easily • Intuitive UI (Yes, I said it - UI) • Easy to install • Integrate with the most popular tools (IDEs + Test Runners) • Run headlessly • In fact - without any browser, not even hidden! • Run any test framework • Run on multiple JavaScript engines • Eventually run in a browser context

36. Single Page Applications • Never postback - again • It is an application approach - not a site approach, different mindset!

37. Application Storage • 5 MB storage for your application • HTML • CSS • JavaScript • Other static ﬁles...

38. Local Storage • 25MB by default - can be increased programatically with user interaction • Ofﬂine data storage

39. Frameworks • Sencha / ExtJs • Backbone • Ember • Spine • Skeleton • JavaScriptMVC • Sammy.js • YUI • Knockback (hybrid) • ... and then some...

40. what about my dependencies? • AMD - Asynchronous Module Deﬁnition • CommonJs • RequireJs • curl.js • ... • JS vNext / Harmony

41. Compositional UIs • Bifrost - Features • UriMapper

42. Event Aggregator ViewModel 1 ViewModel 2

44. [email protected] [email protected]

45. Resources • http://knockoutjs.com • http://github.com/dolittlestudios/bifrost • http://github.com/dolittlestudios/forseti

Editor's Notes

#2: \n
#3: \n
#4: \n
#5: \n
#6: \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

Sugarcoating your frontend one ViewModel at a time

Recommended

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Sugarcoating your frontend one ViewModel at a time (20)

Recently uploaded (20)

Sugarcoating your frontend one ViewModel at a time

Editor's Notes