SlideShare a Scribd company logo
1 of 44
Download to read offline
Using ExtJS with
Elasticsearch
Sam Imberman & Karim Besbes
AGENDA
1/ Introduction
Building a faceted catalog of video game assets using
ExtJS and Elasticsearch
2/ Walkthrough of our applications
3/ Sharing our experience
4/ Lessons learned
5/ Q & A
INTRODUCTION
• The Technology Group is the primary technology partner of game production teams.
• We develop tools, middleware and online solutions used in Ubisoft games.
• Two sister teams
- the TG, which is dedicated to developing tools and middleware solutions; and
- the TGO, which develops solutions and manages operations for online gaming.
Ubisoft – Technology Group
Who are we?
• Flare is “an internal Youtube for Ubisoft”
- A video review solution built for Ubisoft game teams to more efficiently collaborate during the
creation of game art assets.
• Portfolio is “an internal Pinterest for Ubisoft”
- A search engine for Ubisoft art assets. It enables production to easily find and reuse high
quality assets produced by other Ubisoft studios.
Our products
Flare & Portfolio
• For artists and animators
• Easy to use
• Same “look and feel”
• Deliver new features fast
• Built on top of ExtJS
Our products
Flare & Portfolio
• Designer (Sencha Architect)
- Rapid prototyping for R&D
• Browser compatibility
• Data stores / Services / REST
• Routing
• Theming
• Build system
A Javascript Framework
Why ExtJS ?
• Document oriented search engine
• Distributed, multi-tenant, shards
• RESTful
• Extensible
• Faster aggregations than SQL! Faceting!
• Runs inside many turnkey systems that have a search component
An internal search engine
What is Elasticsearch?
An internal search engine
Query language in JSON
• ES output is not good ExtJS input
• The client does not issue searches
- ES is used in the back-end
• ExtJS is good to display information which is derived from ES data
- Large search results are easily represented by grids, treegrids, etc
An internal search engine
Using ES with ExtJS
DEMO APPLICATION &
WALKTHROUGH
Flare and Portfolio
Walkthrough
• Flare uses Ext JS 5.x
• Portfolio uses Ext JS 6.x
SHARING OUR
EXPERIENCE
• The scheduler updates too soon to
catch dirty bound values
• notify() to update dirty bound values
View models & stores
Scheduler overview
var panel = Ext.create('Ext.panel.Panel', {
layout: 'fit',
viewModel: vm,
bind: {
title: '{foo}'
},
renderTo: Ext.getBody()
});
var vm = new Ext.app.ViewModel({
data: {
foo: 'cool'
}
});
panel.getTitle();
// null
vm.notify();
panel.getTitle();
// cool
vm.set('foo', 'very cool');
panel.getTitle();
// cool
Ext.defer(function() {
panel.getTitle();
// very cool
}, 5);
• ViewModel Store that has autoload =
false and a bind descriptor in the URL
is not processed by the ViewModel
mechanism
View models & stores
Scheduler overview
var vm = new Ext.app.ViewModel({
data: {
username: 'sencha'
},
stores: {
Profile: {
autoLoad: false,
fields: ["id", "wtv"],
proxy: {
type: 'ajax',
url: 'api/v1/{username}/profile',
reader: {
type: 'json'
}
}
}
}
});
var view = Ext.create('Ext.view.View', {
viewModel: vm,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="selector"></div>',
'</tpl>'),
itemSelector: 'div',
bind : {
store: '{Profile}'
}
});
vm.getStore('Profile').load()
// Uncaught TypeError: Cannot read property ‘load' of null
vm.notify();
vm.getStore('Profile').getProxy().getUrl();
// api/v1/sencha/profile
• What could be easier than writing HTML to build a website?
• Powerful concept for a single page application
• HTML is stored in a string variable
• Full expressiveness of any CSS layout
• Looping structures display DOM based on data, with no ExtJS overhead
XTemplates
Using HTML in ExtJS layouts
I can write tables in HTML!
XTemplates
Using HTML in ExtJS layouts
XTemplates
Inline Editing extension
• What if the video finishes processing while I’m writing a description?
XTemplates
Don’t override my DOM
• What happens if the layout run takes
place with one of these sections closed?
XTemplates
Layout run fun!
• The fish is a video turntable
• We want to drag on it to rotate it
• In principle, we’d want to bind to the
mousemove and mousedown events of a
“video” tag
XTemplates
How to turn a fish?
XTemplates
How to deal with DOM events?
An individual element
Xtemplate container
View
Capture
Bubble
Xtemplate container
View
An individual element
XTemplates
How to deal with DOM events?
Bind events here?
Capture
Bubble
Xtemplate container
View
An individual element
XTemplates
How to deal with DOM events?
Bind events here?
Capture
Bubble
Xtemplate container
View
An individual element
XTemplates
How to deal with DOM events?
Bind the event with a delegation
// component refers to the container which contains
// the template
component.el.dom.addEventListener("mousemove", function(e) {
if(e.target.id == "player-video" && e.buttons === 1) {
// . . .
}
}, true); // true to use capture phase because of video tag
• ExtJS layout runs don’t know how to deal with templates that change size
• Interactions are not always obvious to develop
- Use “onclick=”  , or
- Rebind events when regenerating template , or
- Delegate events to parent DOM elements
• But you get absolute flexibility within your layout
XTemplates
Creating interactions?
• Hard to maintain large chunks of HTML in XTemplates
• Why not load them separately?
• Load templates asynchronously
XTemplates
Dynamic loading extension
//resources/templates/xtemplate.tpl.html
// script.js
• A dynamic template loader library
• Templates are declared in an external
HTML file
• Wrapped in a <script> with
type=“text/template”
• Easy to read and to maintain
XTemplates
Dynamic loading extension
TemplateLoader.TEMPLATES_PATH = "./resources/templates/";
TemplateLoader.require('xtemplate.tpl.html', function (templates) {
Ext.create('Ext.panel.Panel', {
data : {
helloWorld: 'Hello sencha con'
},
tpl: templates.get('my-x-template-1')
});
Ext.create('Ext.panel.Panel', {
data : {
anotherHelloWorld: 'Hello sencha con'
},
tpl: templates.get('my-x-template-2')
});
});
<script id=“my-x-template-1” type="text/template">
<p> {helloWorld} </p>
</script>
<script id=“my-x-template-2” type="text/template">
<p> {anotherHelloWorld} </p>
</script>
Ext JS routing
Route nomenclature
https://portfolio/#!/library?q=couch&weapon=54dab480-e9f8-429a-9bcd-a62800fc9d53
• In Portfolio -- IDs inURLs
• In Flare -- values inURLs
facet=GUIDquery=keyword
https://flare/#!/search?q=couch&uploader=Foo
 No normalization required but is not human readable
 Human readable but requires normalization
