rafaeli
kra.yonatan
Open Roles
1/9
kra.yonatan
[Article] HOW CAN TESTS CONTRIBUTE TO COMMUNICATION
1/10
kra.yonatan
We are living in a dream world.
I mean, web developers do. Because now Photoshop is running in the browser - in full (links in the comments).
Adobe launched Photoshop on the web just a few days ago. That means Photoshop - one of the most complex desktop applications around - can now be used in the browser.
We saw applications ported to the browser before. What held Photoshop so far was a performance issue. They just couldn't get good enough benchmarks to launch it officially.
So, how did they do it eventually? With some very exciting new web technologies!
- Webassembly
I think this covers 75% or more of the ability to port Photoshop to the web. In short, webassembly is a way for browsers to run binaries. Using a compiler like "emscripten", they were able to compile C++ code to webassembly.
The problem so far was that some parts could not be ported "as is" and that the performance of the compiled webassmbly was not as good as the C++ performance.
The Photoshop team worked with the Google team to overcome these obstacles - and we all enjoy the fruits of their labor in browser enhancements.
- Web components
Adobe's UI component library (Spectrum) is built with Web Components. That means they create custom elements that have an encapsulated template inside them (I write a lot about Web Components - check my blog for practical tutorials).
With Web components, you can create a very rich application without depending on a certain framework or library.
- Service workers
The main use of service workers is to cache network requests. Photoshop uses Service workers to cache JavaScript and Webassembly scripts.
Local cache is much faster than network requests - hence, this feature significantly speeds up the load time.
- Display P3 Canvas
The default color specification for the web is sRGB, which was developed in 1995, for the hardware that was available then.
A new specification, DCI-P3, was developed in 2005.
The difference between them is the "closeness" of the colors to the "real" physical wavelength as well as the range of colors - especially the green range (see added picture for reference).
At around 2020, dispaly-p3 was added to the canvas specification. Photoshop needed this in order to display the rich colors its users expect.
- File System Access API
The browser used to be isolated from the rest of the computer. The file system is one such part.
The File System Access API allows a developer to interact with the user's file system to open, create, edit, and save files to disk.
Enter the Dream World
Combining these new web technologies allowed Adobe to port such a huge and "heavy" application to the web. In the comments, I've added links for practical guides on some of these technologies.
What can we, as developers, do with them?
