Sencha and Spring
Lou Crocker, Sencha & John Ferguson, Pivotal

© 2013 SpringOne 2GX. All rights reserved. Do not distribu...
SPRING IO CORE:

Spring Framework 4.0
Who are these guys?
John Ferguson
• 
• 
• 
• 
• 

Sr. Field Engineer at Pivotal
Formally Enterprise Data and Application Architect
Financial S...
Lou Crocker
•  Senior Sales Engineer
•  Background in Enterprise Development and Professional
Services
What are we doing here?
• 
• 
• 
• 
• 
• 

Sencha, Ext-JS, Touch, GXT….huh?
Isn’t this a Spring conference?
Building a dem...
Current problem
End Users

Consumers are demanding a
universal app experience

• 
• 

Same app functionality everywhere
Ex...
Too many application platforms!
The Sencha Mission
Rapid and easy development
of rich web apps for the
broadest range of access
devices from IE6 to the la...
Frameworks
Sencha Ext JS
Sencha Touch
Sencha GXT
Sencha Ext JS
• 
• 
• 
• 
• 
• 
• 

MVC architecture
Robust data APIs
Modern themes
Rich UI widgets
Plugin-free charting
B...
Sencha Touch
•  High performance mobile
application framework
•  Cross platform apps
•  Themes for each platform
•  Smooth...
Sencha Architect
•  Visual app builder for
desktop and
mobileGenerate live
interfacesBuild UI and code
fully featured apps...
Aren’t we at a Spring conference?
The “I Wear Too Many Hats at My Company” Syndrome
•  Developers have many jobs to do
•  ...
Can we just agree?
•  REST is how mobile apps
communicate with backends
•  Lightweight
•  Easy to use
•  Facilitates data ...
Quick Hyper Primer
How do we build REST in Spring MVC
servlet-context.xml
<mvc:annotation-driven />

Controller
@Controlle...
How REST-y do we we need to be?
The Richardson Maturity Model is a
way to grade your API according to the
REST constraints...
What do we need?
•  Need resources so we can map back to
UI domain
•  Need Verbs so we can use GET/POST/
PUT/DELETE consis...
Wait… Hatie Oh Ah Es?
HATEOAS: Hypermedia As The Engine Of Application State

•  Uniform interface
•  Rels in Links provid...
Quick Hyper Primer
How do we build REST in Spring MVC
Level 2: HTTP Verbs

servlet-context.xml
<mvc:annotation-driven />

...
Some things to think about…
•  Models Matter
–  Mobile clients need to know how the objects are returned

•  REST consiste...
DEMO
Spring Twitter Search
• 
• 
• 
• 
• 

Spring REST back end
Query will return last 10 tweets to match
Wrap it in JSONP to e...
Building a Spring Twitter backend
Or do they….
Add a little Spring Social
..and we have data!
Building a Twitter search app
• 
• 
• 
• 
• 
• 
• 

Let’s begin with Architect
The project structure
Add the container
Add...
Access static electricity resource in Spring
Combine the pieces … and deploy!
• 
• 
• 
• 
• 
• 
• 

Test the data in the design environment
Create the display template...
Let’s start trending!
http://ssawesome123.cfapps.io/app.html
Tweet with hashtag:

#ssawesome
Spring Trader
•  Reference Architecture for Pivotal and Spring
•  Inspired by IBM “Day Trader”
•  Uses Spring MVC to expos...
Spring Trader Architecture
Spring Trader Architecture
Keeping up with us
John Ferguson
Email: jferguson@gopivotal.com
twitter: fergusonjohnw
Lou Crocker
Email: lou@sencha.com
w...
Sencha and Spring
Sencha and Spring
Upcoming SlideShare
Loading in …5
×

Sencha and Spring

1,280 views

Published on

Speakers: Lou Crocker and John Ferguson
Much like Spring burst onto the scene and became a defacto standard for Java, Sencha is vying for a similar role in the world of HTML5. From Ext JS for desktop development, Sencha Touch for mobile, and Sencha Architect as a design tool, it has become a pervasive technology in the new paradigm of multi-client development.
In this session we will use our own SpringTrader reference application to illustrate integration techniques of Spring with Sencha. We will go beyond the basic wiring of a REST call with binding results to UI components, and look at mapping the Spring MVC and Sencha MVC architectures, along with other tips and tricks to streamline your mobile application development efforts.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,280
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sencha and Spring

  1. 1. Sencha and Spring Lou Crocker, Sencha & John Ferguson, Pivotal © 2013 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  2. 2. SPRING IO CORE: Spring Framework 4.0
  3. 3. Who are these guys?
  4. 4. John Ferguson •  •  •  •  •  Sr. Field Engineer at Pivotal Formally Enterprise Data and Application Architect Financial Services background <3 Music Theater Enjoys cats and internet memes
  5. 5. Lou Crocker •  Senior Sales Engineer •  Background in Enterprise Development and Professional Services
  6. 6. What are we doing here? •  •  •  •  •  •  Sencha, Ext-JS, Touch, GXT….huh? Isn’t this a Spring conference? Building a demo live on stage Building with Sencha Architect Wait…did we just create an “app”? That’s child’s play. Show me a real application
  7. 7. Current problem End Users Consumers are demanding a universal app experience •  •  Same app functionality everywhere Experiences tailored for desktop, mobile and tablet Developers Developers are facing challenges building universal apps •  •  Apps need to run everywhere Apps need to be managed on disparate platforms
  8. 8. Too many application platforms!
  9. 9. The Sencha Mission Rapid and easy development of rich web apps for the broadest range of access devices from IE6 to the latest table.
  10. 10. Frameworks Sencha Ext JS Sencha Touch Sencha GXT
  11. 11. Sencha Ext JS •  •  •  •  •  •  •  MVC architecture Robust data APIs Modern themes Rich UI widgets Plugin-free charting Big data grids Cross platform browser compatibility
  12. 12. Sencha Touch •  High performance mobile application framework •  Cross platform apps •  Themes for each platform •  Smooth scrolling and animations •  Multi-touch gestures •  Adaptive layouts
  13. 13. Sencha Architect •  Visual app builder for desktop and mobileGenerate live interfacesBuild UI and code fully featured apps directly in ArchitectConnect to backends easilyBest practices generated code
  14. 14. Aren’t we at a Spring conference? The “I Wear Too Many Hats at My Company” Syndrome •  Developers have many jobs to do •  There isn’t always a “UI” developer •  Spring developers are expected to build Mobile Apps •  Sencha and Spring seamless integration – logical connectivity
  15. 15. Can we just agree? •  REST is how mobile apps communicate with backends •  Lightweight •  Easy to use •  Facilitates data binding in Sencha Touch
  16. 16. Quick Hyper Primer How do we build REST in Spring MVC servlet-context.xml <mvc:annotation-driven /> Controller @Controller public class MyController { @RequestMapping(value=“/resource/{id}”, method=RequestMethod.GET) public @RequestBody MyResource getResource(@PathVariable(“id”) int id){ return dataSource.get(id); } }
  17. 17. How REST-y do we we need to be? The Richardson Maturity Model is a way to grade your API according to the REST constraints with 4 levels of increasing compliance http://martinfowler.com/articles/richardsonMaturityModel.html * This slide is shamelessly stolen from Josh Long @starbuxman
  18. 18. What do we need? •  Need resources so we can map back to UI domain •  Need Verbs so we can use GET/POST/ PUT/DELETE consistently •  Hypermedia Controls / HATEOAS not important today but Sencha can take advantage of in future
  19. 19. Wait… Hatie Oh Ah Es? HATEOAS: Hypermedia As The Engine Of Application State •  Uniform interface •  Rels in Links provide standard access to related resources Better explanation: http://www.youtube.com/watch?v=SC0FPuDKei0
  20. 20. Quick Hyper Primer How do we build REST in Spring MVC Level 2: HTTP Verbs servlet-context.xml <mvc:annotation-driven /> Level 1: Resources Controller @Controller public class MyController { @RequestMapping(value=“/resource/{id}”, method=RequestMethod.GET) public @RequestBody MyResource getResource(@PathVariable(“id”) int id){ return dataSource.get(id); } }
  21. 21. Some things to think about… •  Models Matter –  Mobile clients need to know how the objects are returned •  REST consistency matters –  Can’t change the URL’s willy-nilly •  Thinner objects are better than monothlic –  Many times you are sending data over mobile network •  JSONP is your friend for development
  22. 22. DEMO
  23. 23. Spring Twitter Search •  •  •  •  •  Spring REST back end Query will return last 10 tweets to match Wrap it in JSONP to enable cross-site json Sencha Touch front-end What is this Spring 2012? A twitter app? You bet!
  24. 24. Building a Spring Twitter backend
  25. 25. Or do they….
  26. 26. Add a little Spring Social
  27. 27. ..and we have data!
  28. 28. Building a Twitter search app •  •  •  •  •  •  •  Let’s begin with Architect The project structure Add the container Add the view Create the Model Create the store Bind the view
  29. 29. Access static electricity resource in Spring
  30. 30. Combine the pieces … and deploy! •  •  •  •  •  •  •  Test the data in the design environment Create the display template Create the preview path Preview the app Set the build path Build the app Modify template/theme/parameters and repeat
  31. 31. Let’s start trending! http://ssawesome123.cfapps.io/app.html Tweet with hashtag: #ssawesome
  32. 32. Spring Trader •  Reference Architecture for Pivotal and Spring •  Inspired by IBM “Day Trader” •  Uses Spring MVC to expose REST endpoints –  Level 2: HTTP verbs •  Sencha Touch front end Live Application: http://springtrader.gopivotal.com/spring-nanotrader-sencha/ Github: https://github.com/vFabric/springtrader/tree/sencha-mobile
  33. 33. Spring Trader Architecture
  34. 34. Spring Trader Architecture
  35. 35. Keeping up with us John Ferguson Email: jferguson@gopivotal.com twitter: fergusonjohnw Lou Crocker Email: lou@sencha.com web: www.sencha.com

×