1. Introduction to Sitecore JSS for frontend and backend developers
Hello. My name is Artsem. I am a lead sitecore developer at Brimit.
Today I am gonna tell you about Sitecore JavaScript Services or JSS.
First of all I want to say that I’ve prepared this presentation with my colleague who is a front-end developer and we had to be here together but he can’t join us.
JSS was released along with Sitecore 9 and introduced on Sitecore Symposium by Alex Shyba.
He also really helped me with preparation of presentation and shared his slides. Some of them I’ve used in my slideshow.
I spent some time to research JSS and now I would like to share what I’ve discovered.
Artsem Prashkovich
Team Lead at Brimit
twitter.com/apr_dev

2. What is Headless Content Management?
Headless is an architecture that allows the physical decoupling of:
Content Management
Content Delivery
Content Presentation
The rendering of the content and presentation on one or multiple devices
Delivery of content and presentation to one or more channels
Creation and organization of content
Before I start talking about JSS, I should mention a couple of words about "headless" approach. Headless is an architecture  that allows the physical  decoupling of:
Creation and organization of content;
Delivery of content and presentation to one or more channels;
The rendering of the content and presentation on one or multiple devices.
[SLIDE]
Artsem Prashkovich. Brimit
twitter.com/apr_dev

3. What is Headless Content Management?
… or,
CMS without the front-end (rendering) part.
or in other word the CMS without the front-end (rendering) part
I also should say that Sitecore have been supporting the headless approach and being able to return a content of item by existing services, like Sitecore Services Client.
Then this data can be used and rendered by different ways like JavaScript frameworks and mobile devices [SLIDE]
Artsem Prashkovich. Brimit
twitter.com/apr_dev

4. What are we missing on? a.prashkovich@brimit.com twitter.com/apr_dev
But Sitecore Service Client returns the date without applied personalization and without renderings data in general as a result we can’t use:
* Tracking
* Personalization
* Content Testing
Experience Editor
With JSS, we have got an ability to implement  the headless approach with the support for  all the tools that had not been available before.
Artsem Prashkovich. Brimit
twitter.com/apr_dev

5. build full-fledged customer solutions (SPAs, web apps, websites)
What exactly is JSS?
Sitecore JavaScript Services is a toolkit for JavaScript developers allowing to
build full-fledged customer solutions (SPAs, web apps, websites)
using modern JS libraries and frameworks (React.js, Angular)
by being completely unplugged from Sitecore.
What exactly is JSS? JSS is a toolkit for JavaScript developers allowing to build full-fledged customer solutions (SPAs, web apps, websites) using modern JS libraries and frameworks like React.js, Angular by being completely unplugged from Sitecore.
As we can see, JSS is a playground for Frontend developers. And I will not be surprised if you ask me: “What’s in it for us, as for backend developers?”.
Actually, there are some interesting features like a Layout Service that I am going to describe a little bit later.
Artsem Prashkovich. Brimit
twitter.com/apr_dev

6. Code-first Sitecore-first Two ways to start your JSS project
So, we decided to develop a solution with JSS.
There are two ways to start your own JSS project:
Artsem Prashkovich. Brimit
twitter.com/apr_dev

7. Code-first vs Sitecore-first
FED works disconnected from Sitecore and defines Sitecore structures via in-code component descriptors (manifest) and route data.
Sitecore IA (templates, renderings, etc.) is generated via the import process.
Good for:
Smaller projects or temporary sites (e.g. campaigns)
Front-end led projects
Micro-apps within a larger site
Sitecore-first
Sitecore IA (templates, renderings, etc) are created by the Sitecore developer – no import process utilized.
FED works disconnected from Sitecore and creates components and mock route data based on spec/contract provided by Sitecore developer.
Contract can be defined first to allow concurrent work.
Good for:
Larger / complex projects
Organizations looking for full control over Sitecore IA
FEDs without Sitecore expertise
In case of using Code-first approach: In case of using Sitecore-first approach:
Actually in today’s demo we will deal with code-first approach.
Artsem Prashkovich. Brimit
twitter.com/apr_dev

