Epic #82839

Json API for implementing single-page applications

Added by Carsten Tornow about 2 years ago. Updated 7 months ago.

Status:
Accepted
Priority:
Should have
Assignee:
-
Category:
-
Start date:
2017-10-22
Due date:
% Done:

0%

Sprint Focus:

Description

Single page applications are spreading more and more...
Wouldn't It be great, if TYPO3 could provide us a JSON API for that?


Related issues

Related to TYPO3 Core - Feature #72018: Integrate JSON cObject Rejected 2015-12-02
Related to TYPO3 Core - Epic #84101: The core must provide configurable structures for both pages and elements out of the box New 2018-02-05 2018-02-07

History

#1 Updated by Susanne Moog about 2 years ago

  • Status changed from New to Needs Feedback

Hey,

can you clarify which kind of API you would like to have? Pages and content, rendered, not rendered, what kind of records?

#2 Updated by Fedir RYKHTIK about 2 years ago

Susanne Moog wrote:

Hey,

can you clarify which kind of API you would like to have? Pages and content, rendered, not rendered, what kind of records?

I think, it should be not rendered, it should be data, but without any specific TYPO3 links. For example, a link to a page in the WYSIWYG should be rendered to standard URL, and not ID of the page. Also images. So the frontend could be any TYPO3 agnostic JS library.

All content records should be possible to export / access by standalone REST URLs in JSON format (page(s) + content, news, custom content records).

As :

http://typo3.dev/pages/123 # Page ID 123 with all properties in JSON and all it's contents with all it's proporties
http://typo3.dev/news # List of news with it's data, first page 0-20
http://typo3.dev/news/42 # News with ID 42 with all data fields

#3 Updated by Carsten Tornow about 2 years ago

Hi Susanne,

if you call:

www.example.com/t3service/content...

or something like that that, you get this returned:

{
   "pages":[
      {
         "id":1,
         "metadaten":{
            "title":"a title",
            "descrition":"a short descrition",
            "keywords":"keywords",
            "url":"page-number-one" 
         },
         "sections":[
            {
               "name":"header",
               "content":[
                  {
                     "type":"imageWithText",
                     "headline":"a headline",
                     "image":"an image url",
                     "text":"a text" 
                  },
                  {
                     "type":"navigation",
                     "links":[
                        {
                           "link":1,
                           "text":"Seite 1" 
                        },
                        {
                           "link":2,
                           "text":"Seite 2" 
                        },
                        {
                           "link":3,
                           "text":"Seite 3" 
                        }
                     ]
                  }
               ]
            },
            {
               "name":"main",
               "content":[
                  {
                     "type":"text",
                     "headline":"a headline",
                     "text":"a text" 
                  },
                  {
                     "type":"imageWithText",
                     "headline":"a headline",
                     "image":"an image url",
                     "text":"a text" 
                  },
                  {
                     "type":"teaserbox",
                     "headline":"a headline",
                     "text":"a text",
                     "button":"a button",
                     "image":[
                        {
                           "alt":"description",
                           "sources":[
                              {
                                 "small":{
                                    "width":320,
                                    "hidpi":true,
                                    "source":"an image url" 
                                 }
                              },
                              {
                                 "medium":{
                                    "width":640,
                                    "hidpi":true,
                                    "source":"an image url" 
                                 }
                              },
                              {
                                 "big":{
                                    "width":1280,
                                    "hidpi":true,
                                    "source":"an image url" 
                                 }
                              }
                           ]
                        }
                     ]
                  }
               ]
            }
         ]
      },
      {
         "id":2,
         "metadaten":{
            "title":"another title",
            "descrition":"another short descrition",
            "keywords":"more keywords",
            "url":"page-number-two" 
         },
         "sections":[
            {
               "name":"header",
               "content":[
                  {
                     "type":"imageWithText",
                     "headline":"a headline",
                     "image":"an image url",
                     "text":"a text" 
                  },
                  {
                     "type":"navigation",
                     "links":[
                        {
                           "link":1,
                           "text":"Seite 1" 
                        },
                        {
                           "link":2,
                           "text":"Seite 2" 
                        },
                        {
                           "link":3,
                           "text":"Seite 3" 
                        }
                     ]
                  }
               ]
            },
            {
               "name":"main",
               "content":[
                  {
                     "type":"text",
                     "headline":"a headline",
                     "text":"a text" 
                  },
                  {
                     "type":"imageWithText",
                     "headline":"a headline",
                     "image":"an image url",
                     "text":"a text" 
                  },
                  {
                     "type":"teaserbox",
                     "headline":"a headline",
                     "image":"my image",
                     "text":"a text",
                     "button":"a button" 
                  }
               ]
            }
         ]
      }
   ]
}

#4 Updated by Carsten Tornow about 2 years ago

With react for example, you can transfer the data directly to redux store. Or you can call the content of further pages asynchronously...
Thats it - simple as that... We can build in the magic of a single page application..!

I think, you've got the picture... :-)

PS: that's also useful to feeding a mobile app.

#5 Updated by Carsten Tornow almost 2 years ago

hello together,

does this explanation satisfy you? If you need more information, feel free to ask...

Carsten

#6 Updated by Sybille Peters over 1 year ago

Dear Carsten,

I'm not in the TYPO3 core team so I can't give you an official answer here. I don't like issues with long response times though, so I will try to provide some suggestions and hope they are helpful for you.

I like your idea but wouldn't this require for every content element / plugin etc. to implement a function for the JSON output?

This might be feasible to do for just TYPO3 core elements, but I assume TYPO3 installations usually rely heavily on extensions. Every extension that does FE output would need to implement the JSON output function. Doable yes, but realistic?

I am not really an FE developer so sorry if I misunderstood your intentions. It looks like you want to transfer most of the functionality of TYPO3 to React or some other JavaScript framework. Is that correct? So the advantage would be that you would need to only fetch one page, the work would be done in the client browser (with better performance) and your developers can work with their well known frameworks like React and less with TYPO3?

I am not sure, this topic might be beyond the scope of a forge issue. If you get an answer here real soon, great! If not, here are some possible pointers. What I have seen so far is usually not the entire website implemented as a Singepage design but the data that an extension provides:

Sybille

#7 Updated by Sybille Peters over 1 year ago

  • Subject changed from Json API to Json API for implementing single-page applications

#8 Updated by Mathias Brodala over 1 year ago

  • Status changed from Needs Feedback to New

#9 Updated by Susanne Moog over 1 year ago

  • Tracker changed from Feature to Epic
  • Status changed from New to Accepted

Hey Carsten,

thanks for the answer. We have providing a REST API on our agenda and I wanted your input here so we can incorporate that to any concepts we write - however at the moment the earliest implementation of a full REST API out-of-the-box I can see would be in TYPO3 v10 (Sybille already mentions some of the relevant points, but especially regarding content structures and relations there is a lot of conceptual work still to be done - and the bigger features for v9 are already defined, see https://typo3.org/typo3-cms/roadmap/). If you need a solution for any of the current TYPO3 versions take a look at Sybilles links or at https://extensions.typo3.org/extension/restler/

HTH,

Susanne

#10 Updated by Carsten Tornow over 1 year ago

Hi Susanne,

good to know, having a REST API on your agenda now!

Believe me, it is necessary to provide such an interface. In almost every major project (in automotive industry, fashion, trade...), the use of an SFA framework is at least discussed, ...and finally used.

In this case, TYPO3 is out of the game...

Carsten

#11 Updated by Susanne Moog over 1 year ago

#12 Updated by Susanne Moog over 1 year ago

  • Related to Epic #84101: The core must provide configurable structures for both pages and elements out of the box added

#13 Updated by Susanne Moog about 1 year ago

  • Target version changed from 9 LTS to Candidate for Major Version

#14 Updated by Susanne Moog 7 months ago

See also https://decisions.typo3.org/t/native-typo3-headless-initiative/500 for a discussion / idea on that topic. If you are interested, please add your points there.

Also available in: Atom PDF