Delivering responsive ibm i applications
-
Upload
georgina-swann -
Category
Technology
-
view
64 -
download
2
Transcript of Delivering responsive ibm i applications
![Page 1: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/1.jpg)
© Proximity 2014
![Page 2: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/2.jpg)
© Proximity 2014
Delivering responsive IBM i applications (mobile/web) using PHP
Presented by Shahid Latif & Pete SamwaysProximity GroupPlease note: this presentation included a LIVE demonstration
![Page 3: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/3.jpg)
© Proximity 2014
![Page 4: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/4.jpg)
© Proximity 2014
Agenda
• What is responsive?
• Implementing responsive design on IBM i
• Live development demo
• Close
![Page 5: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/5.jpg)
© Proximity 2014
What is responsive?
Optimising output for multiple devices
• Desktop
• Mobile
• Tablet
![Page 6: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/6.jpg)
© Proximity 2014
Responsive features• Easy reading and navigation
• Minimum panning and scrolling
• Controls appropriate to device
• Behaviour according to devices
• Adapting layout to devices using
• Fluid, proportion-based grids
• Flexible images
• Media queries
![Page 7: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/7.jpg)
© Proximity 2014
![Page 8: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/8.jpg)
© Proximity 2014
Samples
![Page 9: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/9.jpg)
© Proximity 2014
Responsive samples
![Page 10: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/10.jpg)
© Proximity 2014
Trends
![Page 11: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/11.jpg)
© Proximity 2014
• Implementing Responsive Design on IBM i
![Page 12: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/12.jpg)
© Proximity 2014
Web Application Basics
HTTP request
HTML, CSS, JS etc.
CSS, JavaScript Java, .Net, PHP, Ruby, RPG, etc ...
![Page 13: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/13.jpg)
© Proximity 2014
Why we prefer PHP• PHP is great for web development
• Fast to develop with
• Easy to learn especially for RPG developers
• Open source and free to use
• Widely used
• Strong PHP community
• Extensive resources and tools available
• Wealth of education materials
• Runs on IBM i
• Integrates and works well with existing applications
• SQL database access, RPG / COBOL / CL program calls
• No 3rd party hardware
![Page 14: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/14.jpg)
© Proximity 2014
PHP on IBM i
HTTP request
HTML, CSS, JS etc.
CSS, JavaScript
![Page 15: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/15.jpg)
© Proximity 2014
IDE
• Integrated Development Environment
![Page 16: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/16.jpg)
© Proximity 2014
IDE options
OR
Notepad++jEditEclipseAptana studiophpDesigner…
OR
![Page 17: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/17.jpg)
© Proximity 2014
Zend Studio
• Eclipse based IDE
• PHP, HTML, CSS, JavaScript etc.
• i5 Toolkit support for easy access to IBM i resources
• Remote server support – save directly to the IBM i
• Built in debugger
• Supports all popular Source Control tools – Git / GitHub / SVN / CVS
• Zend Framework integration
• Apache Cordova integration
![Page 18: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/18.jpg)
© Proximity 2014
• Live demo - Development in Zend Studio
![Page 19: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/19.jpg)
© Proximity 2014
![Page 20: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/20.jpg)
© Proximity 2014
![Page 21: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/21.jpg)
© Proximity 2014
![Page 22: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/22.jpg)
© Proximity 2014
![Page 23: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/23.jpg)
© Proximity 2014
![Page 24: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/24.jpg)
© Proximity 2014
![Page 25: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/25.jpg)
© Proximity 2014
![Page 26: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/26.jpg)
© Proximity 2014
![Page 27: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/27.jpg)
© Proximity 2014
![Page 28: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/28.jpg)
© Proximity 2014
![Page 29: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/29.jpg)
© Proximity 2014
![Page 30: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/30.jpg)
© Proximity 2014
Rapid Web Application Development
![Page 31: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/31.jpg)
© Proximity 2014
WebSmart
Templates
PHP (or RPG)
HTML
CSS
JavaScript
![Page 32: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/32.jpg)
© Proximity 2014
PHP on IBM i
HTTP request
HTML, CSS, JS etc.
CSS, JavaScript
![Page 33: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/33.jpg)
© Proximity 2014
WebSmart features
• Generates PHP, HTML, CSS, JavaScript etc.
• Rapid template based development
• Short learning curve
• Leverage existing RPG
• Easy access to IBM i resources
• Remote server support – save directly to the IBM i
• Built in debugger
• Change management included
• No runtime license
![Page 34: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/34.jpg)
© Proximity 2014
• Live demo - Development in WebSmart PHP
![Page 35: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/35.jpg)
© Proximity 2014
![Page 36: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/36.jpg)
© Proximity 2014
![Page 37: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/37.jpg)
© Proximity 2014
![Page 38: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/38.jpg)
© Proximity 2014
![Page 39: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/39.jpg)
© Proximity 2014
![Page 40: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/40.jpg)
© Proximity 2014
![Page 41: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/41.jpg)
© Proximity 2014
WebSmart Demo
![Page 42: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/42.jpg)
© Proximity 2014
![Page 43: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/43.jpg)
© Proximity 2014
![Page 44: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/44.jpg)
© Proximity 2014
![Page 45: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/45.jpg)
© Proximity 2014
Summary• Mobile (and Tablets) are here to stay
• Ideally start web development with responsive in mind
• Even “Mobile First”
• Little extra effort required to deliver a responsive application
• Especially if considered from the beginning
• PHP - ideal language to deliver web applications
• Designed for building applications efficiently
• IBM i – recommended platform to deliver responsive web applications
• Deliver to desktop and mobile
• No extra servers required
• Re-use existing data and business logic on your IBM i
![Page 46: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/46.jpg)
© Proximity 2014
Clear path suite
![Page 47: Delivering responsive ibm i applications](https://reader030.fdocuments.in/reader030/viewer/2022032419/55a2b7a61a28ab040d8b480d/html5/thumbnails/47.jpg)
© Proximity 2014
To find out more about Proximity or to book your appointment to speak to us about your IBM i requirements, contact us on:
www.proximity.co.uk
Tel: 0113 393 3600
Email: [email protected]