home ๐Ÿ‘จโ€๐Ÿ’ป about ๐Ÿ’Ž community ๐Ÿฅณ events ๐Ÿ‘” jobs enter


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?



kra.yonatan@gmail.comOct 1, 7:38 AM

apply to


Upload CV

About Blog Values
Premium Silver Contact
Articles Privacy policy Terms of service
indydevs ยฉ 2016-2024


Arlozorov 186, Tel Aviv, Israel
Dolores 240, Suite 12, San Francisco, CA

contact@indydevs.com