Secrets in building great enterprise apps

Let's talk about enterprise apps! Often those apps don’t live in an app store. They live in a private cloud or private network. Maybe even secured and behind a firewall. You and I, might not even be aware of these types of apps. You need to have experience, with building complex applications like these. But that’s difficult, if you don’t really see these apps in the wild. In this session, Lee Boonstra will discuss why enterprise apps can be complex, and how you can build better apps, with maintainability and scalability in mind!

Transcript

1. Secrets in building great enterprise apps Lee Boonstra @ladysign
2. Lee Boonstra, Sales Engineer, Sencha Inc. provides everything a developer needs to rapidly build data intensive cross-platform enterprise web applications
3. Lee Boonstra @ladysign - lee@sencha.com http://www.leeboonstra.com
4. “Enterprise Apps. It’s a totally different beast.”
5. Almost 70% of enterprises consider web technologies as critical to their application development strategy
6. JavaScript runs anywhere!
7. JavaScript is easy to learn https://www.flickr.com/photos/poperotico/3921069882/
8. Let’s talk about apps… https://www.flickr.com/photos/telstar/3449684808/
9. App or Site?
10. • Internal Apps • Not in an App Store • Private Cloud • Private Network or Intranet • Secured. Behind a Firewall Enterprise Apps https://www.flickr.com/photos/ibm_media/15951693251
11. We all need apps
12. Example
13. Example
14. Example
15. Example
16. Example
17. Enterprise Apps are complex
18. • Written over the years • Written by various people • Written by external parties Large codebases https://www.flickr.com/photos/132889348@N07
19. • Over a long period of time • Teamwork with large teams • Teamwork with external teams • Release schedules A lot of maintenance
20. Solution Code needs structure • Your code needs structure • Separate concerns • Use a software pattern • Make code re-usable
21. • Need to run across multiple • browsers • platforms • devices Cross platform https://www.flickr.com/photos/umpcportal/5860466034/
22. IE is not dead for the enterprise! • Usage of legacy apps • Legacy operating system • IE is not backwards compatible. • IE8 runs on Windows XP • IE9 runs on Windows Vista+, • IE10, Windows 7+. • Upgrade OS = new hardware & licenses!
23. Solution With HTML5 you can write code once, run anywhere.
24. • Apps need to be designed for their use • Desktop vs. Mobile • Mouse vs. Keyboard • ARIA / Screenreader support Right Experience
25. Solution • Think about your users • Design for your users
26. Solution • Detect the device • Serve the correct: • code • component sets • functionality • data
27. • Huge amount of data • Fast loading of data • How to visualize your data Data intensive https://www.flickr.com/photos/cipherswarm/2414578731/
29. At CERN, they document and research the collision of particles. A huge amount of data that needs to be stored. We are talking here about Terabytes! https://www.flickr.com/photos/side78/6293329368
30. Solution Big data, but fast performance • Big data on the back-end not front-end • Paging of data • Lazy loading of data • Fast connection to database • Production machine needs to be fast
31. • Start Time • Fast / Responsive UI • Serving of files Data, Files • Tasks High Performing https://www.flickr.com/photos/shutterrunner/12119303663
32. Solution • Optimize builds • images, scripts, CSS • Deferring parsing of scripts • Minimizing HTTP Requests • Fast connection to database • Production machine needs to be fast
33. • Integration of Hardware • Integration with other servers / systems External integrations https://www.flickr.com/photos/johanl/5873732453
34. Solution Integration with other systems / hardware • Webservices • APIs
35. • Secure data • Prevent hack attempts Security https://www.flickr.com/photos/nowhere77/4378130542/
36. Solution Security and HTML5? Front-end code is not secure, everything is visible and validations can be bypassed. • Secure communication • Set permissions • Don’t store sensitive information on front-end • Prevent code injection (XSS and CSRF)
37. • One look & feel • Usability • Styleguide • Developers need to work together with UI/ UX designers Corporate Identity https://www.flickr.com/photos/thomashawk/4853281864
38. Designers vs Developers
39. The problems that developers face… What the designer promised. What technology the developer can use.
40. Solution • Design teams needs to be aware of used technologies • Think about components, less about “pages” • Work with Styleguides
41. • App needs to run while offline • Needs to sync data when online Offline capabilities
42. Solution Solutions on client-side: • App Cache • LocalStorage / SessionStorage • WebSQL / IndexDB • Check online connection, batch and sync data
43. • Hard to find resources • App / Service seems stable • Original team is gone • It might not run in modern browsers • It might not run well on mobile devices Legacy Technologies
44. Solution Upgrade! Risks of not upgrading: • Browsers push automated updates • Performance, memory usage No access to newer features No (official) support
45. • Deployment of apps on servers • Balancing the load • Deployment of apps on devices Distribution https://www.flickr.com/photos/stumayhew/5440763253
46. Solution • HTML5 vs. Native: With HTML5 you write the code only once. • Cloud vs. On-prem: Let a third party deal with hardware & scaling
47. How to deploy HTML5 apps? Host apps on a web server • Web applications can work offline. • New version available? Only download the differences • Best performance! Deploy as hybrid • Mobile: Cordova / PhoneGap • Desktop: Electron
48. • Needs to be able to run for a long time • Needs to survive from browser updates • Needs to be scalable and maintainable over the years Last for a long time https://www.flickr.com/photos/iceninejon/3716169053
49. Solution Survive from auto browser updates • Less dependencies is more Prepare for the future • Use design patterns, to stick to a general approach Commercial products can guarantee life-time support
50. Last long Deployment & Distribution Dealing with legacy technologies Offline support Corporate Design Security Hardware integration Data intensive Experience Maintainability Cross Platform Large code bases Scalability
51. “We need to change our mindsets.” “With a webdesign approach you won’t make it.”
52. “Let a framework deal with the pitfalls of serious app development.”
53. A good framework can help you! • Making screens pixel perfect, • across (legacy) browsers and devices • Delivering the best experience for the right device • Use simple API calls, to solve time consuming work • Write in one unified coding style
54. Frameworks are well tested “At Sencha we run 100.000s of automated test a day”
55. Introducing Ext JS 6 One framework, to build cross platform apps • Write JavaScript code, render HTML5 • No HTML or CSS experience required • No dependencies, one coding style Focus on Scalable / Maintainable Code • OOP, MVC/MVVM Architecture Patterns Lots of data-aware re-usable components
56. A Complete Framework Class system Gesture system Data package Layouts Responsive configs Data binding ARIA Component query Z-index manager Architecture Routing Forms Enhanced Grids Pivot Grids Infinite scrolling Keyboard support Charting & Drawing Offline Support Themes/Templates Documentation Screen reader
57. Universal Apps
58. “Enterprise App Development = Serious App Development”
59. Lee Boonstra Sales Engineer, Sencha Inc. Twitter: @ladysign - lee@sencha.com http://www.leeboonstra.com http://www.speakerdeck.com/savelee Thank you!