facet=namequery=keyword
• By default, ExtJS treats query strings
as part of routes
• We overrode the routing class’s
regular expression, so now routes can
accept query strings
Ext JS routing
Routing with query strings
// /? -> allows url route to end with or without "/"
// (?.*) -> allows query string in url
return new RegExp('^' + url + '/?(?.*)?$', modifiers);
Ext JS routing
The query data manager
• URL and query string values should
be generated and processed by one
entry point
• We developed the concept of a query
data manager
• A QueryData is a class that processes
a query string and provides an
interface to interact with
var q1 = "uploader=kbesbes&tag=%23foo&tag=%23boo",
q1 = QueryData.fromQueryString(queryString);
console.log(q1.getData());
// outputs: Object {uploader: Array[1], tag: Array[2]}
var queryString = "name=sencha&name=%C3%89tudiants",
q1 = QueryData.fromQueryString(queryString);
q1.getData();
// name:
// Array[2] 0:"etudiants"
// 1:"sencha"
q1.addOrRemove('name', 'Étudiants');
q1.getData();
// name:
// Array[1] 0:"sencha"
Example 1:
Example 2:
Example 3:
var result,
queryString = "con=sencha&year=2016",
q1 = QueryData.fromQueryString(queryString),
q2 = QueryData.fromQueryString(queryString);
q1.add('speaker', 'karim');
q1.toQueryString();
// Outputs "con=sencha&year=2016&speaker=karim"
result = QueryData.difference(q1,q2);
result.toQueryString() ;
// Outputs "speaker=karim"
• Render pages based on a specified
route
• Controls facets and filters view based
on its query string values
Ext JS routing
The route drives the view
renderMainContent: function(cmp) {
var mainContent = Ext.ComponentQuery.query("#main-content")[0];
mainContent.removeAll(true);
mainContent.add(cmp);
},
onHomepageRouteTrigger: function() {
this.renderMainContent(Ext.widget("homeMainContainer"));
},
routes: {
'!': 'onHomepageRouteTrigger',
'!/:tenant/home': 'onTenantHomeRouteTrigger'
},
onGalleryRouteTrigger: function(tenant) {
this.setTenant(tenant);
this.renderMainContent(Ext.widget("galleryMainContainer"));
},
Example:
http://localhost/#!
http://localhost/#!/search?name=foo&since=2015
• ExtJS assumes 1 endpoint = 1 request = 1 proxy = 1 store
• But in Portfolio, we have data that is often related, but not associated
Display search results
Data model presentation
Display search results
One to one down the line
Result
Store
Proxy
Result
Model
/results/
results: { … }
facets: { … }
Result
Store
Proxy
Result
Model
/results/
results: { … }
facets: { … }
Facet
Store
Facet
Model
Display search results
But let’s make it messier
// Trigger the load of the facet tree store.
var facetTreeStore = this.getViewModel()
.getStore("FacetTreeStore"),
response = Ext.JSON.decode(
operation.getResponse().responseText),
dataForFacets = this
.generateFacetStoreData(response);
facetTreeStore.setRootNode(dataForFacets);
• Chain-load a second store from a first
Display search results
Chain-loading stores
The tree we have The tree ExtJS wants
"facets":[
{
"path":"assetTypes",
"name":"Asset type",
"label":"Asset Type",
"type":"Facet",
"sortIndex":1,
"expanded":true,
"hasChildren":true,
"children":[
{
"value":"21b3a093-b591-409e-a4db-a5990133136d",
"name":"Wildlife",
"label":"Wildlife",
"count":6,
"filter":"assetTypes/any(e: e/id eq guid'21b3a093-b591-
409e-a4db-a5990133136d')",
"type":"FacetValue",
"selected":true,
"expanded":true,
"hasChildren":true,
"children":[ … ]
}, … ]
}, … ]
[{
"label":"Asset Type",
"value":null,
"checked":null,
"count":null,
"expanded":true,
"leaf":false,
"children":[
{
"label":"Wildlife",
"value":"21b3a093-b591-409e-a4db-a5990133136d",
"checked":true,
"count":6,
"expanded":true,
"leaf":false,
"children":[ … ]
}, … ]
}, … ]
Display search result
A tale of two trees
generateFacetStoreData: function(obj) {
// Traverse the facet tree to generate a new tree that will
// work properly with the ExtJS tree store.
return {
label: obj.label,
value: obj.value || null,
checked: obj.selected,
count : Ext.isNumber(obj.count) ? obj.count : null,
expanded: obj.expanded,
// If we have no children, mark this node as a leaf.
// At top level, "children" node is called "facets".
leaf: obj.children ? !obj.children.length :
obj.facets ? !obj.facets.length : false,
// Recurse over every child.
children: Ext.Array.map( obj.children || obj.facets || [],
function(item, index, array) {
return this.generateFacetStoreData(item);
}, this)
};
}
• API data only contains state of API
• Our API doesn’t look exactly like an
ExtJS Tree Panel
Display search result
Generate tree data locally
LESSONS LEARNED
• ExtJS is a relatively good fit for our artistic-yet-enterprise applications
• Don’t fight the tide – use ExtJS for what it does well
- Usually it is worth it to massage data to fit into ExtJS views – ‘it just works!’
- Instead of templates, maybe we should start writing components?
Lessons Learned
Ext JS framework
• We have made a lot of incredible extensions, including …
Lessons Learned
Extensions
Q & A
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS and Elasticsearch - Karim Besbes, Sam Imberman

