Answers to the questions
Who is responsible for formatting data, for example prices. Magento API and frontend framework?
Magento API provides access to the data and business logic. Formatting data/prices are part of presentation logic, so on this way, you have more flexibility to present information in the way you want (without being forced to do it on Magento way).
Or, you can even choose to import prices from Magento to 3rd party system, or data analysis tool, and having prices formatted according to the currency format would only break import process until you solve "currency conversion".
Who is responsible for resizing product images and cache them? Because in the native Magento 2 API there is no resize or cache system.
Exactly. As I said above, Magento provides access to the data (without presentation logic). It's up to you how you'll use it.
For example, you may opt for adaptive image resize http://adaptive-images.com/details.htm, so you can easily use original image and do whatever you want.
You can choose the way how you'll cache images, do you want to use lossy or lossless compression for reducing images, etc.
Do I need to create new custom isolated API or extend native for future upgrade purpose?
I recommend you to make your API which will be used for presentation logic, and you'll be 99.9% (my guess) sure that you'll not be affected by a future upgrade of Magento2 API.
Do you recommend to use an extra layer to combine CMS and Magento API?
Highly recommended. But, the extra layer doesn't have to be an additional application; it can be a Magento2 module too.
The good thing about this is the fact that you're free to combine it however you want; you can build your proxy layer using any language/technology you want.
I appreciate you to share your return in experience.
There are many approaches you can use here. I'll share my opinion on it.
My Approach to Headless
First, I would split it into two layers: proxy layer and presentation layer.
The first thing you'll have to consider is about building Proxy layer. Behind the scenes, you can utilize Magento API, CMS API, ERP API, x API, whatever you want...
In the proxy layer, you're free to use and organize data the way you want. You can implement caching layer there, as well as additional functionalities for data formatting, customer tracking, various automatizations, etc. In general, anything you need for easy-juggling in the presentation layer.
The proxy layer doesn't have to be coded in PHP; it can be coded in Java, NodeJS, or you can even utilize AWS API Gateway, AWS SQS, and Lambda for providing a whole proxy layer, or just part of it.
One of the approaches you can use is described by Fabrizio Branca at http://fbrnc.net/blog/2015/10/super-scaling-magento
Presentation layer depends on client platform; if you're going to use it for Mobile App, things are pretty clear about the way how you should utilize proxy API.
For a web application, there are many possibilities. You can use:
- Standard PHP solution (powered by any framework) where you can utilize any of PHP templating engines (like Smarty, Twig, Dwoo...) to provide HTML output
- Java/NodeJS/whatever language you feel familiar with
- Any hybrid/combination of those approaches from above
This is not by the book list, I've just shared few combinations. In reality, your imagination is the only limit.
The solution is to make a hybrid app which will serve whole HTML page on the first load, for example when you hit /catalog/shoes. For any further navigation through the site, you can utilize ajax to fetch only needed blocks.
One of the approaches would be creating snapshots of your page, for example by using PhantomJS. There are also few paid solutions for this, like: