The document discusses strategies for building modular widgets in jQuery. It recommends thinking of widgets as small, decoupled components that communicate through events. Components should subscribe to and respond to events from other components, with references only going downward between layers. Each layer consumes events from lower layers and publishes events upward. The document also recommends decorating widget functions to add logging or other functionality.
The document summarizes new features and changes to the jQuery event system in version 1.7. Key points include:
- The .on() and .off() methods were introduced to unify event binding, removing confusion from multiple older methods. This improves performance and reduces code size.
- Event delegation was optimized through "quickIs()" to speed up selector matching, improving delegation performance by 2-4x in most browsers.
- Existing event bugs were fixed and the system was overhauled to make events more "hookable" and extensible.
Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
This document provides an introduction to FuncUnit, a JavaScript functional testing framework. It discusses barriers to testing JavaScript applications, how FuncUnit addresses these barriers through its easy to use API and ability to simulate user interactions across browsers. It also provides examples of using FuncUnit to test applications written with jQuery and without page reloads.
Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
This document summarizes key topics from a jQuery Brownbag presentation, including checking for null values, setting default values, properties, why jQuery is awesome, jQuery's founder and philosophy, selecting elements, events in jQuery, Ajax examples, plugins, and learning more about jQuery. The document provides code examples for common tasks like DOM manipulation, event handling, and Ajax using jQuery.
The document summarizes new features and changes to the jQuery event system in version 1.7. Key points include:
- The .on() and .off() methods were introduced to unify event binding, removing confusion from multiple older methods. This improves performance and reduces code size.
- Event delegation was optimized through "quickIs()" to speed up selector matching, improving delegation performance by 2-4x in most browsers.
- Existing event bugs were fixed and the system was overhauled to make events more "hookable" and extensible.
Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
This document provides an introduction to FuncUnit, a JavaScript functional testing framework. It discusses barriers to testing JavaScript applications, how FuncUnit addresses these barriers through its easy to use API and ability to simulate user interactions across browsers. It also provides examples of using FuncUnit to test applications written with jQuery and without page reloads.
Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
This document summarizes key topics from a jQuery Brownbag presentation, including checking for null values, setting default values, properties, why jQuery is awesome, jQuery's founder and philosophy, selecting elements, events in jQuery, Ajax examples, plugins, and learning more about jQuery. The document provides code examples for common tasks like DOM manipulation, event handling, and Ajax using jQuery.
This document summarizes a presentation on unobtrusive JavaScript with jQuery. The presentation introduces JavaScript frameworks like jQuery and the concept of unobtrusive JavaScript. It discusses jQuery's core philosophy of simplifying interactions between HTML and JavaScript. The document outlines jQuery's API and popular plugins. It also covers lessons learned, including placing CSS at the top, JavaScript at the bottom, and assessing pages with Yslow. The presentation concludes with working examples and acknowledgments.
This document provides an introduction to jQuery, covering its features, comparisons to other frameworks, selectors, and plugins. jQuery is an open-source JavaScript library that simplifies DOM manipulation, event handling, animations, and Ajax interactions. It uses CSS-style selectors to select and manipulate HTML elements. Some key features include DOM element selections, DOM traversal/modification, DOM manipulation based on CSS selectors, events, effects/animations, Ajax, and extensibility through plugins. The document also discusses jQuery versus other frameworks like Dojo and YUI, demonstrates basic selectors and methods, and encourages the use of plugins to add additional functionality.
This document provides an introduction to jQuery for beginners. It discusses jQuery's history and benefits, how to download and include jQuery, basic selectors and filters, traversing elements, basic events and animations, jQuery UI libraries, AJAX functionality, and compares jQuery to other JavaScript frameworks. The presentation aims to explain jQuery concepts at a high level without being a tutorial or reference guide. It includes code examples throughout to demonstrate jQuery syntax and methods.
The document provides an overview of jQuery including:
- What jQuery is and its main features like DOM manipulation and AJAX
- How to include jQuery in an HTML document and basic usage syntax
- jQuery selectors to find elements and filters to refine selections
- Common jQuery methods for manipulating attributes, events, HTML, CSS, and more
- Examples of using various jQuery functions and concepts
This document provides an overview of jQuery, a JavaScript library for DOM manipulation. It discusses jQuery's CSS selector syntax, methods for manipulating DOM elements and collections, event handling, AJAX support through methods like load() and get(), and how jQuery is extensible through plugins. The document also provides examples of DOM traversal, value retrieval, event binding, and chaining methods.
This document discusses jQuery, a JavaScript library. It defines jQuery as a lightweight library that allows developers to "write less, do more". It describes how jQuery works by selecting elements and running functions on them. It also covers various jQuery methods for DOM manipulation like fading, sliding, and handling events. Key points covered include selecting elements, jQuery syntax, downloading jQuery, and how to get started with basic functionality.
*
Dsc02922_small Mike Hostetler 4.07
CEO at appendTo, LLC
4 talks
Description:
This talk will be a quick but thorough introduction to the jQuery Javascript Library. If you have zero experience with jQuery, this is the talk to start with. We will begin with a brief overview of jQuery and its history. We'll then introduce basic jQuery concepts and principles. To wrap up the session, we'll build a basic jQuery plugin.
This talk will be composed mainly of live coding, showing off examples of how to work with jQuery.
The content of this talk will be quite a bit different from the jQuery training offered prior to the conference. Because of the available time, the training will explore jQuery concepts in great depth, while this talk will cover them briefly.
jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. It is lightweight, cross-browser compatible, and used on over 41% of popular websites. This document provides an introduction and overview of jQuery selectors, DOM manipulation, events, effects, and Ajax capabilities in 3 sentences or less per topic.
jQuery is a popular JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax interactions more simple. It works across browsers and allows developers to write less code using its easy-to-use API. The document discusses how jQuery works, including how to launch code on document ready, add and remove HTML classes, and use callbacks and functions when passing arguments to other functions.
Jquery Complete Presentation along with Javascript BasicsEPAM Systems
jQuery is a JavaScript library that simplifies HTML document manipulation and event handling. It allows developers to select elements, hide/show elements, and handle events with simple and concise code. jQuery animations and effects like fade, slide, and animate allow for creative transitions between states.
jQuery Performance Tips and Tricks (2011)Addy Osmani
Today we’re going to take a look at best practices, tips and tricks for improving the performance of your jQuery code. Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bare in mind.
The document introduces the jQuery library, which is a popular JavaScript library that simplifies tasks like HTML document traversal, event handling, animating, and Ajax interactions. It notes that over 20% of websites use jQuery and outlines some of its main capabilities like selecting elements, hiding/showing elements, and loading remote HTML. Alternatives to jQuery are mentioned but it is positioned as standing alone in popularity based on Google search volumes.
Stack Overflow Austin - jQuery for DevelopersJonathan Sharp
Jonathan Sharp is a freelance developer and member of the jQuery team. He gave an introduction to jQuery covering the following key points:
1. jQuery is a JavaScript library that simplifies DOM manipulation, event handling, animations and Ajax interactions. It uses CSS selectors to find elements and chaining to perform multiple operations in one line of code.
2. The core concepts of jQuery include finding elements and performing actions on them, creating new elements and appending them, chaining and implicit iteration, and understanding the different parameter types like selectors, HTML and DOM elements.
3. An overview of the jQuery API was provided covering core functionality, selectors, attributes, traversing, manipulation, CSS, events
The document provides an agenda and overview for a SharePoint Saturday session on using SharePoint and jQuery. The session will cover the history of SharePoint and jQuery, an overview of jQuery, best practices for when to use jQuery and how to deploy and develop with it. It will also discuss using jQuery to interact with SharePoint forms and lists, and demonstrate some third party jQuery libraries.
The document discusses the jQuery framework, explaining why jQuery should be used, what the $() function does, how to write unobtrusive JavaScript, and how to extend jQuery through plugins. It also covers using jQuery with other libraries by relinquishing control of the $ variable through the $.noConflict() method. Key features of jQuery include its small file size, cross-browser compatibility, and ease of selecting, manipulating, and animating elements.
jQuery Anti-Patterns for Performance & CompressionPaul Irish
The document discusses various jQuery anti-patterns that can negatively impact performance and compression. It describes caching selections, using document fragments to append content outside of loops, avoiding unnecessary re-querying of elements, and leveraging event delegation with delegate() instead of binding individual handlers. The document emphasizes optimizing selector syntax from right to left, avoiding universal selectors, and detaching elements from the DOM when manipulating them to improve speed.
The document discusses jQuery basics and the DOM. It explains that the DOM is how browsers structure HTML documents into an XML format. jQuery allows selecting elements from the DOM using CSS-style selectors and manipulating them using jQuery functions. Popular uses of jQuery include DOM manipulation, effects, AJAX calls, and building plugins. The document encourages learning more about jQuery through its online documentation.
The document summarizes information about the jQuery Foundation. It discusses that the Foundation coordinates work on the jQuery code, documentation, infrastructure and events. It is a non-profit organization funded through conferences, donations and memberships. The Foundation supports jQuery projects and web developers, and participates in standards processes. Upcoming releases of jQuery will be published on Bower and npm for dependency management, use AMD internally, defer feature detects, and aim to reduce forced layouts to improve performance. Developers are encouraged to understand how browsers work and avoid patterns that can cause layout thrashing.
The document discusses plans to merge jQuery UI and jQuery Mobile to create code that works across all devices and environments. Key points include:
1) Creating a shared CSS framework and responsive widgets for layouts and user interfaces.
2) Developing techniques like SVG icons with PNG fallbacks to optimize performance across different platforms and devices.
3) Building a common widget factory and APIs to create reusable and customizable interface elements that work with or without JavaScript.
4) Continuing to improve form controls and other widgets to provide consistent styling and interactions across all form factors.
This document summarizes a presentation on unobtrusive JavaScript with jQuery. The presentation introduces JavaScript frameworks like jQuery and the concept of unobtrusive JavaScript. It discusses jQuery's core philosophy of simplifying interactions between HTML and JavaScript. The document outlines jQuery's API and popular plugins. It also covers lessons learned, including placing CSS at the top, JavaScript at the bottom, and assessing pages with Yslow. The presentation concludes with working examples and acknowledgments.
This document provides an introduction to jQuery, covering its features, comparisons to other frameworks, selectors, and plugins. jQuery is an open-source JavaScript library that simplifies DOM manipulation, event handling, animations, and Ajax interactions. It uses CSS-style selectors to select and manipulate HTML elements. Some key features include DOM element selections, DOM traversal/modification, DOM manipulation based on CSS selectors, events, effects/animations, Ajax, and extensibility through plugins. The document also discusses jQuery versus other frameworks like Dojo and YUI, demonstrates basic selectors and methods, and encourages the use of plugins to add additional functionality.
This document provides an introduction to jQuery for beginners. It discusses jQuery's history and benefits, how to download and include jQuery, basic selectors and filters, traversing elements, basic events and animations, jQuery UI libraries, AJAX functionality, and compares jQuery to other JavaScript frameworks. The presentation aims to explain jQuery concepts at a high level without being a tutorial or reference guide. It includes code examples throughout to demonstrate jQuery syntax and methods.
The document provides an overview of jQuery including:
- What jQuery is and its main features like DOM manipulation and AJAX
- How to include jQuery in an HTML document and basic usage syntax
- jQuery selectors to find elements and filters to refine selections
- Common jQuery methods for manipulating attributes, events, HTML, CSS, and more
- Examples of using various jQuery functions and concepts
This document provides an overview of jQuery, a JavaScript library for DOM manipulation. It discusses jQuery's CSS selector syntax, methods for manipulating DOM elements and collections, event handling, AJAX support through methods like load() and get(), and how jQuery is extensible through plugins. The document also provides examples of DOM traversal, value retrieval, event binding, and chaining methods.
This document discusses jQuery, a JavaScript library. It defines jQuery as a lightweight library that allows developers to "write less, do more". It describes how jQuery works by selecting elements and running functions on them. It also covers various jQuery methods for DOM manipulation like fading, sliding, and handling events. Key points covered include selecting elements, jQuery syntax, downloading jQuery, and how to get started with basic functionality.
*
Dsc02922_small Mike Hostetler 4.07
CEO at appendTo, LLC
4 talks
Description:
This talk will be a quick but thorough introduction to the jQuery Javascript Library. If you have zero experience with jQuery, this is the talk to start with. We will begin with a brief overview of jQuery and its history. We'll then introduce basic jQuery concepts and principles. To wrap up the session, we'll build a basic jQuery plugin.
This talk will be composed mainly of live coding, showing off examples of how to work with jQuery.
The content of this talk will be quite a bit different from the jQuery training offered prior to the conference. Because of the available time, the training will explore jQuery concepts in great depth, while this talk will cover them briefly.
jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. It is lightweight, cross-browser compatible, and used on over 41% of popular websites. This document provides an introduction and overview of jQuery selectors, DOM manipulation, events, effects, and Ajax capabilities in 3 sentences or less per topic.
jQuery is a popular JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax interactions more simple. It works across browsers and allows developers to write less code using its easy-to-use API. The document discusses how jQuery works, including how to launch code on document ready, add and remove HTML classes, and use callbacks and functions when passing arguments to other functions.
Jquery Complete Presentation along with Javascript BasicsEPAM Systems
jQuery is a JavaScript library that simplifies HTML document manipulation and event handling. It allows developers to select elements, hide/show elements, and handle events with simple and concise code. jQuery animations and effects like fade, slide, and animate allow for creative transitions between states.
jQuery Performance Tips and Tricks (2011)Addy Osmani
Today we’re going to take a look at best practices, tips and tricks for improving the performance of your jQuery code. Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bare in mind.
The document introduces the jQuery library, which is a popular JavaScript library that simplifies tasks like HTML document traversal, event handling, animating, and Ajax interactions. It notes that over 20% of websites use jQuery and outlines some of its main capabilities like selecting elements, hiding/showing elements, and loading remote HTML. Alternatives to jQuery are mentioned but it is positioned as standing alone in popularity based on Google search volumes.
Stack Overflow Austin - jQuery for DevelopersJonathan Sharp
Jonathan Sharp is a freelance developer and member of the jQuery team. He gave an introduction to jQuery covering the following key points:
1. jQuery is a JavaScript library that simplifies DOM manipulation, event handling, animations and Ajax interactions. It uses CSS selectors to find elements and chaining to perform multiple operations in one line of code.
2. The core concepts of jQuery include finding elements and performing actions on them, creating new elements and appending them, chaining and implicit iteration, and understanding the different parameter types like selectors, HTML and DOM elements.
3. An overview of the jQuery API was provided covering core functionality, selectors, attributes, traversing, manipulation, CSS, events
The document provides an agenda and overview for a SharePoint Saturday session on using SharePoint and jQuery. The session will cover the history of SharePoint and jQuery, an overview of jQuery, best practices for when to use jQuery and how to deploy and develop with it. It will also discuss using jQuery to interact with SharePoint forms and lists, and demonstrate some third party jQuery libraries.
The document discusses the jQuery framework, explaining why jQuery should be used, what the $() function does, how to write unobtrusive JavaScript, and how to extend jQuery through plugins. It also covers using jQuery with other libraries by relinquishing control of the $ variable through the $.noConflict() method. Key features of jQuery include its small file size, cross-browser compatibility, and ease of selecting, manipulating, and animating elements.
jQuery Anti-Patterns for Performance & CompressionPaul Irish
The document discusses various jQuery anti-patterns that can negatively impact performance and compression. It describes caching selections, using document fragments to append content outside of loops, avoiding unnecessary re-querying of elements, and leveraging event delegation with delegate() instead of binding individual handlers. The document emphasizes optimizing selector syntax from right to left, avoiding universal selectors, and detaching elements from the DOM when manipulating them to improve speed.
The document discusses jQuery basics and the DOM. It explains that the DOM is how browsers structure HTML documents into an XML format. jQuery allows selecting elements from the DOM using CSS-style selectors and manipulating them using jQuery functions. Popular uses of jQuery include DOM manipulation, effects, AJAX calls, and building plugins. The document encourages learning more about jQuery through its online documentation.
The document summarizes information about the jQuery Foundation. It discusses that the Foundation coordinates work on the jQuery code, documentation, infrastructure and events. It is a non-profit organization funded through conferences, donations and memberships. The Foundation supports jQuery projects and web developers, and participates in standards processes. Upcoming releases of jQuery will be published on Bower and npm for dependency management, use AMD internally, defer feature detects, and aim to reduce forced layouts to improve performance. Developers are encouraged to understand how browsers work and avoid patterns that can cause layout thrashing.
The document discusses plans to merge jQuery UI and jQuery Mobile to create code that works across all devices and environments. Key points include:
1) Creating a shared CSS framework and responsive widgets for layouts and user interfaces.
2) Developing techniques like SVG icons with PNG fallbacks to optimize performance across different platforms and devices.
3) Building a common widget factory and APIs to create reusable and customizable interface elements that work with or without JavaScript.
4) Continuing to improve form controls and other widgets to provide consistent styling and interactions across all form factors.
jQuery Austin 2013 - Building a Development CultureMonika Piotrowicz
From jQuery Austin, held September 10-11 2013, my talk on creating a stronger developer process and culture to support dev learning and strengthen creative influence
The keynote discusses the history and mission of the jQuery Foundation, a 501(c)6 nonprofit trade association that supports the development of jQuery, jQuery UI, jQuery Mobile, and related projects. It was formed in 2012 after jQuery transitioned from being supported by individual developers. The foundation's mission is to support development of the jQuery projects, develop documentation and support resources, and foster the jQuery community. It offers a membership program for companies and has various membership benefits and levels. It also manages an accelerator fund to help jQuery/jQuery Mobile projects grow and plans several international conferences in the next year to support the community.
jQuery Conference San Diego 2014 - Web Performancedmethvin
This document discusses jQuery and web performance. It describes how the jQuery Foundation maintains jQuery code and supports developers. It then discusses recent jQuery releases and how jQuery can be customized and used in different environments. The document outlines how the browser loads pages and the importance of prefetching resources. It recommends tools for analyzing page performance like YSlow, PageSpeed, and webpagetest.org. It provides tips for improving performance such as avoiding unnecessary layouts, optimizing JavaScript loops, and using developer tools to profile scripts and identify bottlenecks.
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceDan Gribbin
This document summarizes strategies for transforming unmaintainable front-end code ("Disaster CodeTM") into organized, high-quality code through proper planning, separation of concerns, performance optimization, and stakeholder communication. It outlines how the author's team improved their codebase ("Neptune") by adopting modular patterns like MVC, optimizing page load times, and collaborating on standards. The document stresses that upfront planning, separation of functionality, and ongoing maintenance are crucial to developing software that is sustainable, performant, and a pleasure to work with.
The document discusses web components, which include HTML templates, custom elements, shadow DOM, and HTML imports. Web components allow the creation of reusable custom elements with their own styles and DOM structure. They provide encapsulation and help avoid issues with global namespaces. While browser support is still emerging for some features, polyfills exist and frameworks like Polymer make web components accessible today. Web components represent an important evolution of the web that will improve how code is structured and shared.
jQuery Chicago 2014 - Next-generation JavaScript TestingVlad Filippov
This document discusses next-generation JavaScript testing tools. It introduces The Intern, an open source framework for testing JavaScript code with both unit and functional tests. The Intern supports cross-browser testing, integrates with services like SauceLabs and BrowserStack, and can run tests across continuous integration systems. The presentation provides examples of using The Intern to test different applications and frameworks.
This document discusses improving website performance. It outlines three pillars of performance: visibility, interactivity, and responsiveness. For each pillar, it recommends books and techniques. Tips include using tools like Firebug and YSlow, delaying initialization, throttling and debouncing events, and profiling code. While optimizations can improve performance, they also increase costs. The document emphasizes establishing a baseline and focusing first on low-hanging fruit before more complex optimizations. It concludes by thanking the sponsors and providing contact information.
This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. It discusses using feature testing versus browser sniffing to determine the appropriate image to serve, including testing browser width, screen resolution, and bandwidth. It then covers various techniques for serving adaptive images, such as using .htaccess files, the <picture> element, srcset attributes, and JavaScript libraries. It emphasizes using a mobile-first approach and progressive enhancement to provide the best experience for all devices.
The document discusses improvements and changes to the Sizzle selector engine in jQuery 1.8. Key points include:
- Matching and filtering performance improved by around 10% on average.
- ID selections rooted at an element improved by 300%.
- Bugs were fixed in how different browsers handle certain selectors with querySelectorAll and matchesSelector.
- Support for combining multiple combinators in selectors was improved.
- More changes are planned prior to release, including implementing a compiler to avoid re-looping elements.
The document summarizes the keynote presentation at the 2012 jQuery Conference about recent and upcoming developments with jQuery.
The presentation discussed:
1) The role of the jQuery Foundation in supporting the jQuery project and community.
2) Recent releases of jQuery Core, including version 1.8 which focused on modularity, performance improvements, and deprecating unused code.
3) Plans for upcoming major releases, with jQuery 1.9 continuing to clean up APIs and jQuery 2.0 removing support for older browsers to simplify the codebase.
The document discusses techniques for writing clean JavaScript code. It provides examples of code smells and improvements to address issues like attaching events from the outside, separating selection from logic, shallow scope, overwriting default behavior, and separating logic from views. The document advocates for practices like modularizing functions, separating DOM manipulation from models, and creating model objects to represent DOM elements rather than directly manipulating the DOM. It encourages learning clean JavaScript techniques to write better structured and more maintainable code.
Building complex User Interfaces with Sitecore and ReactJonne Kats
- React is a JavaScript library developed by Facebook that is used by companies like AirBnb, Netflix, and Twitter.
- React focuses only on the view layer of MVC.
- It uses a virtual DOM for rendering UI rather than directly manipulating the real DOM, allowing for faster re-renders and more efficient change detection.
We, as developers, often think that we don’t have to or don’t need to know what are what they call design patterns. We think that we already know how to build a software and don’t need all this theory. Years after years, by having to deal with the low maintainability of my own codebases, I explored a lot of ways of decoupling applications, in order to have enterprise-grade software that last for years. With concrete examples, I want to share with you some design patterns and how they can help you to grow well structured and decoupled applications.
Versão com GIFs:
https://docs.google.com/presentation/d/17M-jHlkAP5KPfQ4_Alck_wIsN2gK3dZNGfJR9Bi1L50/present
Códigos para instalação das dependências:
https://github.com/fdaciuk/talks/tree/master/2015/wordcamp-sao-paulo
When you move beyond adding simple enhancements to your website with jQuery and start building full-blown client-side applications, how do you organize your code? At this month's Triangle JS Meetup, we'll take a look at patterns for application development using jQuery that promote the principles of tight encapsulation and loose coupling, including classes, the publish/subscribe paradigm, and dependency management and build systems.
The document provides tips for creating reusable plugins in CakePHP. It discusses placing plugin code in standardized directories, extending and customizing existing plugins, using components and behaviors to add reusable logic, and automating tasks through callbacks and configuration. Emphasis is placed on writing clean, well-tested code and documenting plugins to make them easy for others to implement and extend.
Refactoring, Agile Entwicklung, Continuous Integration – all diese für nachhaltigen Erfolg wichtigen Vorgehensweisen setzen Erfahrung mit Unit Testing voraus. Abseits von den üblichen "Bowling"-Beispielen möchten wir gerne einen Crashkurs inkl. Best Practices für das erfolgreiche Unit Testing durchführen. Anhand eines Beispielprojekts auf Basis des Zend Frameworks werden wir nach der Installation von PHPUnit auf allen Notebooks gemeinsam eine kleine Applikation aufbauen, die durchgehend Test-driven entwickelt wird.
Backbone.js is a JavaScript framework that aims to solve issues with messy JavaScript code by implementing an MVC pattern and object-oriented principles, providing structure through core concepts like Models for data storage, Collections for grouping Models, and Views for rendering display logic, as well as a Router for navigation. It is lightweight at only 6kb and supports RESTful JSON APIs and event-driven programming.
Magento Live Australia 2016: Request FlowVrann Tulika
As a web application, Magento 2’s web request processing flow is similar to all other web framework flows, but offers more extension points to third-party developers. In this session, we will walk through a web request path in the Magento 2 application, from index.php to browser JS application, and will look at extension points available on that path.
Come to this talk prepared to learn about the Doctrine PHP open source project. The Doctrine project has been around for over a decade and has evolved from database abstraction software that dates back to the PEAR days. The packages provided by the Doctrine project have been downloaded almost 500 million times from packagist. In this talk we will take you through how to get started with Doctrine and how to take advantage of some of the more advanced features.
Building Lithium Apps (Like a Boss) was a workshop presented on the structure and philosophy of the Lithium framework and its applications, and how best to take advantage of them.
This document discusses dependency injection (DI) in AngularJS. It explains that DI allows high-level modules to depend on low-level abstractions rather than implementations. It then covers the different ways to define providers in AngularJS, including using the $provide service, as well as factories, services, values, and constants. It also discusses decorators as another way to modify existing services. The document provides recipes for when to use each provider type and concludes with some additional facts about injectors and ensuring scripts are in the proper order.
Saindo da zona de conforto… resolvi aprender androidDaniel Baccin
Palestra sobre Android realizada na Secomp - UECE. A ideia dessa palestra é motivar estudantes, profissionais e “devs”, em geral, a conhecer um pouco mais sobre o desenvolvimento de aplicativos na plataforma Android. Além disso, será discutido sobre os desafios enfrentados durante o aprendizado, oportunidades existentes no mercado, perspectivas futuras sobre a plataforma e experiências já adquiridas na área. Também, será abordando conceitos básicos e intermediários através de exemplos práticos, ferramentas utilizadas e dicas de boas práticas para o desenvolvimento.
This document provides an overview of using the Backbone.js framework for client-side MVC applications. It discusses why Backbone is useful for structuring JavaScript applications, its core architecture including models, collections, views and routers. It also provides examples of how to convert jQuery code to use a Backbone-based approach and lists some real-world applications that use Backbone.
This document provides an overview of Backbone.js and how it can be used to build dynamic web applications. It discusses the main Backbone components:
- Models represent single data objects and can be validated.
- Collections hold ordered sets of models and can fetch data from the server.
- Views handle the display and interaction of data from models and collections.
- Routers map URLs to functions that control the application flow.
The document then gives an example of using Backbone to build a simple shopping cart application with Products and Cart views, demonstrating how the components work together.
Kumar Pratik presented an overview of the Langoor feature SDK and API. The summary includes:
1) The SDK allows developers to create custom features for the Langoor editor with widgets, databases, and responses to actions like install and getProperty.
2) Features have main classes that define constructor, install, and other functions, while widgets define functions for HTML output, properties, and more.
3) The API uses responses to communicate with the editor, including forms, HTML, and actions like opening dialogs or the widget panel.
4) Developers need to understand HTML, CSS, JavaScript, PHP and MySQL to code features and widgets, which can include creating databases and handlers for functions
How to Get CNIC Information System with Paksim Ga.pptxdanishmna97
Pakdata Cf is a groundbreaking system designed to streamline and facilitate access to CNIC information. This innovative platform leverages advanced technology to provide users with efficient and secure access to their CNIC details.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!SOFTTECHHUB
As the digital landscape continually evolves, operating systems play a critical role in shaping user experiences and productivity. The launch of Nitrux Linux 3.5.0 marks a significant milestone, offering a robust alternative to traditional systems such as Windows 11. This article delves into the essence of Nitrux Linux 3.5.0, exploring its unique features, advantages, and how it stands as a compelling choice for both casual users and tech enthusiasts.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slackshyamraj55
Discover the seamless integration of RPA (Robotic Process Automation), COMPOSER, and APM with AWS IDP enhanced with Slack notifications. Explore how these technologies converge to streamline workflows, optimize performance, and ensure secure access, all while leveraging the power of AWS IDP and real-time communication via Slack notifications.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Programming Foundation Models with DSPy - Meetup SlidesZilliz
Prompting language models is hard, while programming language models is easy. In this talk, I will discuss the state-of-the-art framework DSPy for programming foundation models with its powerful optimizers and runtime constraint system.
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GraphRAG for Life Science to increase LLM accuracyTomaz Bratanic
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
1. Richard Lindsey @Velveeta http://conqueringtheclient.com/
PLATFORM FEE ARCHITECT | THE ADVISORY BOARD COMPANY
jQuery
Widgets
GETTING THE MOST OUT OF
7. Observe and
mediate.
BUNDLE SMALLER MODULES /
PROVIDE PUBLIC API / DIRECT
REFERENCES SHOULD ONLY GO
DOWNWARDS / EACH LAYER
CONSUMES LOWER-LEVEL
EVENTS & PUBLISHES UPWARDS
Richard Lindsey @Velveeta http://conqueringtheclient.com/
8. Observe and
mediate.
BUNDLE SMALLER MODULES /
PROVIDE PUBLIC API / DIRECT
REFERENCES SHOULD ONLY GO
DOWNWARDS / EACH LAYER
CONSUMES LOWER-LEVEL
EVENTS & PUBLISHES UPWARDS
Richard Lindsey @Velveeta http://conqueringtheclient.com/
9. Observe and
mediate.
BUNDLE SMALLER MODULES /
PROVIDE PUBLIC API / DIRECT
REFERENCES SHOULD ONLY GO
DOWNWARDS / EACH LAYER
CONSUMES LOWER-LEVEL
EVENTS & PUBLISHES UPWARDS
Richard Lindsey @Velveeta http://conqueringtheclient.com/
10. Observe and
mediate.
BUNDLE SMALLER MODULES /
PROVIDE PUBLIC API / DIRECT
REFERENCES SHOULD ONLY GO
DOWNWARDS / EACH LAYER
CONSUMES LOWER-LEVEL
EVENTS & PUBLISHES UPWARDS
Richard Lindsey @Velveeta http://conqueringtheclient.com/
18. Richard Lindsey @Velveeta http://conqueringtheclient.com/
MODIFY THE FACTORY FUNCTION
IF YOU NEED TO
Decorate ALL the
functions!
19. var widgetFactory = $.widget;
$.widget = function (name, base, prototype) {
var targetPrototype = prototype || base;
$.each(targetPrototype, function (key, callback) {
if (typeof callback === ‘function’) {
targetPrototype[key] = function () {
if (someConditionPasses) {
fireSomeFunction();
}
var result = callback.apply(this, arguments);
if (someOtherConditionPasses) {
fireSomeOtherFunction();
}
return result;
};
}
});
return widgetFactory.apply(this, arguments);
};
// The widget factory function itself has some function members itself,
// like $.widget.bridge and $.widget.extend. Don’t forget to copy those
// items over from the original factory to our new implementation!
$.each(widgetFactory, function (key, value) {
$.widget[key] = value;
});
20. var widgetFactory = $.widget;
$.widget = function (name, base, prototype) {
var targetPrototype = prototype || base;
$.each(targetPrototype, function (key, callback) {
if (typeof callback === ‘function’) {
targetPrototype[key] = function () {
if (someConditionPasses) {
fireSomeFunction();
}
var result = callback.apply(this, arguments);
if (someOtherConditionPasses) {
fireSomeOtherFunction();
}
return result;
};
}
});
return widgetFactory.apply(this, arguments);
};
// The widget factory function itself has some function members itself,
// like $.widget.bridge and $.widget.extend. Don’t forget to copy those
// items over from the original factory to our new implementation!
$.each(widgetFactory, function (key, value) {
$.widget[key] = value;
});
21. var widgetFactory = $.widget;
$.widget = function (name, base, prototype) {
var targetPrototype = prototype || base;
$.each(targetPrototype, function (key, callback) {
if (typeof callback === ‘function’) {
targetPrototype[key] = function () {
if (someConditionPasses) {
fireSomeFunction();
}
var result = callback.apply(this, arguments);
if (someOtherConditionPasses) {
fireSomeOtherFunction();
}
return result;
};
}
});
return widgetFactory.apply(this, arguments);
};
// The widget factory function itself has some function members itself,
// like $.widget.bridge and $.widget.extend. Don’t forget to copy those
// items over from the original factory to our new implementation!
$.each(widgetFactory, function (key, value) {
$.widget[key] = value;
});
22. var widgetFactory = $.widget;
$.widget = function (name, base, prototype) {
var targetPrototype = prototype || base;
$.each(targetPrototype, function (key, callback) {
if (typeof callback === ‘function’) {
targetPrototype[key] = function () {
if (someConditionPasses) {
fireSomeFunction();
}
var result = callback.apply(this, arguments);
if (someOtherConditionPasses) {
fireSomeOtherFunction();
}
return result;
};
}
});
return widgetFactory.apply(this, arguments);
};
// The widget factory function itself has some function members itself,
// like $.widget.bridge and $.widget.extend. Don’t forget to copy those
// items over from the original factory to our new implementation!
$.each(widgetFactory, function (key, value) {
$.widget[key] = value;
});
23. var widgetFactory = $.widget;
$.widget = function (name, base, prototype) {
var targetPrototype = prototype || base;
$.each(targetPrototype, function (key, callback) {
if (typeof callback === ‘function’) {
targetPrototype[key] = function () {
if (someConditionPasses) {
fireSomeFunction();
}
var result = callback.apply(this, arguments);
if (someOtherConditionPasses) {
fireSomeOtherFunction();
}
return result;
};
}
});
return widgetFactory.apply(this, arguments);
};
// The widget factory function itself has some function members itself,
// like $.widget.bridge and $.widget.extend. Don’t forget to copy those
// items over from the original factory to our new implementation!
$.each(widgetFactory, function (key, value) {
$.widget[key] = value;
});
24. Richard Lindsey @Velveeta http://conqueringtheclient.com/
ALWAYS TRY TO USE PUBLIC API
FOR FORWARD COMPATIBILITY
Decorate ALL the
functions!
25. Richard Lindsey @Velveeta http://conqueringtheclient.com/
WHO CARES ABOUT INTERNAL
IMPLEMENTATIONS?
Feel free to
mix it up.
26. Richard Lindsey @Velveeta http://conqueringtheclient.com/
OVERRIDE FUNCTIONALITY IN
ONE OF TWO WAYS:
Feel free to
mix it up.
$.widget Factory Widget Options
• Overrides prototype,
affects all instances
• Maintains pointer to
overridden function via
_super and
_superApply
• Overrides instance-
level functionality only
• Provides easy access
to consumers to
override functionality
27. $.widget(‘abc.dataloader’, {
options: {
url: null,
success: function (results) {
this.element.html(JSON.stringify(results));
},
// etc
},
fetch: function () {
this.element.addClass(‘loading’);
return this._load()
.done($.proxy(function (results) {
this.options.success.call(this, results);
}, this)
.always($.proxy(function () {
this.element.removeClass(‘loading’);
}, this));
},
_load: function () {
return $.ajax(this.options);
}
});
$.widget(‘abc.dataloader’, abc.dataloader, {
_load: function () {
var deferred = $.Deferred();
this.element.data(‘backboneCollection’).fetch({
reset: true,
success: function (collection) {
deferred.resolve(collection.toJSON());
},
error: function (collection, response) {
deferred.reject(response);
}
});
return deferred.promise();
}
});
var myTemplate = Handlebars.compile($(‘#myTemplate’).html());
$(‘#myDiv’).dataloader({
success: function (results) {
this.element.html(myTemplate(results));
}
});
28. $.widget(‘abc.dataloader’, {
options: {
url: null,
success: function (results) {
this.element.html(JSON.stringify(results));
},
// etc
},
fetch: function () {
this.element.addClass(‘loading’);
return this._load()
.done($.proxy(function (results) {
this.options.success.call(this, results);
}, this)
.always($.proxy(function () {
this.element.removeClass(‘loading’);
}, this));
},
_load: function () {
return $.ajax(this.options);
}
});
$.widget(‘abc.dataloader’, abc.dataloader, {
_load: function () {
var deferred = $.Deferred();
this.element.data(‘backboneCollection’).fetch({
reset: true,
success: function (collection) {
deferred.resolve(collection.toJSON());
},
error: function (collection, response) {
deferred.reject(response);
}
});
return deferred.promise();
}
});
var myTemplate = Handlebars.compile($(‘#myTemplate’).html());
$(‘#myDiv’).dataloader({
success: function (results) {
this.element.html(myTemplate(results));
}
});
29. $.widget(‘abc.dataloader’, {
options: {
url: null,
success: function (results) {
this.element.html(JSON.stringify(results));
},
// etc
},
fetch: function () {
this.element.addClass(‘loading’);
return this._load()
.done($.proxy(function (results) {
this.options.success.call(this, results);
}, this)
.always($.proxy(function () {
this.element.removeClass(‘loading’);
}, this));
},
_load: function () {
return $.ajax(this.options);
}
});
$.widget(‘abc.dataloader’, abc.dataloader, {
_load: function () {
var deferred = $.Deferred();
this.element.data(‘backboneCollection’).fetch({
reset: true,
success: function (collection) {
deferred.resolve(collection.toJSON());
},
error: function (collection, response) {
deferred.reject(response);
}
});
return deferred.promise();
}
});
var myTemplate = Handlebars.compile($(‘#myTemplate’).html());
$(‘#myDiv’).dataloader({
success: function (results) {
this.element.html(myTemplate(results));
}
});
30. $.widget(‘abc.dataloader’, {
options: {
url: null,
success: function (results) {
this.element.html(JSON.stringify(results));
},
// etc
},
fetch: function () {
this.element.addClass(‘loading’);
return this._load()
.done($.proxy(function (results) {
this.options.success.call(this, results);
}, this)
.always($.proxy(function () {
this.element.removeClass(‘loading’);
}, this));
},
_load: function () {
return $.ajax(this.options);
}
});
$.widget(‘abc.dataloader’, abc.dataloader, {
_load: function () {
var deferred = $.Deferred();
this.element.data(‘backboneCollection’).fetch({
reset: true,
success: function (collection) {
deferred.resolve(collection.toJSON());
},
error: function (collection, response) {
deferred.reject(response);
}
});
return deferred.promise();
}
});
var myTemplate = Handlebars.compile($(‘#myTemplate’).html());
$(‘#myDiv’).dataloader({
success: function (results) {
this.element.html(myTemplate(results));
}
});
32. Make it
testable!
DOES IT PERFORM A LOGICAL
OPERATION OR CALCULATION? /
IS IT PART OF THE WIDGET’S
PUBLIC-FACING API?
Richard Lindsey @Velveeta http://conqueringtheclient.com/
33. Make it
testable!
DOES IT PERFORM A LOGICAL
OPERATION OR CALCULATION? /
IS IT PART OF THE WIDGET’S
PUBLIC-FACING API?
Richard Lindsey @Velveeta http://conqueringtheclient.com/
34. Richard Lindsey @Velveeta http://conqueringtheclient.com/
PUBLIC FUNCTIONS SHOULD
HAVE UNIT TESTS / STORE
PROTOTYPES IN OBJECT
NAMESPACES / TEST LOGICAL
FUNCTIONS SEPARATELY
expose it!
35. Richard Lindsey @Velveeta http://conqueringtheclient.com/
PUBLIC FUNCTIONS SHOULD
HAVE UNIT TESTS / STORE
PROTOTYPES IN OBJECT
NAMESPACES / TEST LOGICAL
FUNCTIONS SEPARATELY
expose it!
36. Richard Lindsey @Velveeta http://conqueringtheclient.com/
PUBLIC FUNCTIONS SHOULD
HAVE UNIT TESTS / STORE
PROTOTYPES IN OBJECT
NAMESPACES / TEST LOGICAL
FUNCTIONS SEPARATELY
expose it!
45. ONLY MAKE COMPONENTS AS
LARGE AS THEY NEED TO BE /
KEEP THEM AS DECOUPLED AS
POSSIBLE / CONSUME
DOWNWARDS, COMMUNICATE
UPWARDS
Richard Lindsey @Velveeta http://conqueringtheclient.com/
Wrap it up
already…
46. ONLY MAKE COMPONENTS AS
LARGE AS THEY NEED TO BE /
KEEP THEM AS DECOUPLED AS
POSSIBLE / CONSUME
DOWNWARDS, COMMUNICATE
UPWARDS
Richard Lindsey @Velveeta http://conqueringtheclient.com/
Wrap it up
already…
47. ONLY MAKE COMPONENTS AS
LARGE AS THEY NEED TO BE /
KEEP THEM AS DECOUPLED AS
POSSIBLE / CONSUME
DOWNWARDS, COMMUNICATE
UPWARDS
Richard Lindsey @Velveeta http://conqueringtheclient.com/
Wrap it up
already…
48. DECORATE THE FACTORY, BUT BE
CAREFUL ABOUT TYING TO
IMPLEMENTATIONS.
Richard Lindsey @Velveeta http://conqueringtheclient.com/
Wrap it up
already…
49. MAKE FUNCTIONS & OPTIONS
GRANULAR AND ROBUST FOR
POTENTIAL OVERRIDES.
Richard Lindsey @Velveeta http://conqueringtheclient.com/
Wrap it up
already…
50. TEST, TEST, AND TEST! MAKE
EVERY ATTEMPT TO ENSURE
BACKWARD COMPATIBILITY FOR
CONSUMERS.
Richard Lindsey @Velveeta http://conqueringtheclient.com/
Wrap it up
already…
51. thanks!
Presentation available online: http://bit.ly/jqwidgets
Richard Lindsey @velveeta http://conqueringtheclient.com/
PLATFORM FEE ARCHITECT | THE ADVISORY BOARD COMPANY
Editor's Notes
Hi, I’m Richard Lindsey, a front-end architect working for the Advisory Board Company here in Austin. We’re a healthcare consulting company that deals a lot with metrics and regurgitating data out onto the screen in various forms, and we utilize the jQuery widget factory pretty extensively to that end. If you’re not familiar w/ the widget factory, jQuery UI is a separate add-on library, based on and extending jQuery, and providing a pretty nice factory method to create your own library of visual widget components. I’m here to share some tips and tricks on working with that factory and in general component architecture… So…
Let’s say we’re making widgets…
What’s a Widget? In the context of front-end engineering, it’s simply a modular, reusable, self-contained package that handles the visualization of some UI component, as well as any behavior and logic that’s part of that component’s interaction… Think of things like typeaheadautocompleters, or split buttons, or tabbed views, or any number of other things, and those can all be thought of as widgetized components… So what kinds of things should we be considering when we’re developing these components?
Think small… Think modular… You should be trying to build your components so that they fulfill a single, specific need. Anything too complex should be broken down into smaller components that can be used in other facets of your application… Consider the autocompleter: it could be made up of, at a minimum, an input element, some form of data-fetching utility, whether that’s via ajax or some client-side data set, and something to render the suggestions in a dropdown format… If you build all of that into 1 widget, you can’t reuse those bits and pieces in anything else… So whenever possible, think as small as possible… This is an analogy for how your widgets should kind of come together. You can think of the most basic components: text boxes, checkboxes, select elements, overlays, whatever, as elements. From there, you can start coupling them to other elements to form larger and more complex compound components… At that point, you can start thinking larger, about how compound widgets can come together to form cells and organisms, being synonymous with the workflow of an entire page, or even of an entire application…
You should be trying to keep your components as directly decoupled as possible. What does this mean? Well, in our autocompleter example, when something’s typed into the textbox, we can have the input itself tell the data-loader “hey, I have updated data for you to provde me matches against”, and the data-loader can fetch them and render the dropdown list itself, and when something’s selected from it, the dropdown can tell the input “here’s the complete string you should now populate yourself with”… However, that requires these components having direct knowledge of each other everywhere you want to do something like this… Instead, you should make these individual pieces broadcast events whenever they have updates that other interested parties might want to know about…
Now, once you have them broadcasting events, you can have them subscribing to each others’ events, and feeding data to them, but that still doesn’t solve the problem of them being directly coupled to each other…
You should be bundling these smaller modules up and wrapping them in some kind of parent widget that can play traffic cop between them all… The parent should be responsible for subscribing to their events, and for figuring out what needs to be done with that data: whether it should use it directly somehow, or funnel it into one of those child widgets to be acted upon…
You should also be providing some kind of public API on all of your widgets that you can use for calling into them and handing off data. All jQuery UI widgets have at least a partial API provided by the factory: enable and disable, option, widget, and destroy... Whatever purpose your widget serves should have a robust enough API that nobody has to try to hack their way in through the instance data that’s bound to that element, as I’m sure many of you have had to do in the past…
Always try to keep in mind that dependency relationship… None of the element-level components are dependent on the parent, it’s the parent that’s dependent on them… As such, any direct references to those widgets should be done in a top-down fashion, with the parent referencing its children and not the other way around…
Here, I say each layer should listen for events, because you never know when some other widget is going to be consuming a parent widget you’re writing here… That’s the beauty of this design methodology, you don’t really have to care… You just worry about what you’re listening for from your dependencies, and anytime you have something interesting to publish, throw it out into the world as a new event of your own, and other consumers can now consume those events, with your widget never knowing who’s listening, and never having to write specific logic to deal with it…
Here’s a simple example of what we might find in an autocomplete component…
We declare some dependencies on other, smaller widgets…
We then bind listeners to those child widgets…
We supply a couple of functions for interfacing directly with this widget from higher levels…
And finally, we set up some event triggers of our own, to broadcast things out into the world… So here’s what a sample implementation could look like in the browser…
Now, so far this whole talk has been about keeping things nice and abstracted, using public API’s so you don’t have to concern yourself with how things are implemented internally… For the next 2 minutes, I want you to throw out everything I’ve said… See, all those things I’ve been saying, those are the way things work in an ideal world, and there are times when I’m sure we’ve all had to break the rules of good development patterns to satisfy some business need…
I found myself having need of supplying our product’s consumers with a more robust event-publishing system… There are times our developers wanted to be alerted to when a widget had built some dropdown list, or some other internal mechanism had changed, and we just didn’t provide that many events… Our product releases are on a monthly schedule, meaning that when they found a need for something we weren’t currently publishing, their request would have to wait up to a month, *if* we were able to fit that feature request into our current release… Instead, I decided to start decorating all of the prototypes for all of our published widgets, so that they could tell the widget to start auto-publishing an event before or after any function it used… Now we can still handle custom event requests that may include extra data being passed as part of an official custom event request, but the majority of those requests can be handled by just using this new event auto-publishing feature…
So, if you ever have need of decorating an entire prototype somehow, you should do it before it’s run through the factory, meaning you’ll have to decorate the factory function itself to keep this process as transparent as possible…
Here’s an example of how we might decide to decorate our factory function…
Here you can see us overwriting the widget factory function and creating a new version of it to used…
We iterate over our prototype methods, surround the execution of each one with a couple of logical checks, and fire some functions if they pass…
We also store off the return value of our original function, to return at the end of all that…
We then pass our decorated prototype through the original factory method to create the widget class definition, and port any extra properties over to our new factory function… There are a couple of extra functions that are stored as properties on the factory function object, like extend and bridge, so make sure you don’t forget this step or you *will* run into errors…
While this does allow people to tie event publishers to internal private functions, I can’t state strongly enough that you should avoid that development practice whenever possible… Always try to use the public API for forward compatibility, because you never know when internal implementations are going to change from one release to another… That public API acts as a sort of contract between the publisher and consumers of a widget, which should stay as consistent as possible from release to release, but the internal private functions have no such guarantee…
As long as your function interfaces are consistent, meaning the input and output formats stay the same, does it really matter how the guts of that function are implemented? Not really… And if we want to swap out functional implementations, we have a couple of different options for doing so…
The widget factory itself allows you to override any method, private or not… One nice thing about this method is that if directly affects the widget’s prototype, and any instances that are already created… It also maintains a pointer back to the original version of that function, which can call with the super and superApply methods, which allows us to simulate some actual inheritance, which is awesome… The other method is to expose some of your functions as options that can be modified at runtime… This only affects the specific instance you’re modifying that option on… This allows for a lot more flexibility in the behavior of your widgets…
So, here’s an example where we have a generic dataloader widget that just adds a loading class to the element, which can be used to modify the mouse cursor to a busy state, or white out the area being loaded, or whatever… Let’s say we wanted to keep that same behavior for all ajax functionality, but allow Backbone to manage the fetching of our collection data…
As you can see, our fetch function takes no inputs, and returns the promise object that’s coming from the $.ajax function…
This means that we can integrate Backbone’s fetch method by creating our own deferred object, running our fetch, and returning that deferred’s promise… Whenever our success or error functions are called from Backbone, we resolve or reject as appropriate, and if resolving, pass our collection data to any callbacks that have been bound to that promise, and business proceeds as normal…
You’ll also see that we have a success function option we’ve added here, which by default just outputs a JSON string of our result set from that ajax request, but which we can override when we instantiate this widget, to have it run those results through a Handlebars template for output instead…
Now, how many of you know that you should be unittesting your front-end code? …Ok, so, how many of you *actually* unit test your front-end code?We should be writing our code in such a way that it *is* testable… That means you should try to limit the amount of anonymous functions you’re passing back and forth…
Does a function perform some kind of logical operation, or calculation? If so, you may not even need to create an instance of your widget to test that…
Is it part of your widget’s public API, such that your consumers are going to expect a level of continuity from release to release? This one is especially important… And if you’re designing your interface to expect certain inputs and give back certain outputs, you should be able to easily test those conditions…
All public functions should have unit tests written to ensure that they continue to function property from release to release. This is going to be one of the biggest indicators of code quality from the perspective of your consumers… If they can’t upgrade your package without having to refactor their code and test for bugs stemming from broken interfaces, one of 2 things is going to happen… They’ll look for another, more reliable solution, or write one themselves… Or, they’ll stop updating your package, and at some point, they’ll probably look for a different solution anyway…
Consider storing your widget prototypes in an object namespace, and pass that into the factory, instead of passing an object literal directly. That way you maintain a reference to all of those functions outside of having to actually create an instance of your widget…
If a function is strictly a logical check or a calculation, you may be able to test that completely outside the scope of a widget instance, which can make speed up your test runs, as well as decoupling that function’s logic from the context of the widget itself… Decoupling is a good thing, right?
Here’s a simple widget class that just checks to see if it’s the first of its kind, and if so, adds a click handler to the body that outputs the number of these widgets on the page…
First, you’ll notice that we store the prototype object in this ABC.Prototypes namespace, and iterate over that namespace to create our widget classes…
This getInstanceCount does nothing more than scrape the DOM to find the number of these widgets in existence, and return that… It doesn’t use any internal references to do this, and doesn’t need to be run in the context of a widget in order to do its job… And it’s called from a few different places, so you’ll want to make sure this thing doesn’t get broken at some point, which means you’ll want to test it…
Here’s a simple test we could write for it…
We first call this function directly from our ABC.Prototypes namespace, since we don’t yet have any instances spun up, and we expect it to return a count of 0…
We add a create event handler, and instantiate the widget… We execute the getInstanceCount function again and expect it to return 1, and then continue as normal…
We also hedge our bets a little bit here, in case anything goes wrong with the widget creation process… We set a quarter-second timeout to auto-fail the test, since something’s gone wrong, and then let the test engine continue… You would also want to write tests to verify that your click handler is functioning as expected, and of course any public functions you’re providing…
So let me kind of summarize some of the biggest points here…
This one should be obvious, nobody likes doing more work than they have to… Your components shouldn’t do more work than they have to either… Keep them as small as you can while still allowing them to perform the task they’re meant to do…
Good component design means keeping those components unaware of each others’ existence, except when dealing with dependencies…
Higher-level widgets should consume the events and public functions of their dependencies, and broadcast their own events out into the ether for whoever may be consuming them…
If you have to decorate entire prototypes, do it by decorating the factory itself, but be *careful* about tying solutions to internal implementations, they can change at any time!
Don’t write monolithic functions… Just like your widget design, your functions should be broken down into granular pieces that can be be overridden if needed… Try to provide a robust-enough public API for your widgets, to keep people from having to force their way in to use private functions…
If your consumers are in the audience right now, they should be using your public functions as much as possible, riiiiight? That means they’re gonna expect you not to break their code when they update your package… And *that* means you want to make sure you test those functions as much as you can to make sure their interface is consistent from one release to the next…