More Related Content

What's hot

Tips and Tricks For Faster Asp.NET and MVC Applications
Tips and Tricks For Faster Asp.NET and MVC ApplicationsTips and Tricks For Faster Asp.NET and MVC Applications
Tips and Tricks For Faster Asp.NET and MVC ApplicationsSarvesh Kushwaha
 
Adobe AEM for Business Heads
Adobe AEM for Business HeadsAdobe AEM for Business Heads
Adobe AEM for Business HeadsYash Mody
 
Building Scalable .NET Web Applications
Building Scalable .NET Web ApplicationsBuilding Scalable .NET Web Applications
Building Scalable .NET Web ApplicationsBuu Nguyen
 
Building An Application For Windows Azure And Sql Azure
Building An Application For Windows Azure And Sql AzureBuilding An Application For Windows Azure And Sql Azure
Building An Application For Windows Azure And Sql AzureEric Nelson
 
SSIS Monitoring Deep Dive
SSIS Monitoring Deep DiveSSIS Monitoring Deep Dive
SSIS Monitoring Deep DiveDavide Mauri
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applicationsEugene Lazutkin
 
Elements for an iOS Backend
Elements for an iOS BackendElements for an iOS Backend
Elements for an iOS BackendLaurent Cerveau
 
Ansible for large scale deployment
Ansible for large scale deploymentAnsible for large scale deployment
Ansible for large scale deploymentKarthik .P.R
 
Scalability using Node.js
Scalability using Node.jsScalability using Node.js
Scalability using Node.jsratankadam
 
Node.js and couchbase Full Stack JSON - Munich NoSQL
Node.js and couchbase   Full Stack JSON - Munich NoSQLNode.js and couchbase   Full Stack JSON - Munich NoSQL
Node.js and couchbase Full Stack JSON - Munich NoSQLPhilipp Fehre
 
Google app-engine-cloudcamplagos2011
Google app-engine-cloudcamplagos2011Google app-engine-cloudcamplagos2011
Google app-engine-cloudcamplagos2011Opevel
 
Atlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationAtlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationGunnar Hillert
 
Four Ways to Improve ASP .NET Performance and Scalability
 Four Ways to Improve ASP .NET Performance and Scalability Four Ways to Improve ASP .NET Performance and Scalability
Four Ways to Improve ASP .NET Performance and ScalabilityAlachisoft
 
Exciting JavaScript - Part II
Exciting JavaScript - Part IIExciting JavaScript - Part II
Exciting JavaScript - Part IIEugene Lazutkin
 
