TYPO3 Core

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

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" 
                  }
               ]
            }
         ]
      }
   ]
}

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.

hello together,

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

Carsten

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?

• Daniel Goerz: Create APIS with the JSON view
• Onepage/Singelpage design with FluidTYPO3

Sybille

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

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.