Secrets in building great enterprise apps

Slide 1

Slide 1 text

Secrets in building great enterprise apps Lee Boonstra @ladysign

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Lee Boonstra @ladysign - [email protected] http://www.leeboonstra.com

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

JavaScript runs anywhere!

Slide 7

Slide 7 text

JavaScript is easy to learn https://www.ﬂickr.com/photos/poperotico/3921069882/

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

App or Site?

Slide 10

Slide 10 text

• Internal Apps • Not in an App Store • Private Cloud • Private Network or Intranet • Secured. Behind a Firewall Enterprise Apps https://www.ﬂickr.com/photos/ibm_media/15951693251

Slide 11

Slide 11 text

We all need apps

Slide 12

Slide 12 text

Example

Slide 13

Slide 13 text

Example

Slide 14

Slide 14 text

Example

Slide 15

Slide 15 text

Example

Slide 16

Slide 16 text

Example

Slide 17

Slide 17 text

Enterprise Apps are complex

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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!

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Solution • Think about your users • Design for your users

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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.ﬂickr.com/photos/side78/6293329368

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

• Start Time • Fast / Responsive UI • Serving of ﬁles Data, Files • Tasks High Performing https://www.ﬂickr.com/photos/shutterrunner/12119303663

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Solution Integration with other systems / hardware • Webservices • APIs

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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)

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Designers vs Developers

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

• App needs to run while oﬄine • Needs to sync data when online Oﬄine capabilities

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

• Hard to ﬁnd 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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Solution • HTML5 vs. Native: With HTML5 you write the code only once. • Cloud vs. On-prem: Let a third party deal with hardware & scaling

Slide 47

Slide 47 text

How to deploy HTML5 apps? Host apps on a web server • Web applications can work ofﬂine. • New version available? Only download the differences • Best performance! Deploy as hybrid • Mobile: Cordova / PhoneGap • Desktop: Electron

Slide 48

Slide 48 text

• 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.ﬂickr.com/photos/iceninejon/3716169053

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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 uniﬁed coding style

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

A Complete Framework Class system Gesture system Data package Layouts Responsive conﬁgs Data binding ARIA Component query Z-index manager Architecture Routing Forms Enhanced Grids Pivot Grids Inﬁnite scrolling Keyboard support Charting & Drawing Offline Support Themes/Templates Documentation Screen reader

Slide 57

Slide 57 text

Universal Apps

Slide 58

Slide 58 text

“Enterprise App Development = Serious App Development”

Slide 59

Slide 59 text

Lee Boonstra Sales Engineer, Sencha Inc. Twitter: @ladysign - [email protected] http://www.leeboonstra.com http://www.speakerdeck.com/savelee Thank you!