Following course consists of multiple lessons that aim to teach you solutions when it comes to developing interactive diagrams using GoJS library.
Throughout this course we'll be building interactive diagram that will allow visualize a family tree.
Each lesson will cover a part or functionality that is being provided by the GoJS library.
At the end of each lesson there will be a homework.
It's purpose is to help you memorize the subject that was covered in particular lesson.
Moreover, things that were supposed be done within the homework, will be required to progress in course.
Otherwise the application will be incomplete.
This course is dedicated both, to beginner and experienced programmers.
Minimal knowledge:
- JavaScript
- HTML
- CSS
- code editor of your choice
Optimal knowledge:
- all previous
- TypeScript
- OOP
- React/Angular
The goal of this course is to teach you skills required to create, develop and maintain
interactive diagrams using GoJS library.
As the course progresses, you'll learn more and more capabilities of GoJS library.
Since we use TypeScript within our projects, we're going to use it within this course as well.
Don't worry if you've never programmed in TypeScript, it's like JavaScript but with some useful additions.
Some techniques that we'll use within this course could be useful in other aspects of frontend programming.
GoJS is a diagramming library which allows Rapidly Building Interactive Diagrams.
It offers features such as:
- drag'n'drop
- copy & paste
- in-place text editing
- tooltips
- context menus
- layouting
- templates
- bidirectional data binding
- transactional state
- undo manager
- extensible tools
- and more
It's worth to mention, that this library comes with TypeScript support for improved developing experience.
Lesson 0: Project Setup and Introduction
Lesson 1: Creating your first GoJS diagram
Lesson 2: Family members representation - node templates
Lesson 3: Family members relations - link templates
Lesson 4: Grouping up our family members - groups
Lesson 5: Introducing new family members - palette & drag'n'drop
Lesson 6: Describing your family members - diagram events & data updates
Lesson 7: Showing additional information on hover - tooltips
Lesson 8: Let's share our family tree - exporting diagram
Lesson 9: Expanding developer's toolset - Debugging
Lesson 10: Overlapping under control - Layers and zOrder
Lesson 11: Back to the previous state - Undo Manager