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
   

   View Slide

2. Lee Boonstra, Sales Engineer, Sencha Inc.
   provides everything a developer needs
   to rapidly build data intensive
   cross-platform enterprise web applications
   

   View Slide

3. Lee Boonstra
   @ladysign - lee@sencha.com
   http://www.leeboonstra.com
   

   View Slide

4. “Enterprise Apps.
   It’s a totally different beast.”
   

   View Slide

5. Almost 70% of enterprises consider web technologies
   as critical to their application development strategy
   

   View Slide

6. JavaScript runs anywhere!
   

   View Slide

7. JavaScript is easy to learn
   https://www.flickr.com/photos/poperotico/3921069882/
   

   View Slide

8. Let’s talk about apps…
   https://www.flickr.com/photos/telstar/3449684808/
   

   View Slide

9. App or Site?
   

   View Slide

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
    

    View Slide

11. We all need apps
    

    View Slide

12. Example
    

    View Slide

13. Example
    

    View Slide

14. Example
    

    View Slide

15. Example
    

    View Slide

16. Example
    

    View Slide

17. Enterprise Apps are complex
    

    View Slide

18. • Written over the years
    • Written by various people
    • Written by external parties
    Large codebases
    https://www.flickr.com/photos/132889348@N07
    

    View Slide

19. • Over a long period of time
    • Teamwork with large teams
    • Teamwork with external teams
    • Release schedules
    A lot of maintenance
    

    View Slide

20. Solution
    Code needs structure
    • Your code needs structure
    • Separate concerns
    • Use a software pattern
    • Make code re-usable
    

    View Slide

21. • Need to run across multiple
    • browsers
    • platforms
    • devices
    Cross platform
    https://www.flickr.com/photos/umpcportal/5860466034/
    

    View Slide

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!
    

    View Slide

23. Solution
    With HTML5 you can write code once, run anywhere.
    

    View Slide

24. • Apps need to be designed for their use
    • Desktop vs. Mobile
    • Mouse vs. Keyboard
    • ARIA / Screenreader support
    Right Experience
    

    View Slide

25. Solution
    • Think about your users
    • Design for your users
    

    View Slide

26. Solution
    • Detect the device
    • Serve the correct:
    • code
    • component sets
    • functionality
    • data
    

    View Slide

27. • Huge amount of data
    • Fast loading of data
    • How to visualize your data
    Data intensive
    https://www.flickr.com/photos/cipherswarm/2414578731/
    

    View Slide

28. View Slide

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
    

    View Slide

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
    

    View Slide

31. • Start Time
    • Fast / Responsive UI
    • Serving of files Data, Files
    • Tasks
    High Performing
    https://www.flickr.com/photos/shutterrunner/12119303663
    

    View Slide

32. Solution
    • Optimize builds
    • images, scripts, CSS
    • Deferring parsing of scripts
    • Minimizing HTTP Requests
    • Fast connection to database
    • Production machine needs to be fast
    

    View Slide

33. • Integration of Hardware
    • Integration with other servers / systems
    External integrations
    https://www.flickr.com/photos/johanl/5873732453
    

    View Slide

34. Solution
    Integration with other systems / hardware
    • Webservices
    • APIs
    

    View Slide

35. • Secure data
    
    • Prevent hack attempts
    Security
    https://www.flickr.com/photos/nowhere77/4378130542/
    

    View Slide

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)
    

    View Slide

37. • One look & feel
    • Usability
    • Styleguide
    • Developers need to work together with UI/
    UX designers
    Corporate Identity
    https://www.flickr.com/photos/thomashawk/4853281864
    

    View Slide

38. Designers vs Developers
    

    View Slide

39. The problems that developers face…
    What the designer promised. What technology the developer can use.
    

    View Slide

40. Solution
    • Design teams needs to be aware of used technologies
    • Think about components, less about “pages”
    • Work with Styleguides
    

    View Slide

41. • App needs to run while offline
    
    • Needs to sync data when online
    Offline capabilities
    

    View Slide

42. Solution
    Solutions on client-side:
    • App Cache
    • LocalStorage / SessionStorage
    • WebSQL / IndexDB
    • Check online connection, batch and sync data
    

    View Slide

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
    

    View Slide

44. Solution
    Upgrade!
    Risks of not upgrading:
    • Browsers push automated updates
    • Performance, memory usage
    No access to newer features
    No (official) support
    

    View Slide

45. • Deployment of apps on servers
    
    • Balancing the load
    
    • Deployment of apps on devices
    Distribution
    https://www.flickr.com/photos/stumayhew/5440763253
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

51. “We need to change our mindsets.”
    “With a webdesign approach
    you won’t make it.”
    

    View Slide

52. “Let a framework deal with the
    pitfalls of serious app development.”
    

    View Slide

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
    

    View Slide

54. Frameworks are well tested
    “At Sencha we run 100.000s of automated test a day”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

57. Universal Apps
    

    View Slide

58. “Enterprise App Development
    =
    Serious App Development”
    

    View Slide

59. Lee Boonstra
    Sales Engineer, Sencha Inc.
    Twitter: @ladysign - lee@sencha.com
    http://www.leeboonstra.com
    http://www.speakerdeck.com/savelee
    Thank you!
    

    View Slide