The DocdokuPLM is an open-source platform allowing its users to manage their product's lifecycle, from design to maintenance. The main application is built upon RequireJS and BackboneJS librairies for the front-end, and JEE for back-end. The GUI is quite complete, and may won't fit for all users involved in the process. This is especially the case for CAD designers who just need to commit their changes without having such a rich graphic interface. To answer this need, we developped a desktop application, interfacing our server with the CAD designer's file system : the DPLM. First, we developped a command line interface, which is very lightweight and really great for advanced users. However providing a GUI which could interface with the CLI and allow the user to manage multiple files upload at once was more than needed. Providing a consistent user experience across different platforms has been one of our challenges in the context of our application. The choice of a web framework was then a natural choice. But how could we get it run within a desktop application ? Node-Webkit brought us the ability to interact directly with the user's file system and embed the app in a webview, letting us the choice to use any web framework we wanted to use.

1. DocDokuPLM : Using web technologies
in a desktop application
Morgan Guimard - 17 nov 2015 - OW2 con' 2015

2. We are DocDoku
2
We help industrial organizations digitize their business
Based in France
● Toulouse
● Paris
Committed to the Open Source, we
make DocDokuPLM:
● https://github.com/docdoku/docdoku-plm
● Twitter: @docdoku
#PLM #HTML5 #Java #BigData
#WebGL #IoT #Industry

3. About me
3
Tech experience
● 10 years in Web Technologies
● JavaScript developer
● Java EE developer
Morgan Guimard
● DocDokuPLM dev leader
● Technical trainer

4. Agenda
4
1 – Introduction to Product Lifecycle Management
2 – Working with CAD files
3 - Our cross-platform solution

5. 1 - Introduction to Product Lifecycle
Management

6. 6
Manages the entire lifecycle of a product from its conception to
its disposal.
Integrates people, data, processes and business systems and
provides a product information backbone.
Product Lifecycle Management

7. PBS?
7
Product Breakdown Structure
A hierarchical listing of assemblies and components, and the
quantities there-of, necessary to produce a final product

8. Parts
8
Each node of a PBS is a part
Stores every information of a component, as its name, custom
attributes, and its geometry file.
The part number is its identifier. You may find the same part at
multiple PBS levels.
V54S3434RTX

9. Assembly / Leaf
9
● Assembly nodes stores the structure informations
● Leaves stores the geometry
● Assemblies and leaves are both considered as parts
Example: An office desk

10. Everything is tracked
10
● Through Check-in / Check-out mechanism
● Iteration (1, 2, 3...) and Revision (A, B, C...)
Example: Part 100 A.3
A is the revision, 3 is the iteration and A.3 is the version
● Iteration = minor changes
● Revision = major ones

11. 2 – Working with CAD files

12. Working with CAD files
12
● Our target: CAD designers
● They are editing lot of files / large files
Check in / Check out
● Those files need to be synchronized on a server
● Collaborative work is a main topic

13. Standard formats ?
13
Some formats are standard
● STEP, IFC, OBJ, …
And some other formats are not standard
● SLDPRT, CATPART, …
We're trying to convert any format, even if not standard

14. CAD files content
14
Depends on the format, can contains
● Geometry only
● Structure only
● Both
Managed server side with DocDokuPLM server
● Converting many formats to a WebGL format
● Extracting the structure from CAD files and creating the PBS
● May require proprietary SDK to parse some none standard formats

15. Multiple editors
15
Many edition tools / platforms
● Windows - Mac OS X - Linux
● AutoCAD, SolidWorks, CATIA, BIM Editor ...
● Developing a plugin for all of them isn't realistic
● Should also be maintained for every software update

16. How can we help every CAD designer ?
16
Editor plugins ?
● Not realistic: too many editors, versions, languages
Operating system integration ?
● Would be a great solution, but requires more than a single code base
The easiest way for us is a cross platform application

17. 3 – Our cross platform solution

18. Command line interface
18
Fits for most advanced users...
● Scriptable
● Lightweight
● Easy to use
● Check in / Check out and synchronize files from command line with a
single command
● ...but lacks a graphical user interface to easily make bulk operations
$ dplm checkin some-part-number

19. Choosing a cross-platform technology
19
Native ? Web based ? What do we need ?
● Read and write the user's FileSystem
● Be able to interact with our JSON WebServices
● Interact with our CLI
● Have a responsive design for each display
● 3D preview

20. Node Webkit
20
Just a nutshell ...
● Wrapping NodeJS and a Webkit browser
● Let's keep a standard API: HTML5
● And let's use NodeJS low level API

21. NodeJS brings us ...
21
… exactly what we need
● Ability to walk the user's FileSystem to discover CAD files
● Read CAD files contents to display them in a 3D preview
● An API to interact with our CLI (Directly in java or bash)
● FileSystem watchers to detect any change made on a file
● An easy way to work with JSON objects

22. Webkit browser
22
Helps us to :
● Create a responsive design
● Keep a single code base for each platform
● Allow HTTP connections and easy JSON parsing
● Load 3D file with WebGL technology for a live preview

23. Pros and cons of this choice
23
We like...
● One code base, and code reuse
● Standard API
● Fast development process
● Latest web technologies can be used
● Easy to package
We don't like so much…
● App size (must embed Webkit and NodeJs)
● Requires more RAM and CPU
● Hard to mimic the OS look and feel
● May have bugs for NodeWebkit (notification, file system changes)

24. Our web based solution
24
DocDokuDPLM
● Built with NodeWebkit
● Using AngularJS as the main framework
● Using NodeJS API

25. Architecture
25
User's desktop
DocDokuDPLM APP
DocDokuCLINodeJS
Webkit + AngularJS
DocDokuPLM server
FSCAD editor

26. Remote and local navigation
26
● Allows the designer to browse remote and local folders

27. File change detection
27
● Allows the designer quickly see which files are out of sync
● Green tick icon means synchronized
● Orange cloud icon means modified

28. Recursive download
28
● Allows the designer to check out / download a whole structure within a
single action
● Select existing baseline

29. Synchronizing a whole folder
29
● Allows the designer to check in / upload a whole folder

30. 3D preview
30
● Allows the designers to see their files in 3D before uploading them
● The same 3D engine is used in the DocDokuPLM server

31. To come soon
31
We'd like to bring the following features to our solution
● Desktop notifications (synchronization done, etc…)
● Better errors handling
● Shortcuts to open a part in the user's favorite editor from our app
● SMART check-in order when pushing many files in a single operation
● ...

32. Questions ?

33. Thank you !