8. Installation of Sitecore modules:
Installation process
Installation of Sitecore modules:
Download and install two packages from Sitecore site:
Sitecore JavaScript Services Tech Preview Server
Sitecore JavaScript Services Tech Preview Infrastructure
Installation of Front-end project:
Download an advanced app example from JSS github repository:
Setup the application. Run the following commands in console:
npm install
npm run setup
npm run dev
Speaking about an installation process, I can say that it is pretty simple comparing to my first installation of Sitecore 9 :)
There are two parts:
For installing the front-end project, the node.js should be installed in your system. I didn't found any requirements regarding its version. I downloaded the latest and it works fine with JSS.
Then, in case you want to research JSS,  I would recommend downloading an advanced app example from jss github repository and work with it. There is also a basic app example, but it does not cover all the capabilities of JSS.  
In case you want to do your own solution, I suggest doing the same: download a source from jss repository, removing unnecessary components, leaving one for example, and ...then starting implementing your own components based on the provided example. But it is just my point of view. I am not a FED and it looks like something extra difficult for me to do it from scratch. Maybe for someone it is not.
Then, after getting the source code, you need open it by some editor (I am currently use JetBrains phpStorm or Sublime) and run three commands in a console:
npm install npm run setup npm run dev
The next things I want to explain are application modes. All of them are presented on the slides.  [slide]
Artsem Prashkovich. Brimit
twitter.com/apr_dev

9. JSS application modes Disconnected developer mode
Rendering performed by: browser
Data comes from: local .json files
Connected developer mode
Data comes from: Sitecore
Integrated mode
Rendering performed by: both browser & server
Headless server-side rendering mode
Headless browser rendering mode
Rendering performed by: the browser
JSS allows you run your JS app in various modes or configurations giving you a lot of flexibility.
Generally, all of them are characterized by two things: it is a data provider and a place where rendering will be performed.
Artsem Prashkovich. Brimit
twitter.com/apr_dev

10. High level structure and Data Flow
On the diagram we can see that the JSS is based on the services such as Layout, Content and Dictionary services.
There are also Sitecore Ship,  Import service. I separated them because they don't take  part in  rendering process. In case of working with code-first, this services are used for deployment changes to Sitecore.
We also see the config where the jss apps are defined.
There are also Node.js server and Node.js View Engine whose are used for rendering components based on the data which provided by Layout, Content and Dictionary services.
The View Engine is used when rendering is performed on the Sitecore side, otherwise on the Node.js Server side. But take into account that in both cases the data for renderings comes from Layout Service.
Let’s torn to the demo part where I will describe a FE solution structure. [SLIDE]
Artsem Prashkovich. Brimit
twitter.com/apr_dev

11. DEMO TIME Description of front-end project structure
The front-end project has the following structure: DEMO
….. Unfortunately, I am not a FED and I can just briefly describe FE solution structure.
If we want to add new component to the page, we need to add them into route definition.
Also I should say a few words about a manifest generation. When using a code-first approach, we need a way to map our app components and data into Sitecore. This is done via an app manifest generation process. The manifest describes templates and their fields, renderings, placeholder settings and content items that should be created during package deployment process. DEMO The manifest file is based on the component definitions in ui-components.sitecore.js (*.sitecore.js) file and on the data in route files.
npm run manifest:generate
npm run manifest:nocontent
Artsem Prashkovich. Brimit
twitter.com/apr_dev

12. Supporting Multi-language and Multi-sites
Features
Supporting Multi-language and Multi-sites
Deploying changes to the Sitecore
Layout Service and extensibility
Dictionary Service
Content Service
Here is a list of features that I would describe in detail.
Artsem Prashkovich. Brimit
twitter.com/apr_dev

13. Supporting Multi-language and Multi-sites
Multi-sites - a separate front-end project needs to be created with a configured different app and site names.
Multi-language - the “jss-advanced-app” provides an example of multi-language application. Only one language version can be imported into Sitecore via the manifest. Multi-language import currently is not supported.
Supported!
Multi-sites - separate front-end projects need to be created with configured different app and site names.
Multi-language - the jss-advanced-app provides an example of multi-language application. Only one language version can be imported into Sitecore via the manifest. Multi-language import is currently not supported. DEMO
Artsem Prashkovich. Brimit
twitter.com/apr_dev

14. Deploying changes to the Sitecore
Command for Sitecore IA and JavaScript server artefacts deployment:
npm run package
Ability to deploy Sitecore IA and artefacts separately: npm run package:files or npm run package:manifest
Ability to deploy Sitecore IA without content items (only templates, renderings, placeholders): npm run manifest:nocontent and then npm run package:manifest
Content Workflow and Developer Overwrite - the second way to prevent content overriding
Ship service
[Slide]  
- Command for Sitecore IA and JavaScript server artefacts deployment: npm run package
- Ability to deploy Sitecore IA and artefact separately: npm run package:files or npm run package:manifest
- Ability to deploy Sitecore IA without content items (only templates, renderings, placeholders): npm run manifest:nocontent and then npm run package:manifest
- Content Workflow and Developer Overwrite - the second way to prevent content overriding.
- Ship service
DEMO (Introduction Sitecore Structure and Development Mode and Content Mode)
Artsem Prashkovich. Brimit
twitter.com/apr_dev

15. The most interesting part of JSS for a Sitecore developer!
Layout Service
- is fundamental thing in JSS which outputs Sitecore item's presentation details in JSON format with applied personalization rules.
The most interesting part of JSS for a Sitecore developer!
Layout Service - is fundamental thing in JSS which outputs Sitecore item's presentation details in JSON format with applied personalization rules.
We haven't had service like this before JSS was released. Is is fundamental because it allows us render a sitecore data anywhere whether in the console app or mobile device with ability to use personalization, A/B tests and so on.
And THIS service is a thing which would  be really interesting for us as a Sitecore developers.
DEMO (show differs with applied personalization)
Artsem Prashkovich. Brimit
twitter.com/apr_dev

16. Extending Context Data Returned by the Layout Service
Allows you to add your own data to the context object.
It's useful for providing data for statically placed components on a page, that not managed through a Placeholder and Sitecore layout, such as header and footer navigation
In addition to returning the name, fields, and placeholders/renderings of the requested item, the Layout Service output also contains a context property.
Like Sitecore.Context in .NET-based Sitecore development, this property can be used to provide data such as the current site context and page mode.
It's also useful for providing data for statically placed components on a page, that not managed through a Placeholder and Sitecore layout, such as header [e] and footer navigation.
We can enable/disable the out of the box properties and add your own data to the context.
DEMO
Artsem Prashkovich. Brimit
twitter.com/apr_dev

17. Customizing Rendering Serialization in Layout Service
By default, the Layout Service will populate the rendering contents with the fields of the rendering's datasource item. But sometimes we need to output something else, such as:
Data from a different item
A calculated or otherwise more complex value
Non-item data, such as information from xDB
Non-Sitecore data from external systems
The Layout Service allows the customization of the serialized rendering content.
[Slide] By default, the Layout Service will populate the rendering contents with the fields of the rendering datasource item. But sometimes we need to output something else, such as:
Data from a different item
A calculated or otherwise more complex value
Non-item data, such as information from xDB
Non-Sitecore data from external systems
The Layout Service allows customization of the contents of a serialized rendering.
Artsem Prashkovich. Brimit
twitter.com/apr_dev

18. Dictionary Service
REST endpoint for retrieving an app-specific translation dictionary.
$your-app-domain/sitecore/api/jss/dictionary/<app>/<language>/
REST endpoint for retrieving an app-specific translation dictionary. DEMO
Artsem Prashkovich. Brimit
twitter.com/apr_dev

19. Content Service
Experimental service which provides access to content items outside of the Layout Service usage.
URL Example:
Currently the Sitecore JSS team works on the in-depth integration with Sitecore Services Client for retrieving content data. The JSS Content Service will not be supported in the future.
Experimental service which provides access to content items outside of the Layout Service usage.
Currently the Sitecore JSS team works on the in-depth integration with Sitecore Services Client for retrieving content data and the current JSS Content Service will not be supported in the future.
Artsem Prashkovich. Brimit
twitter.com/apr_dev

20. Conclusion a.prashkovich@brimit.com twitter.com/apr_dev
In conclusion, I would like  to say that it is a really exciting  experience. The technology is very promising but not so simple in use.
Despite my previous experience with reactjs, it was rather challenging to work with a complex FE solution structure as well as with redux.
I enjoyed getting to know it, and I hope in future I will have another opportunity to use  JSS in  a real project.
Artsem Prashkovich. Brimit
twitter.com/apr_dev

21. Thank you for attention!
Artsem Prashkovich. Brimit
twitter.com/apr_dev