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).
For example, you can utilize javascript to detect locale settings and provide appropriate data. Check following:
navigator.language
toLocaleString()
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.
Proxy 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
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
- Purely javascript based solution, which would render all HTML and would call appropriate APIs through ajax to populate it with data
- 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.
Final thoughts
Use javascript based solution as much as you can, as it can provide a better experience to the Customer, smaller payload for page loads, you can even do speculative data load if you can predict customer's next actions.
BUT, the problem with the purely javascript solution is SEO. If all of your data is loaded through Ajax, Google probably would not be able to parse it.
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:
