In this presentation Lou Crocker, Senior Sales Engineer at Sencha and John Ferguson, Sr. Field Engineer at Pivotal, build a Twitter search app using Sencha and Spring frameworks.

1. © 2013 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Sencha and Spring
Lou Crocker, Sencha & John Ferguson, Pivotal

2. S P R I N G I O C O R E :
Spring Framework 4.0

3. Who are these guys?

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. Lou Crocker
• Senior Sales Engineer
• Background in Enterprise Development and Professional
Services

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. Developers
Current problem
End Users
Consumers are demanding a
universal app experience
Developers are facing challenges
building universal apps
• Same app functionality everywhere
• Experiences tailored for desktop, mobile
and tablet
• Apps need to run everywhere
• Apps need to be managed on disparate
platforms

8. Too many application platforms!

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. Frameworks
Sencha Touch
Sencha Ext JS
Sencha GXT

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. Sencha Touch
• High performance mobile
application framework
• Cross platform apps
• Themes for each platform
• Smooth scrolling and
animations
• Multi-touch gestures
• Adaptive layouts

13. • Visual app builder for desktop
and mobileGenerate live
interfacesBuild UI and code
fully featured apps directly in
ArchitectConnect to backends
easilyBest practices generated
code
Sencha Architect

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. Can we just agree?
• REST is how mobile apps
communicate with backends
• Lightweight
• Easy to use
• Facilitates data binding in
Sencha Touch

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. How REST-y do we we need to be?
* This slide is shamelessly stolen from Josh Long @starbuxman
http://martinfowler.com/articles/richardsonMaturityModel.html
The Richardson Maturity Model is a
way to grade your API according to the
REST constraints with 4 levels of
increasing compliance

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. Wait… Hatie Oh Ah Es?
HATEOAS: Hypermedia As The Engine Of Application State
• Uniform interface
• Rels in Links provide standard
access to related resources
http://www.youtube.com/watch?v=SC0FPuDKei0
Better explanation:

20. 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);
}
}
Level 1: Resources
Level 2: HTTP Verbs

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. D E M O

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. Building a Spring Twitter backend

25. Or do they….

26. Add a little Spring Social

27. ..and we have data!

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. Access static electricity resource in Spring

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. Let’s start trending!
http://ssawesome123.cfapps.io/app.html
Tweet with hashtag:
#ssawesome

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
http://springtrader.gopivotal.com/spring-nanotrader-sencha/
https://github.com/vFabric/springtrader/tree/sencha-mobile
Github:
Live Application:

34. Spring Trader Architecture

35. Spring Trader Architecture

36. Keeping up with us
John Ferguson
Email: jferguson@gopivotal.com
twitter: fergusonjohnw
Lou Crocker
Email: lou@sencha.com
web: www.sencha.com