Empowering developers to deploy their own data stores
Empowering developers to deploy their own data storesEmpowering developers to deploy their own data stores
Empowering developers to deploy their own data storesTomas Doran
 
Quick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerQuick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerNic Raboy
 
CQ5.x Maintenance Webinar 2013
CQ5.x Maintenance Webinar 2013CQ5.x Maintenance Webinar 2013
CQ5.x Maintenance Webinar 2013Andrew Khoury
 
Scaling asp.net websites to millions of users
Scaling asp.net websites to millions of usersScaling asp.net websites to millions of users
Scaling asp.net websites to millions of usersoazabir
 
Migrating Customers to Microsoft Azure: Lessons Learned From the Field
Migrating Customers to Microsoft Azure: Lessons Learned From the FieldMigrating Customers to Microsoft Azure: Lessons Learned From the Field
Migrating Customers to Microsoft Azure: Lessons Learned From the FieldIdo Flatow
 

What's hot (20)

Tips and Tricks For Faster Asp.NET and MVC Applications
Tips and Tricks For Faster Asp.NET and MVC ApplicationsTips and Tricks For Faster Asp.NET and MVC Applications
Tips and Tricks For Faster Asp.NET and MVC Applications
 
Adobe AEM for Business Heads
Adobe AEM for Business HeadsAdobe AEM for Business Heads
Adobe AEM for Business Heads
 
Building Scalable .NET Web Applications
Building Scalable .NET Web ApplicationsBuilding Scalable .NET Web Applications
Building Scalable .NET Web Applications
 
Building An Application For Windows Azure And Sql Azure
Building An Application For Windows Azure And Sql AzureBuilding An Application For Windows Azure And Sql Azure
Building An Application For Windows Azure And Sql Azure
 
SSIS Monitoring Deep Dive
SSIS Monitoring Deep DiveSSIS Monitoring Deep Dive
SSIS Monitoring Deep Dive
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applications
 
Elements for an iOS Backend
Elements for an iOS BackendElements for an iOS Backend
Elements for an iOS Backend
 
Ansible for large scale deployment
Ansible for large scale deploymentAnsible for large scale deployment
Ansible for large scale deployment
 
The RDBMS You Should Be Using
The RDBMS You Should Be UsingThe RDBMS You Should Be Using
The RDBMS You Should Be Using
 
Scalability using Node.js
Scalability using Node.jsScalability using Node.js
Scalability using Node.js
 
Node.js and couchbase Full Stack JSON - Munich NoSQL
Node.js and couchbase   Full Stack JSON - Munich NoSQLNode.js and couchbase   Full Stack JSON - Munich NoSQL
Node.js and couchbase Full Stack JSON - Munich NoSQL
 
Google app-engine-cloudcamplagos2011
Google app-engine-cloudcamplagos2011Google app-engine-cloudcamplagos2011
Google app-engine-cloudcamplagos2011
 
Atlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationAtlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring Integration
 
Four Ways to Improve ASP .NET Performance and Scalability
 Four Ways to Improve ASP .NET Performance and Scalability Four Ways to Improve ASP .NET Performance and Scalability
Four Ways to Improve ASP .NET Performance and Scalability
 
Exciting JavaScript - Part II
Exciting JavaScript - Part IIExciting JavaScript - Part II
Exciting JavaScript - Part II
 
Empowering developers to deploy their own data stores
Empowering developers to deploy their own data storesEmpowering developers to deploy their own data stores
Empowering developers to deploy their own data stores
 
Quick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerQuick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase Server
 
CQ5.x Maintenance Webinar 2013
CQ5.x Maintenance Webinar 2013CQ5.x Maintenance Webinar 2013
CQ5.x Maintenance Webinar 2013
 
Scaling asp.net websites to millions of users
Scaling asp.net websites to millions of usersScaling asp.net websites to millions of users
Scaling asp.net websites to millions of users
 
Migrating Customers to Microsoft Azure: Lessons Learned From the Field
Migrating Customers to Microsoft Azure: Lessons Learned From the FieldMigrating Customers to Microsoft Azure: Lessons Learned From the Field
Migrating Customers to Microsoft Azure: Lessons Learned From the Field
 

Viewers also liked

SenchaCon 2016: Oracle Forms Modernisation - Owen Pagan
SenchaCon 2016: Oracle Forms Modernisation - Owen PaganSenchaCon 2016: Oracle Forms Modernisation - Owen Pagan
SenchaCon 2016: Oracle Forms Modernisation - Owen PaganSencha
 
SenchaCon 2016: How to Auto Generate a Back-end in Minutes - Per Minborg, Emi...
SenchaCon 2016: How to Auto Generate a Back-end in Minutes - Per Minborg, Emi...SenchaCon 2016: How to Auto Generate a Back-end in Minutes - Per Minborg, Emi...
SenchaCon 2016: How to Auto Generate a Back-end in Minutes - Per Minborg, Emi...Sencha
 
SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Linc...
SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Linc...SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Linc...
SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Linc...Sencha
 
SenchaCon 2016: Integrating Geospatial Maps & Big Data Using CartoDB via Ext ...
SenchaCon 2016: Integrating Geospatial Maps & Big Data Using CartoDB via Ext ...SenchaCon 2016: Integrating Geospatial Maps & Big Data Using CartoDB via Ext ...
SenchaCon 2016: Integrating Geospatial Maps & Big Data Using CartoDB via Ext ...Sencha
 
SenchaCon 2016: Modernizing the Ext JS Class System - Don Griffin
SenchaCon 2016: Modernizing the Ext JS Class System - Don GriffinSenchaCon 2016: Modernizing the Ext JS Class System - Don Griffin
SenchaCon 2016: Modernizing the Ext JS Class System - Don GriffinSencha
 
SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil Manvar
SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil ManvarSenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil Manvar
SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil ManvarSencha
 
SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experienc...
SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experienc...SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experienc...
SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experienc...Sencha
 
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...Sencha
 
SenchaCon 2016: Creating a Flexible and Usable Industry Specific Solution - D...
SenchaCon 2016: Creating a Flexible and Usable Industry Specific Solution - D...SenchaCon 2016: Creating a Flexible and Usable Industry Specific Solution - D...
SenchaCon 2016: Creating a Flexible and Usable Industry Specific Solution - D...Sencha
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...Sencha
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSencha
 
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory HardySenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory HardySencha
 
SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling
SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling
SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling Sencha
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...Sencha
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsSencha
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...Sencha
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSencha
 
Web UI migration
Web UI migrationWeb UI migration
Web UI migrationDoug Lucy
 
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSencha
 
SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra
SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra  SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra
SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra Sencha
 

Viewers also liked (20)

SenchaCon 2016: Oracle Forms Modernisation - Owen Pagan
SenchaCon 2016: Oracle Forms Modernisation - Owen PaganSenchaCon 2016: Oracle Forms Modernisation - Owen Pagan
SenchaCon 2016: Oracle Forms Modernisation - Owen Pagan
 
SenchaCon 2016: How to Auto Generate a Back-end in Minutes - Per Minborg, Emi...
SenchaCon 2016: How to Auto Generate a Back-end in Minutes - Per Minborg, Emi...SenchaCon 2016: How to Auto Generate a Back-end in Minutes - Per Minborg, Emi...
SenchaCon 2016: How to Auto Generate a Back-end in Minutes - Per Minborg, Emi...
 
SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Linc...
SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Linc...SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Linc...
SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Linc...
 
SenchaCon 2016: Integrating Geospatial Maps & Big Data Using CartoDB via Ext ...
SenchaCon 2016: Integrating Geospatial Maps & Big Data Using CartoDB via Ext ...SenchaCon 2016: Integrating Geospatial Maps & Big Data Using CartoDB via Ext ...
SenchaCon 2016: Integrating Geospatial Maps & Big Data Using CartoDB via Ext ...
 
SenchaCon 2016: Modernizing the Ext JS Class System - Don Griffin
SenchaCon 2016: Modernizing the Ext JS Class System - Don GriffinSenchaCon 2016: Modernizing the Ext JS Class System - Don Griffin
SenchaCon 2016: Modernizing the Ext JS Class System - Don Griffin
 
SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil Manvar
SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil ManvarSenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil Manvar
SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil Manvar
 
SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experienc...
SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experienc...SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experienc...
SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experienc...
 
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
SenchaCon 2016: How to Give your Sencha App Real-time Web Performance - James...
 
SenchaCon 2016: Creating a Flexible and Usable Industry Specific Solution - D...
SenchaCon 2016: Creating a Flexible and Usable Industry Specific Solution - D...SenchaCon 2016: Creating a Flexible and Usable Industry Specific Solution - D...
SenchaCon 2016: Creating a Flexible and Usable Industry Specific Solution - D...
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
 
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory HardySenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
 
SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling
SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling
SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
 
Web UI migration
Web UI migrationWeb UI migration
Web UI migration
 
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
 
SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra
SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra  SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra
SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra
 

Similar to SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS and Elasticsearch - Karim Besbes, Sam Imberman

WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedGil Fink
 
Testing Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchMats Bryntse
 
Scene Graphs & Component Based Game Engines
Scene Graphs & Component Based Game EnginesScene Graphs & Component Based Game Engines
Scene Graphs & Component Based Game EnginesBryan Duggan
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedGil Fink
 
Our Puppet Story (GUUG FFG 2015)
Our Puppet Story (GUUG FFG 2015)Our Puppet Story (GUUG FFG 2015)
Our Puppet Story (GUUG FFG 2015)DECK36
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....Patrick Lauke
 
