Download as PDF, PPTX
![Project Leopard: Performance Optimization • Heavy profiling • JavaScript is fast [in most cases] • Reduce pressure on garbage collector • Object pooling and preallocation](https://image.slidesharecdn.com/implementingrichapplicationsinthebrowser-160719214242/75/Forge-DevCon-2016-Implementing-Rich-Applications-in-the-Browser-40-2048.jpg)
Uploaded byAutodesk
Forge - DevCon 2016: Implementing Rich Applications in the Browser
The document discusses the evolution and challenges of developing rich web applications using browsers and cloud technologies, emphasizing scalability, collaboration, and accessibility. It highlights the importance of leveraging current technologies while addressing limitations and optimizing performance. The conclusion asserts that professional applications in the browser are feasible, advocating for the embrace of web technologies and analytics for continual improvement.
Forge - DevCon 2016: Implementing Rich Applications in the Browser
- 1. Sebastian Dunkel Software Engineer ImplementingRich Applications in the Browser
- 2. Rich Cloud-Based WebApplications • The next wave of software for a connected world is coming • Applications • Experiences • Platforms • Accessible, integrated, collaborative, professional and disruptive
- 3. Gmail's home pageas it looked on March 31, 2004, shortly before the service launched
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. Why in theCloud? • Scalability • Collaboration • data at the center
- 11. Why in theBrowser? • 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 # projectson Github #tagsonStackOverflow redmonk.com
- 15. Challenges: Platform Limitations ofthe browser platform • JavaScript / HTML only • limited access to host system • diverse behavior across browsers
- 16. Challenges: Technology Where doesthe client technology come from? • legacy code is • Java, C++, C#, … • often locked in desktop applications
- 17. Challenges: Technology Where doesthe 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 Howto distribute work between browser and cloud? • latency and bandwidth • cost and scalability • synchronization
- 19. Challenges: Development Development isdifferent • Communication is asynchronous and unreliable • JavaScript is not strongly typed • developing large applications can be tricky
- 20. Easy Solutions ? Whynot simply employ desktop virtualization? • You will miss a lot of the value!
- 21. Easy Solutions ? Whynot simply employ desktop virtualization? • You will miss a lot of the value! Embrace the web, accept the challenge!
- 22. Thick Clients andThin Services • User experience and interactivity • Costs for service provider • Client hardware is available and capable
- 23. Thick Clients andThin Services • Services with discrete tasks • Better reusability • Think platform!
- 24. Project Lynx IDX Createamazing 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: Fusion360 in the Browser • Fully-fledged CAD in the browser • with real-time collaboration
- 30. Project Leopard: Fusion360 in the Browser • Fully-fledged CAD in the browser • with real-time collaboration • Built upon Forge platform • technology components
- 31. Project Leopard: Fusion360 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: Clientvs Server Combine client side... • sketching • assemblies • visualization ...with server side compute • photo realistic rendering • geometry processing
- 33. Project Leopard: Clientvs 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 ProjectLeopard video approx. 2 min Project Leopard: Fusion 360 in the Browser
- 35. Project Leopard: Clientvs Server • Browser clients and cloud servers jointly operate on the same data
- 36. Project Lynx IDX& Leopard: Collaborative Design
- 37. Lessons learned... … whileimplementing rich applications in the browser Building large scale applications is challenging, but possible and worth the effort
- 38. Technology Stack: Don’treinvent 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: PerformanceOptimization • Heavy profiling • JavaScript is fast [in most cases] • Reduce pressure on garbage collector • Object pooling and preallocation
- 41. Project Leopard: PerformanceOptimization • Help the JIT compiler • Understand how your code gets optimized • Direct canvas rendering • Avoid slow DOM/CSS
- 42. Reality Check Your applicationhas 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 userexperience and usage • better understand the user • from the landing page to logout screen
- 45. Analytics • Event history andstatistics • Cohort analysis • AB testing A B 24% 76%
- 46. Conclusion • Professional applicationsin the browser are possible with today’s technology • Cloud/web is not a feature, it is a paradigm
- 47. Conclusion • The browserdoes more than UI • hybrid client + server side compute • Use analytics and iterate • steadily improve the product based on user data
- 48.
- 49. Conclusion Embrace web JavaScript iscapable! the browser is the new OS
- 50. Project Lynx Team@ Forge DevCon Expo Meet us at our expo table
Editor's Notes
- #2 Joined Autodesk one year ago I am part of Thiago Da Costas Team in Germany Currently I am working on Project Lynx
- #3 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
- #4 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…
- #5 … 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.
- #6 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.
- #7 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
- #8 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
- #9 And on the professional end of the range we have Project Leopard, a fully fledged parametric CAD applications
- #10 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
- #11 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
- #13 By the way Popularity by # of project and tags on github and stack overflow
- #15 Clear indication for how important web applications have become Can‘t afford to ignore them
- #18 Forge to rescue
- #19 How to sync to keep data consistent
- #20 No guarantees Services/ applications need to fail and resume gracefully code analysis, refactoring and code navigation in large applications is tricky
- #21 https://fra.me/ Isolated desktop application Hardware and Bandwidth intense
- #23 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
- #24 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
- #25 Platform idea is the reason why we started project lynx IDX Show experiences using build using different "lego blocks"
- #26 Fit a prosthetic tooth based on a scanned dental impression configure design workflows using given or self developed building blocks
- #27 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
- #28 For designers to quickly exchange and develop ideas
- #29 And customer faced applications
- #30 desktop look and feel
- #31 application development framework
- #32 A lot of code is designed to run on both client and cloud
- #33 Client side previews Server side photo realistic rendering
- #34 Even more the other way around
- #36 Data at the center! React to changes of the data
- #37 Two applications operating on the same data
- #38 ~2 million lines of JS code in Leopard C++ code not accounted
- #39 But don’t hesitate do develop your own technology if there is no good fit out there
- #40 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
- #41 Reuse objects
- #42 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
- #43 great idea compelling design attractive business model state of the art technology
- #44 What to do instead? We are in a connected world. Find it out.
- #45 What users groups do we have? How do their workflows look like/What workflows to they expect? Quantification reduces guesswork.
- #46 Track events Track behaviour of different groups (by use, by time) Let new features/implementations compete
- #47 Cloud/web is not a feature, it is a paradigm workflows change so needs application design