How to create complicated solutions by Timothy Scott, MediaFront

1. Web Applications Are
Technically Awesome

2. How can we do [this]?
When creating a complicated solution there are traditionally two choices.

3. Website or native application?

4. What are the benefits?

5. Available to all internet connected devices
Singular code based
Can use existing infrastructure
Website
Access to device functionality
Compiled application has great performance
Only requests data as needed
Application

6. How about a web application?

7. A web application is not a
website...

8. A web application is an
application utilizing web and
[web] browser technologies to
accomplish one or more tasks
over a network, typically
through a [web] browser.

9. Separation of application from resources
Request only the data needed
Allows user to work with data in the device,
limiting requests to remote resources
Allows offline use
Future proofing: application and resources can
be altered separately

10. The Magic

11. HTML5 Specifiesamassivearrayoftoolsfordeveloperstobuildrichecperienceswithinthebrowser
Angular JS Atoolsetforbuildingtheframeworkmostsuitedtoyourapplicationdevelopmentneeds
Smart views Dynamictemplateswitchingdeliversjustthecontentneededtothetargeteddevice

12. HTML5

13. It’s not a buzz word or the next
big thing. It’s a long boring set
of specifications for the latest
version of HTML.
What it specifies is a massive
array of tools for developers to
build rich experiences within
the browser.

15. Superheroic JavaScript MVW Framework

16. HTML is great for declaring static
documents, but it falters when we try to
use it for declaring dynamic views in web-
applications

17. AngularJS is a toolset for building the
framework most suited to your application
development.
Every feature can be modified or replaced
to suit your unique needs.

18. MODEL VIEW WHATEVER
- It’s like MVC but way cooler

19. MODEL
Live data
VIEW CONTROLLER/
WHATEVER
DEVICE
USER
SeesUpdates
M
anipulates
Uses

20. WEB APPLICATION
FRAMEWORK

21. MODEL
VIEW CONTROLLER/
WHATEVER
SERVICES
RESOURCES
Updates
M
anipulates
LOCAL DATA STORAGE
DATA API’S
PARAMETERS
LANGUAGE

22. Resources
Data
Logic
Display
Interactions
Full separation of

23. Reusable directives
Template switching
Variable view states
CSS first approach
SMART VIEWS
ALL DEVICES
SWITCH
Device size (small,normal)
Touch
Resolution (pixel ratio)
User types: Trial, registered, anonymous
VIEW STATE
Device size (small,normal)
Touch
User types: Trial, registered, anonymous
CSS
Device size (small,normal)
Browser type
Print
Application state

24. Compass / SASS
Vector font icons
SVG’S
Fully fluid and responsive
CSS Transitions and animations
HTML5 Elements
Live input validation
Built for expansion
DIGITALLY PIMPED

26. By combining the best available
technologies and practices we've
successfully proved that web
applications are a robust solution for
delivering web services to internet
enabled devices.