Beyond SAP Fiori’s 1:1:3

Talk i gave at SAP DCODE Las Vegas 2014 on Building Enterprise Apps with SAPUI5

Transcript

1. Beyond SAP Fiori’s 1:1:3 Building Large Enterprise Apps with SAPUI5 UXP301 @ SAP DCODE 2014 John Patterson | @jasper_07
2. Atwood's Law: “Any application that can be written in JavaScript, will eventually be written in JavaScript”
3. When not to use UI5?
4. When not to use UI5? too much heavy lifting
5. 1. Follow JS best practices TL;DR
6. 1. Follow JS best practices 2. Don’t build big apps TL;DR
7. 1. Follow JS best practices 2. Don’t build big apps 3. Use fit-for-purpose API’s TL;DR
8. 1. Follow JS best practices
9. The Developer eXperience (DX) one size does not fit all..
10. The right tool for the job
11. Metrics / lint
12. Resolve conflicts & merge changes
13. Learn and love the Console Log Chrome Developer Tools, Firebug etc..
14. Learn and love the Console Log And SAPUI5 Diagnostics <CTRL>+<SHIFT>+<ALT>+S
15. Must Have: Find and Replace with support for Regular Expressions
16. Must Have: Find and Replace use unified Naming Conventions for easy discovery
17. init lint test minify server watch concate deploy
18. Visualize the Complexity
19. I'm an egotistical bastard, and I name all my projects after myself. First 'Linux', now 'git'. " Linus Torvalds”
20. IDE Source Version Control CI Development Server Notifications Continuous Integration and Delivery
21. Performance is a feature mininmize everything, especially the round trips
22. Lots of good resources & tools
23. 1. Follow JS best practices 2. Don’t build big apps
24. Custom Controls “Encapsulate Change”
25. Custom Controls majority of HTML should be in Controls
26. Custom Controls Don’t Do DOM manipulation in your Controllers
27. Custom Controls let the Controls do the work of jQuery Selectors and Style changes
28. Custom Controls wrap third-party libraries in Controls
29. Custom Controls group Custom Controls into reusable libraries
30. Custom Controls Open Source the good stuff
31. "The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application" Justin Meyer, author JavaScriptMVC http://pixabay.com/static/uploads/photo/2012/03/01/01/42/connect-20333_640.jpg
32. Depending on the app size group by functionality & use an application mediator
33. App Root Component Component Component Component Component Use Components like Fiori
34. Let the data drive the app via routing logic and data binding
35. http://services.odata.org/Northwind/Northwind.svc/Categories(4)/Products
36. Application Composition App Root TopBar SideList DetailContainer Detail1 Detail2 Detail(n)
37. Communicate Across App App Root TopBar SideList DetailContainer Detail1 Detail2 Detail(n) = = = = Send Notifications to TopBar
38. App Root TopBar SideList DetailContainer Detail1 Detail2 Detail(n) = = = = Send Notifications to TopBar Communicate Across App
39. EventBus Controller View Controller View Controller View Controller View Decouple Controllers with EventBus
40. Decouple Controllers with EventBus EventBus Controller Controller Controller Subscribes to Channel and Event Subscribes Subscribes
41. Decouple Controllers with EventBus EventBus Controller Controller Event is Published and delivered Controller Publishes Delivers Delivers = = =
42. onInit: function() { var oEventBus = sap.ui.getCore().getEventBus(); … // oEventBus.subscribe(channel, event, handler, this); oEventBus.subscribe("POService", "POChanged", this.onPOhanged, this); }, Decouple Controllers with EventBus Subscribe to Event
43. onInit: function() { var oEventBus = sap.ui.getCore().getEventBus(); … // oEventBus.subscribe(channel, event, handler, this); oEventBus.subscribe("POService", "POChanged", this.onPOhanged, this); }, Decouple Controllers with EventBus oEventBus.publish("POService", "POChanged", { PONumber : item.getBindingContext().getObject().PONumber }); Subscribe to Event Publish Event
44. onInit: function() { var oEventBus = sap.ui.getCore().getEventBus(); … // oEventBus.subscribe(channel, event, handler, this); oEventBus.subscribe("POService", "POChanged", this.onPOhanged, this); }, onPOChanged: function(sChannel, sEvent, oData) { var oPONumber = oData.PONumber; //some logic goes here .. } Decouple Controllers with EventBus oEventBus.publish("POService", "POChanged", { PONumber : item.getBindingContext().getObject().PONumber }); Subscribe to Event Handle Event Publish Event
45. 1. Follow JS best practices 2. Don’t build big apps 3. Use fit-for-purpose API’s
46. Inside Out vs Outside In? BAPI !== API
47. SEGW - Meh
48. Gateway Client ✓
49. Mock Data First using the MockServer
50. Mock Data First can always connect to backend later ..
51. Mock Data First provides template JSON file(s) for entities else Random data is generated
52. // The "reponder" URL parameter defines if the app shall run with mock data var bIsMocked = jQuery.sap.getUriParameters().get("responderOn"); Mock Server Read mock param
53. var sUrl = "/sap/opu/odata/IWBEP/MYDEMO_SRV/"; // The "reponder" URL parameter defines if the app shall run with mock data var bIsMocked = jQuery.sap.getUriParameters().get("responderOn"); // start mock server if (bIsMocked) { jQuery.sap.require("sap.ui.core.util.MockServer"); var oMockServer = new sap.ui.core.util.MockServer({ rootUri: sUrl }); Mock Server Read mock param declare MockServer
54. var sUrl = "/sap/opu/odata/IWBEP/MYDEMO_SRV/"; // The "reponder" URL parameter defines if the app shall run with mock data var bIsMocked = jQuery.sap.getUriParameters().get("responderOn"); // start mock server if (bIsMocked) { jQuery.sap.require("sap.ui.core.util.MockServer"); var oMockServer = new sap.ui.core.util.MockServer({ rootUri: sUrl }); oMockServer.simulate("model/metadata.xml", "model/"); oMockServer.start(); } Mock Server Read mock param declare MockServer start Mock Server
55. Mock Server metadata.xml <entity>.json
56. Mock Server Good resource tests
57. 1. Follow JS best practices 2. Don’t build big apps 3. Use fit-for-purpose API’s Takeaways
58. Questions ?
59. Feedback Please Complete a session evaluation for this session! UXP301 @ SAP DCODE 2014 John Patterson | @jasper_07
60. Thanks for the images http://upload.wikimedia.org/wikipedia/en/4/4c/Sublime_Text_Logo.png https://cloud.githubusercontent.com/assets/72919/2874231/3af1db48-d3dd-11e3-98dc- 6066f8bc766f.png http://confluence.jetbrains.com/download/attachments/51943829/webstorm_logo.gif http://en.wikipedia.org/wiki/File:Notepad%2B%2B_Logo.png http://en.wikipedia.org/wiki/File:TextpadLogo.png http://pixabay.com/static/uploads/photo/2012/03/01/01/42/connect-20333_640.jpg http://gruntjs.com/img/grunt-logo.svg