[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules
[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules
[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rulesSrijan Technologies
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5smueller_sandsmedia
 
Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Yevgeniy Brikman
 
Selenium interview questions and answers
Selenium interview questions and answersSelenium interview questions and answers
Selenium interview questions and answerskavinilavuG
 
Building High Performance Web Applications and Sites
Building High Performance Web Applications and SitesBuilding High Performance Web Applications and Sites
Building High Performance Web Applications and Sitesgoodfriday
 
introduction to node.js
introduction to node.jsintroduction to node.js
introduction to node.jsorkaplan
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaAgile Testing Alliance
 
the next web now
the next web nowthe next web now
the next web nowzulin Gu
 

Similar to SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS and Elasticsearch - Karim Besbes, Sam Imberman (20)

WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived
 
Testing Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha Touch
 
Ext JS Introduction
Ext JS IntroductionExt JS Introduction
Ext JS Introduction
 
JS Essence
JS EssenceJS Essence
JS Essence
 
Scene Graphs & Component Based Game Engines
Scene Graphs & Component Based Game EnginesScene Graphs & Component Based Game Engines
Scene Graphs & Component Based Game Engines
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Our Puppet Story (GUUG FFG 2015)
Our Puppet Story (GUUG FFG 2015)Our Puppet Story (GUUG FFG 2015)
Our Puppet Story (GUUG FFG 2015)
 
Eclipse e4
Eclipse e4Eclipse e4
Eclipse e4
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
 
[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules
[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules
[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)
 
Selenium interview questions and answers
Selenium interview questions and answersSelenium interview questions and answers
Selenium interview questions and answers
 
Building High Performance Web Applications and Sites
Building High Performance Web Applications and SitesBuilding High Performance Web Applications and Sites
Building High Performance Web Applications and Sites
 
introduction to node.js
introduction to node.jsintroduction to node.js
introduction to node.js
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh Gundecha
 
the next web now
the next web nowthe next web now
the next web now
 

More from Sencha

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsSencha
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 HighlightsSencha
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridSencha
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportSencha
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsSencha
 
Building Ext JS Using HATEOAS - Jeff Stano
Building Ext JS Using HATEOAS - Jeff StanoBuilding Ext JS Using HATEOAS - Jeff Stano
Building Ext JS Using HATEOAS - Jeff StanoSencha
 
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...Sencha
 
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...Sencha
 

More from Sencha (17)

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
 
Building Ext JS Using HATEOAS - Jeff Stano
Building Ext JS Using HATEOAS - Jeff StanoBuilding Ext JS Using HATEOAS - Jeff Stano
Building Ext JS Using HATEOAS - Jeff Stano
 
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
 
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
 

Recently uploaded

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 

Recently uploaded (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 

SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS and Elasticsearch - Karim Besbes, Sam Imberman

  • 1. Using ExtJS with Elasticsearch Sam Imberman & Karim Besbes
  • 2. AGENDA 1/ Introduction Building a faceted catalog of video game assets using ExtJS and Elasticsearch 2/ Walkthrough of our applications 3/ Sharing our experience 4/ Lessons learned 5/ Q & A
  • 4. • The Technology Group is the primary technology partner of game production teams. • We develop tools, middleware and online solutions used in Ubisoft games. • Two sister teams - the TG, which is dedicated to developing tools and middleware solutions; and - the TGO, which develops solutions and manages operations for online gaming. Ubisoft – Technology Group Who are we?
  • 5. • Flare is “an internal Youtube for Ubisoft” - A video review solution built for Ubisoft game teams to more efficiently collaborate during the creation of game art assets. • Portfolio is “an internal Pinterest for Ubisoft” - A search engine for Ubisoft art assets. It enables production to easily find and reuse high quality assets produced by other Ubisoft studios. Our products Flare & Portfolio
  • 6. • For artists and animators • Easy to use • Same “look and feel” • Deliver new features fast • Built on top of ExtJS Our products Flare & Portfolio
  • 7. • Designer (Sencha Architect) - Rapid prototyping for R&D • Browser compatibility • Data stores / Services / REST • Routing • Theming • Build system A Javascript Framework Why ExtJS ?
  • 8. • Document oriented search engine • Distributed, multi-tenant, shards • RESTful • Extensible • Faster aggregations than SQL! Faceting! • Runs inside many turnkey systems that have a search component An internal search engine What is Elasticsearch?
  • 9. An internal search engine Query language in JSON
  • 10. • ES output is not good ExtJS input • The client does not issue searches - ES is used in the back-end • ExtJS is good to display information which is derived from ES data - Large search results are easily represented by grids, treegrids, etc An internal search engine Using ES with ExtJS
  • 12. Flare and Portfolio Walkthrough • Flare uses Ext JS 5.x • Portfolio uses Ext JS 6.x
  • 14. • The scheduler updates too soon to catch dirty bound values • notify() to update dirty bound values View models & stores Scheduler overview var panel = Ext.create('Ext.panel.Panel', { layout: 'fit', viewModel: vm, bind: { title: '{foo}' }, renderTo: Ext.getBody() }); var vm = new Ext.app.ViewModel({ data: { foo: 'cool' } }); panel.getTitle(); // null vm.notify(); panel.getTitle(); // cool vm.set('foo', 'very cool'); panel.getTitle(); // cool Ext.defer(function() { panel.getTitle(); // very cool }, 5);
  • 15. • ViewModel Store that has autoload = false and a bind descriptor in the URL is not processed by the ViewModel mechanism View models & stores Scheduler overview var vm = new Ext.app.ViewModel({ data: { username: 'sencha' }, stores: { Profile: { autoLoad: false, fields: ["id", "wtv"], proxy: { type: 'ajax', url: 'api/v1/{username}/profile', reader: { type: 'json' } } } } }); var view = Ext.create('Ext.view.View', { viewModel: vm, tpl: new Ext.XTemplate( '<tpl for=".">', '<div class="selector"></div>', '</tpl>'), itemSelector: 'div', bind : { store: '{Profile}' } }); vm.getStore('Profile').load() // Uncaught TypeError: Cannot read property ‘load' of null vm.notify(); vm.getStore('Profile').getProxy().getUrl(); // api/v1/sencha/profile
  • 16. • What could be easier than writing HTML to build a website? • Powerful concept for a single page application • HTML is stored in a string variable • Full expressiveness of any CSS layout • Looping structures display DOM based on data, with no ExtJS overhead XTemplates Using HTML in ExtJS layouts
  • 17. I can write tables in HTML! XTemplates Using HTML in ExtJS layouts
  • 19. • What if the video finishes processing while I’m writing a description? XTemplates Don’t override my DOM
  • 20. • What happens if the layout run takes place with one of these sections closed? XTemplates Layout run fun!
  • 21. • The fish is a video turntable • We want to drag on it to rotate it • In principle, we’d want to bind to the mousemove and mousedown events of a “video” tag XTemplates How to turn a fish?
  • 22. XTemplates How to deal with DOM events? An individual element Xtemplate container View
  • 23. Capture Bubble Xtemplate container View An individual element XTemplates How to deal with DOM events?
  • 24. Bind events here? Capture Bubble Xtemplate container View An individual element XTemplates How to deal with DOM events?
  • 25. Bind events here? Capture Bubble Xtemplate container View An individual element XTemplates How to deal with DOM events?
  • 26. Bind the event with a delegation // component refers to the container which contains // the template component.el.dom.addEventListener("mousemove", function(e) { if(e.target.id == "player-video" && e.buttons === 1) { // . . . } }, true); // true to use capture phase because of video tag
  • 27. • ExtJS layout runs don’t know how to deal with templates that change size • Interactions are not always obvious to develop - Use “onclick=”  , or - Rebind events when regenerating template , or - Delegate events to parent DOM elements • But you get absolute flexibility within your layout XTemplates Creating interactions?
  • 28. • Hard to maintain large chunks of HTML in XTemplates • Why not load them separately? • Load templates asynchronously XTemplates Dynamic loading extension
  • 29. //resources/templates/xtemplate.tpl.html // script.js • A dynamic template loader library • Templates are declared in an external HTML file • Wrapped in a <script> with type=“text/template” • Easy to read and to maintain XTemplates Dynamic loading extension TemplateLoader.TEMPLATES_PATH = "./resources/templates/"; TemplateLoader.require('xtemplate.tpl.html', function (templates) { Ext.create('Ext.panel.Panel', { data : { helloWorld: 'Hello sencha con' }, tpl: templates.get('my-x-template-1') }); Ext.create('Ext.panel.Panel', { data : { anotherHelloWorld: 'Hello sencha con' }, tpl: templates.get('my-x-template-2') }); }); <script id=“my-x-template-1” type="text/template"> <p> {helloWorld} </p> </script> <script id=“my-x-template-2” type="text/template"> <p> {anotherHelloWorld} </p> </script>
  • 30. Ext JS routing Route nomenclature https://portfolio/#!/library?q=couch&weapon=54dab480-e9f8-429a-9bcd-a62800fc9d53 • In Portfolio -- IDs inURLs • In Flare -- values inURLs facet=GUIDquery=keyword https://flare/#!/search?q=couch&uploader=Foo  No normalization required but is not human readable  Human readable but requires normalization facet=namequery=keyword
  • 31. • By default, ExtJS treats query strings as part of routes • We overrode the routing class’s regular expression, so now routes can accept query strings Ext JS routing Routing with query strings // /? -> allows url route to end with or without "/" // (?.*) -> allows query string in url return new RegExp('^' + url + '/?(?.*)?$', modifiers);
  • 32. Ext JS routing The query data manager • URL and query string values should be generated and processed by one entry point • We developed the concept of a query data manager • A QueryData is a class that processes a query string and provides an interface to interact with var q1 = "uploader=kbesbes&tag=%23foo&tag=%23boo", q1 = QueryData.fromQueryString(queryString); console.log(q1.getData()); // outputs: Object {uploader: Array[1], tag: Array[2]} var queryString = "name=sencha&name=%C3%89tudiants", q1 = QueryData.fromQueryString(queryString); q1.getData(); // name: // Array[2] 0:"etudiants" // 1:"sencha" q1.addOrRemove('name', 'Étudiants'); q1.getData(); // name: // Array[1] 0:"sencha" Example 1: Example 2: Example 3: var result, queryString = "con=sencha&year=2016", q1 = QueryData.fromQueryString(queryString), q2 = QueryData.fromQueryString(queryString); q1.add('speaker', 'karim'); q1.toQueryString(); // Outputs "con=sencha&year=2016&speaker=karim" result = QueryData.difference(q1,q2); result.toQueryString() ; // Outputs "speaker=karim"
  • 33. • Render pages based on a specified route • Controls facets and filters view based on its query string values Ext JS routing The route drives the view renderMainContent: function(cmp) { var mainContent = Ext.ComponentQuery.query("#main-content")[0]; mainContent.removeAll(true); mainContent.add(cmp); }, onHomepageRouteTrigger: function() { this.renderMainContent(Ext.widget("homeMainContainer")); }, routes: { '!': 'onHomepageRouteTrigger', '!/:tenant/home': 'onTenantHomeRouteTrigger' }, onGalleryRouteTrigger: function(tenant) { this.setTenant(tenant); this.renderMainContent(Ext.widget("galleryMainContainer")); }, Example: http://localhost/#! http://localhost/#!/search?name=foo&since=2015
  • 34. • ExtJS assumes 1 endpoint = 1 request = 1 proxy = 1 store • But in Portfolio, we have data that is often related, but not associated Display search results Data model presentation
  • 35. Display search results One to one down the line Result Store Proxy Result Model /results/ results: { … } facets: { … }
  • 36. Result Store Proxy Result Model /results/ results: { … } facets: { … } Facet Store Facet Model Display search results But let’s make it messier
  • 37. // Trigger the load of the facet tree store. var facetTreeStore = this.getViewModel() .getStore("FacetTreeStore"), response = Ext.JSON.decode( operation.getResponse().responseText), dataForFacets = this .generateFacetStoreData(response); facetTreeStore.setRootNode(dataForFacets); • Chain-load a second store from a first Display search results Chain-loading stores
  • 38. The tree we have The tree ExtJS wants "facets":[ { "path":"assetTypes", "name":"Asset type", "label":"Asset Type", "type":"Facet", "sortIndex":1, "expanded":true, "hasChildren":true, "children":[ { "value":"21b3a093-b591-409e-a4db-a5990133136d", "name":"Wildlife", "label":"Wildlife", "count":6, "filter":"assetTypes/any(e: e/id eq guid'21b3a093-b591- 409e-a4db-a5990133136d')", "type":"FacetValue", "selected":true, "expanded":true, "hasChildren":true, "children":[ … ] }, … ] }, … ] [{ "label":"Asset Type", "value":null, "checked":null, "count":null, "expanded":true, "leaf":false, "children":[ { "label":"Wildlife", "value":"21b3a093-b591-409e-a4db-a5990133136d", "checked":true, "count":6, "expanded":true, "leaf":false, "children":[ … ] }, … ] }, … ] Display search result A tale of two trees
  • 39. generateFacetStoreData: function(obj) { // Traverse the facet tree to generate a new tree that will // work properly with the ExtJS tree store. return { label: obj.label, value: obj.value || null, checked: obj.selected, count : Ext.isNumber(obj.count) ? obj.count : null, expanded: obj.expanded, // If we have no children, mark this node as a leaf. // At top level, "children" node is called "facets". leaf: obj.children ? !obj.children.length : obj.facets ? !obj.facets.length : false, // Recurse over every child. children: Ext.Array.map( obj.children || obj.facets || [], function(item, index, array) { return this.generateFacetStoreData(item); }, this) }; } • API data only contains state of API • Our API doesn’t look exactly like an ExtJS Tree Panel Display search result Generate tree data locally
  • 41. • ExtJS is a relatively good fit for our artistic-yet-enterprise applications • Don’t fight the tide – use ExtJS for what it does well - Usually it is worth it to massage data to fit into ExtJS views – ‘it just works!’ - Instead of templates, maybe we should start writing components? Lessons Learned Ext JS framework
  • 42. • We have made a lot of incredible extensions, including … Lessons Learned Extensions
  • 43. Q & A

Editor's Notes

  1. Routing is the process by which we choose what you see onscreen based on what URL you went to. Any application state is represented by a URL.
  2. Routing is the process by which we choose what you see onscreen based on what URL you went to. Any application state is represented by a URL.
  3. Routing is the process by which we choose what you see onscreen based on what URL you went to. Any application state is represented by a URL.