Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Secrets in building great enterprise apps

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!

Lee Boonstra

April 15, 2016

More Decks by Lee Boonstra

Other Decks in Technology


  1. Lee Boonstra, Sales Engineer, Sencha Inc. provides everything a developer

    needs to rapidly build data intensive cross-platform enterprise web applications
  2. • 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
  3. • Written over the years • Written by various people

    • Written by external parties Large codebases https://www.flickr.com/photos/132889348@N07
  4. • Over a long period of time • Teamwork with

    large teams • Teamwork with external teams • Release schedules A lot of maintenance
  5. Solution Code needs structure • Your code needs structure •

    Separate concerns • Use a software pattern • Make code re-usable
  6. • Need to run across multiple • browsers • platforms

    • devices Cross platform https://www.flickr.com/photos/umpcportal/5860466034/
  7. 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!
  8. • Apps need to be designed for their use •

    Desktop vs. Mobile • Mouse vs. Keyboard • ARIA / Screenreader support Right Experience
  9. Solution • Detect the device • Serve the correct: •

    code • component sets • functionality • data
  10. • Huge amount of data • Fast loading of data

    • How to visualize your data Data intensive https://www.flickr.com/photos/cipherswarm/2414578731/
  11. 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
  12. 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
  13. • Start Time • Fast / Responsive UI • Serving

    of files Data, Files • Tasks High Performing https://www.flickr.com/photos/shutterrunner/12119303663
  14. Solution • Optimize builds • images, scripts, CSS • Deferring

    parsing of scripts • Minimizing HTTP Requests • Fast connection to database • Production machine needs to be fast
  15. • Integration of Hardware • Integration with other servers /

    systems External integrations https://www.flickr.com/photos/johanl/5873732453
  16. 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)
  17. • One look & feel • Usability • Styleguide •

    Developers need to work together with UI/ UX designers Corporate Identity https://www.flickr.com/photos/thomashawk/4853281864
  18. Solution • Design teams needs to be aware of used

    technologies • Think about components, less about “pages” • Work with Styleguides
  19. • App needs to run while offline • Needs to

    sync data when online Offline capabilities
  20. Solution Solutions on client-side: • App Cache • LocalStorage /

    SessionStorage • WebSQL / IndexDB • Check online connection, batch and sync data
  21. • 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
  22. Solution Upgrade! Risks of not upgrading: • Browsers push automated

    updates • Performance, memory usage No access to newer features No (official) support
  23. • Deployment of apps on servers • Balancing the load

    • Deployment of apps on devices Distribution https://www.flickr.com/photos/stumayhew/5440763253
  24. Solution • HTML5 vs. Native: With HTML5 you write the

    code only once. • Cloud vs. On-prem: Let a third party deal with hardware & scaling
  25. 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
  26. • 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. Lee Boonstra Sales Engineer, Sencha Inc. Twitter: @ladysign - [email protected]

    http://www.leeboonstra.com http://www.speakerdeck.com/savelee Thank you!