Forge - DevCon 2016: Implementing Rich Applications in the Browser
•
1 j'aime•579 vues
Sebastian Dunkel, Autodesk Cloud based web applications running in the browser have fundamental advantages over their desktop based siblings: They run on any device and are not tied to a certain operating system. The transition to web applications can solve many of the deployment problems and facilitates effortless real-time collaboration in a connected world. However, implementing rich browser applications is challenging. Besides general technical limitations, leveraging existing technology is far from trivial. In this presentation we will discuss these and other challenges based on selected browser-based applications developed at Autodesk. Moreover, we will show how Forge technology can help to accelerate application development and improve the development experience.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Forge - DevCon 2016: Implementing Rich Applications in the Browser
Similaire à Forge - DevCon 2016: Implementing Rich Applications in the Browser (20)
Plus de Autodesk
Plus de Autodesk (7)
Dernier
Dernier (20)
Forge - DevCon 2016: Implementing Rich Applications in the Browser
- 1. Sebastian Dunkel Software Engineer Implementing Rich Applications in the Browser
- 2. 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
- 3. Gmail's home page as it looked on March 31, 2004, shortly before the service launched
- 9. sway.com
- 10. Why in the Cloud? • Scalability • Collaboration • data at the center
- 11. Why in the Browser? • Device and operating system independent • just a browser • Easy deployment and sharing • no installation, no updates • just a link
- 12. redmonk.com Programming Language Ranking # projects on Github #tagsonStackOverflow
- 13. Programming Language Ranking # projects on Github #tagsonStackOverflow redmonk.com
- 14. JavaScript Domination # projects on Github #tagsonStackOverflow redmonk.com
- 15. Challenges: Platform Limitations of the browser platform • JavaScript / HTML only • limited access to host system • diverse behavior across browsers
- 16. Challenges: Technology Where does the client technology come from? • legacy code is • Java, C++, C#, … • often locked in desktop applications
- 17. 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, ...
- 18. Challenges: Distributed Compute How to distribute work between browser and cloud? • latency and bandwidth • cost and scalability • synchronization
- 19. Challenges: Development Development is different • Communication is asynchronous and unreliable • JavaScript is not strongly typed • developing large applications can be tricky
- 20. Easy Solutions ? Why not simply employ desktop virtualization? • You will miss a lot of the value!
- 21. Easy Solutions ? Why not simply employ desktop virtualization? • You will miss a lot of the value! Embrace the web, accept the challenge!
- 22. Thick Clients and Thin Services • User experience and interactivity • Costs for service provider • Client hardware is available and capable
- 23. Thick Clients and Thin Services • Services with discrete tasks • Better reusability • Think platform!
- 24. 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
- 25. Project Lynx IDX: Design and manufacture
- 26. Project Lynx IDX: Simulation Services
- 27. Project Lynx IDX: Configurators
- 28. Project Lynx IDX: Configurators
- 29. Project Leopard: Fusion 360 in the Browser • Fully-fledged CAD in the browser • with real-time collaboration
- 30. Project Leopard: Fusion 360 in the Browser • Fully-fledged CAD in the browser • with real-time collaboration • Built upon Forge platform • technology components
- 31. 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
- 32. Project Leopard: Client vs Server Combine client side... • sketching • assemblies • visualization ...with server side compute • photo realistic rendering • geometry processing
- 33. 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!
- 34. © 2016 Autodesk Project Leopard video approx. 2 min Project Leopard: Fusion 360 in the Browser
- 35. Project Leopard: Client vs Server • Browser clients and cloud servers jointly operate on the same data
- 36. Project Lynx IDX & Leopard: Collaborative Design
- 37. Lessons learned... … while implementing rich applications in the browser Building large scale applications is challenging, but possible and worth the effort
- 38. Technology Stack: Don’t reinvent the wheel • Pick from the web’s vibrant ecosystem
- 39. 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
- 40. Project Leopard: Performance Optimization • Heavy profiling • JavaScript is fast [in most cases] • Reduce pressure on garbage collector • Object pooling and preallocation
- 41. Project Leopard: Performance Optimization • Help the JIT compiler • Understand how your code gets optimized • Direct canvas rendering • Avoid slow DOM/CSS
- 42. 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?
- 43. User feedback Always subjective, selective and not representative!
- 44. Analytics • measure user experience and usage • better understand the user • from the landing page to logout screen
- 45. Analytics • Event history and statistics • Cohort analysis • AB testing A B 24% 76%
- 46. Conclusion • Professional applications in the browser are possible with today’s technology • Cloud/web is not a feature, it is a paradigm
- 47. Conclusion • The browser does more than UI • hybrid client + server side compute • Use analytics and iterate • steadily improve the product based on user data
- 48. Conclusion
- 49. Conclusion Embrace web JavaScript is capable! the browser is the new OS
- 50. Project Lynx Team @ Forge DevCon Expo Meet us at our expo table
Notes de l'éditeur
- Joined Autodesk one year ago I am part of Thiago Da Costas Team in Germany Currently I am working on Project Lynx
- Through the internet our world has become highly connected. Today not only our PCs are connected to it, but also our mobile phones, TVs and smart home devices. So it is not suprising that this evolution is reflected in a new wave of software specifically tailored towards a connected world. - Not cloud enable desktop products - Development towards cloud and web in general no toys but professional In many cases they disrupt established desktop market
- It was mostly HTML with only bits of javascript and its most interessting feature was 1GB of email space. But it was a seed from which grew a much broader ecosystem…
- … including Google Docs in which you can even create your presentation for a conference like the Forge DevCon. And you don‘t have to do it alone. You can create it collaboratively with you collegues, or share „work in progress“ slides with other presenters.
- This image is from google maps and it makes me a bit nostalgic. Before joining Autodesk I did nearly 10 years of R&D in high quality terrain visualization and virtual globe applications. Back then you needed a decent desktop rig with a good dedicated graphics cards less detailed images. Now you can have this experience not only natively running in the browser, but directly on your mobile phone and seemlessy for the entire world.
- Also in the field of 3D modelling and mechanical engineering there are great web applications. Range starts with visualization and sharing platforms for 3D models Upload, view, embed, share
- Tinkercad goes one step further and gives you easy to use modelling tools tailored to the maker scene. Its easy accessibility has made it very successful with a huge user base of 2.5mio and approx. 3000 approx. concurrent users
- And on the professional end of the range we have Project Leopard, a fully fledged parametric CAD applications
- Not limited to graphics, but there are classic applications like word processing and spreadsheets. Microsoft had to react on google docs and developed their own solution with office online apps. So, in my view this is a good example of the disruptive power of rich web applications
- Scalability Infinite storage and compute Scale up and down It allows us to create connected applications with different purposes and for different user while sharing the same data simultaneously without the need for data copies. And as you have heard in other talks this a central paradigm of the Forge Platform
- By the way Popularity by # of project and tags on github and stack overflow
- Clear indication for how important web applications have become Can‘t afford to ignore them
- Forge to rescue
- How to sync to keep data consistent
- No guarantees Services/ applications need to fail and resume gracefully code analysis, refactoring and code navigation in large applications is tricky
- https://fra.me/ Isolated desktop application Hardware and Bandwidth intense
- So instead we chose to go full web and develop our software with thick clients and thin services round-trip latency, bandwidth electricity, bandwidth, hardware easy to scale #users
- actual size matters less avoid locking tech in monolithic applications facilitate the development of standards More than just reusability Leverage network effects to get exponential growth
- Platform idea is the reason why we started project lynx IDX Show experiences using build using different "lego blocks"
- Fit a prosthetic tooth based on a scanned dental impression configure design workflows using given or self developed building blocks
- Or develop specialized apps for mechanical engineering incorporating flow and stress simulations, - reduce idea to physical prototype time reduce the number of physical prototypes Rule out candidates early
- For designers to quickly exchange and develop ideas
- And customer faced applications
- desktop look and feel
- application development framework
- A lot of code is designed to run on both client and cloud
- Client side previews Server side photo realistic rendering
- Even more the other way around
- Data at the center! React to changes of the data
- Two applications operating on the same data
- ~2 million lines of JS code in Leopard C++ code not accounted
- But don’t hesitate do develop your own technology if there is no good fit out there
- because there is no strict typing helps developers to read and understand the code and IDEs to structurize code and resolve ambiguities Transcompiler Compiled code is large performance varies extremely between browsers Debugging
- Reuse objects
- Basic knowledge of JIT compiler is very helpful to avoid language features that pose additional overhead With many ui elements, DOM Reflows can kill performance Pixel precise layouting Google Sheets does it as well Avoid polymorphic functions in performance critical sections Avoid dynamically adding object members
- great idea compelling design attractive business model state of the art technology
- What to do instead? We are in a connected world. Find it out.
- What users groups do we have? How do their workflows look like/What workflows to they expect? Quantification reduces guesswork.
- Track events Track behaviour of different groups (by use, by time) Let new features/implementations compete
- Cloud/web is not a feature, it is a paradigm workflows change so needs application design