I am bit confused on how SharePoint Framework fits in with the two hosting models (SP-hosted, Provider-hosted). When I go to this tutorial they suddenly call it as client side web-part, and it seems to be something that lives on the SP site. Isn't this was SP hosted apps where for?
The SharePoint Framework is not an Add-In
There are some significant differences between SharePoint Add-Ins (SharePoint-hosted or otherwise) and the SharePoint Framework (SPFx).
Notably, consider these disadvantages that add-ins have:
In contrast, SPFx code isn't embedded in an iFrame:
- The controls are rendered in the normal page DOM.
This means customizations through the Framework can load more efficiently.
SharePoint Integration Differences
Sensibly, SPFx provides some "hooks" for getting info from SharePoint, since it's designed explicitly for the context of a SharePoint page (whereas add-ins are a little more agnostic, with a lot of shared infrastructure and design between Office Add-Ins and SharePoint Add-Ins).
Again, quoting from the above documentation about the SharePoint Framework:
It includes a robust client API, an HttpClient object that handles authentication to SharePoint and Office 365, contextual information, easy property definition and configuration, and more.
These hooks are useful not only for web parts but also for "extensions" which are also built using the SharePoint Framework. Think of extensions as replacements for customization that typically got injected into masterpages and custom script actions. There is not a hosted add-in equivalent to extensions.