Sebastian Dunkel

Software Engineer

Implementing Rich Applications in the Browser

Rich Cloud-Based Web Applications

• The next wave of software for a connected world is coming

• Applications

• Experiences

• Platforms

• Accessible, integrated, collaborative, professional and disruptive

Gmail's home page as it looked on March 31, 2004, shortly before the service launched

maps.google.com

Sketchfab.com

Tinkercad.com

beta.projectleopard.com

sway.com

Why in the Cloud?

• Scalability

• Collaboration• data at the center

Why in the Browser?

• Device and operating system independent• just a browser

• Easy deployment and sharing• no installation, no updates

• just a link

redmonk.com

Programming Language Ranking

# projects on Github

# tags on

Stack Overflo

w

Programming Language Ranking

# projects on Github

# tags on

Stack Overflo

w

redmonk.com

JavaScript Domination

# projects on Github

# tags on

Stack Overflo

w

redmonk.com

Challenges: Platform

Limitations of the browser platform

• JavaScript / HTML only

• limited access to host system

• diverse behavior across browsers

Challenges: Technology

Where does the client technology come from?

• legacy code is• Java, C++, C#, …

• often locked in desktop applications

Challenges: Technology

Where does the client technology come from?

• legacy code is• Java, C++, C#, …

• often locked in desktop applications

• Libraries and Frameworks might not be available• there is no Qt, geometry engine, ...

Challenges: Distributed Compute

How to distribute work between browser and

cloud?

• latency and bandwidth

• cost and scalability

• synchronization

Challenges: Development

Development is different

• Communication is asynchronous and unreliable

• JavaScript is not strongly typed• developing large applications can be tricky

Easy Solutions ?

Why not simply employ desktop virtualization?• You will miss a lot of the value!

Easy Solutions ?

Why not simply employ desktop virtualization?• You will miss a lot of the value!

Embrace the web, accept the challenge!

Thick Clients and Thin Services

• User experience and interactivity

• Costs for service provider

• Client hardware is available and capable

Thick Clients and Thin Services

• Services with discrete tasks

• Better reusability

• Think platform!

Project Lynx IDX

Create amazing apps, services, and product experiences using Autodesk Technologies

Create

new App

Design the

Experience

Add

Services

Inspect

Code

Publish

Your App

Project Lynx IDX: Design and manufacture

Project Lynx IDX: Simulation Services

Project Lynx IDX: Configurators

Project Lynx IDX: Configurators

Project Leopard: Fusion 360 in the Browser

• Fully-fledged CAD in the browser• with real-time collaboration

Project Leopard: Fusion 360 in the Browser

• Fully-fledged CAD in the browser• with real-time collaboration

• Built upon Forge platform• technology components

Project Leopard: Fusion 360 in the Browser

• Fully-fledged CAD in the browser• with real-time collaboration

• Built upon Forge platform• technology components

• Features hybrid compute• client and cloud side

Project Leopard: Client vs Server

Combine client side...• sketching• assemblies• visualization

...with server side compute• photo realistic rendering• geometry processing

Project Leopard: Client vs Server

Combine client side...• sketching• assemblies• visualization

...with server side compute• photo realistic rendering• geometry processing

Client is not just the UI of some server!

© 2016 Autodesk

Project Leopard videoapprox. 2 min

Project Leopard: Fusion 360 in the Browser

Project Leopard: Client vs Server

• Browser clients and cloud servers jointly operate on the same data

Project Lynx IDX & Leopard: Collaborative Design

Lessons learned...

… while implementing rich applications in the

browser

Building large scale applications is challenging, but possible and worth the effort

Technology Stack: Don’t reinvent the wheel

• Pick from the web’s vibrant ecosystem

Coding Best Practices

• Strict commenting including types

• JavaScript is your friend• native browser support (development, debugging)• transcompiler is no silver bullet

• Write JavaScript like C++ code!• object-oriented design• performance matters

Project Leopard: Performance Optimization

• Heavy profiling• JavaScript is fast [in most cases]

• Reduce pressure on garbage collector• Object pooling and preallocation

Project Leopard: Performance Optimization

• Help the JIT compiler • Understand how your code gets optimized

• Direct canvas rendering• Avoid slow DOM/CSS

Reality Check

Your application has all ingredients for success• Great idea

• Compelling design

• Attractive business model

• State of the art technology

But do users really love it?

User feedback

Always subjective, selective and not representative!

Analytics

• measure user experience and usage

• better understand the user

• from the landing page to logout screen

Analytics

• Event history

and statistics

• Cohort analysis

• AB testingA B

24% 76%

Conclusion

• Professional applications in the browser are possible with today’s technology

• Cloud/web is not a feature, it is a paradigm

Conclusion

• The browser does more than UI• hybrid client + server side compute

• Use analytics and iterate• steadily improve the product based on user data

Conclusion

Conclusion

Embrace webJavaScript is capable!

the browser is the new OS

Project Lynx Team @ Forge DevCon Expo

Meet us at our expo table