http://forge.typo3.org/http://forge.typo3.org/themes/typo3_forge/favicon/favicon.png?17058661692017-11-04T14:13:59ZTYPO3 ForgeTYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3502222017-11-04T14:13:59ZSusanne Moogsusanne.moog@typo3.org
<ul><li><strong>Status</strong> changed from <i>New</i> to <i>Needs Feedback</i></li></ul><p>Hey,</p>
<p>can you clarify which kind of API you would like to have? Pages and content, rendered, not rendered, what kind of records?</p> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3502602017-11-05T13:52:20ZFedir RYKHTIK
<ul></ul><p>Susanne Moog wrote:</p>
<blockquote>
<p>Hey,</p>
<p>can you clarify which kind of API you would like to have? Pages and content, rendered, not rendered, what kind of records?</p>
</blockquote>
<p>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.</p>
<p>All content records should be possible to export / access by standalone REST URLs in JSON format (page(s) + content, news, custom content records).</p>
<p>As :</p>
<p><a class="external" href="http://typo3.dev/pages/123">http://typo3.dev/pages/123</a> # Page ID 123 with all properties in JSON and all it's contents with all it's proporties<br /><a class="external" href="http://typo3.dev/news">http://typo3.dev/news</a> # List of news with it's data, first page 0-20<br /><a class="external" href="http://typo3.dev/news/42">http://typo3.dev/news/42</a> # News with ID 42 with all data fields</p> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3503622017-11-06T21:12:04ZCarsten Tornowcarsten.tornow@hummelundmors.com
<ul></ul><p>Hi Susanne,</p>
<p>if you call:</p>
<pre><code class="text syntaxhl" data-language="text">www.example.com/t3service/content...
</code></pre>
<p>or something like that that, you get this returned:</p>
<pre><code class="json syntaxhl" data-language="json"><span class="p">{</span><span class="w">
</span><span class="nl">"pages"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"id"</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span><span class="w">
</span><span class="nl">"metadaten"</span><span class="p">:{</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="s2">"a title"</span><span class="p">,</span><span class="w">
</span><span class="nl">"descrition"</span><span class="p">:</span><span class="s2">"a short descrition"</span><span class="p">,</span><span class="w">
</span><span class="nl">"keywords"</span><span class="p">:</span><span class="s2">"keywords"</span><span class="p">,</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="s2">"page-number-one"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="nl">"sections"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="s2">"header"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"imageWithText"</span><span class="p">,</span><span class="w">
</span><span class="nl">"headline"</span><span class="p">:</span><span class="s2">"a headline"</span><span class="p">,</span><span class="w">
</span><span class="nl">"image"</span><span class="p">:</span><span class="s2">"an image url"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"a text"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"navigation"</span><span class="p">,</span><span class="w">
</span><span class="nl">"links"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"link"</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"Seite 1"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"link"</span><span class="p">:</span><span class="mi">2</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"Seite 2"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"link"</span><span class="p">:</span><span class="mi">3</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"Seite 3"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="s2">"main"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"text"</span><span class="p">,</span><span class="w">
</span><span class="nl">"headline"</span><span class="p">:</span><span class="s2">"a headline"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"a text"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"imageWithText"</span><span class="p">,</span><span class="w">
</span><span class="nl">"headline"</span><span class="p">:</span><span class="s2">"a headline"</span><span class="p">,</span><span class="w">
</span><span class="nl">"image"</span><span class="p">:</span><span class="s2">"an image url"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"a text"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"teaserbox"</span><span class="p">,</span><span class="w">
</span><span class="nl">"headline"</span><span class="p">:</span><span class="s2">"a headline"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"a text"</span><span class="p">,</span><span class="w">
</span><span class="nl">"button"</span><span class="p">:</span><span class="s2">"a button"</span><span class="p">,</span><span class="w">
</span><span class="nl">"image"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"alt"</span><span class="p">:</span><span class="s2">"description"</span><span class="p">,</span><span class="w">
</span><span class="nl">"sources"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"small"</span><span class="p">:{</span><span class="w">
</span><span class="nl">"width"</span><span class="p">:</span><span class="mi">320</span><span class="p">,</span><span class="w">
</span><span class="nl">"hidpi"</span><span class="p">:</span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"source"</span><span class="p">:</span><span class="s2">"an image url"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"medium"</span><span class="p">:{</span><span class="w">
</span><span class="nl">"width"</span><span class="p">:</span><span class="mi">640</span><span class="p">,</span><span class="w">
</span><span class="nl">"hidpi"</span><span class="p">:</span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"source"</span><span class="p">:</span><span class="s2">"an image url"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"big"</span><span class="p">:{</span><span class="w">
</span><span class="nl">"width"</span><span class="p">:</span><span class="mi">1280</span><span class="p">,</span><span class="w">
</span><span class="nl">"hidpi"</span><span class="p">:</span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"source"</span><span class="p">:</span><span class="s2">"an image url"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"id"</span><span class="p">:</span><span class="mi">2</span><span class="p">,</span><span class="w">
</span><span class="nl">"metadaten"</span><span class="p">:{</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="s2">"another title"</span><span class="p">,</span><span class="w">
</span><span class="nl">"descrition"</span><span class="p">:</span><span class="s2">"another short descrition"</span><span class="p">,</span><span class="w">
</span><span class="nl">"keywords"</span><span class="p">:</span><span class="s2">"more keywords"</span><span class="p">,</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="s2">"page-number-two"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="nl">"sections"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="s2">"header"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"imageWithText"</span><span class="p">,</span><span class="w">
</span><span class="nl">"headline"</span><span class="p">:</span><span class="s2">"a headline"</span><span class="p">,</span><span class="w">
</span><span class="nl">"image"</span><span class="p">:</span><span class="s2">"an image url"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"a text"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"navigation"</span><span class="p">,</span><span class="w">
</span><span class="nl">"links"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"link"</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"Seite 1"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"link"</span><span class="p">:</span><span class="mi">2</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"Seite 2"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"link"</span><span class="p">:</span><span class="mi">3</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"Seite 3"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="s2">"main"</span><span class="p">,</span><span class="w">
</span><span class="nl">"content"</span><span class="p">:[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"text"</span><span class="p">,</span><span class="w">
</span><span class="nl">"headline"</span><span class="p">:</span><span class="s2">"a headline"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"a text"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"imageWithText"</span><span class="p">,</span><span class="w">
</span><span class="nl">"headline"</span><span class="p">:</span><span class="s2">"a headline"</span><span class="p">,</span><span class="w">
</span><span class="nl">"image"</span><span class="p">:</span><span class="s2">"an image url"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"a text"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"type"</span><span class="p">:</span><span class="s2">"teaserbox"</span><span class="p">,</span><span class="w">
</span><span class="nl">"headline"</span><span class="p">:</span><span class="s2">"a headline"</span><span class="p">,</span><span class="w">
</span><span class="nl">"image"</span><span class="p">:</span><span class="s2">"my image"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="s2">"a text"</span><span class="p">,</span><span class="w">
</span><span class="nl">"button"</span><span class="p">:</span><span class="s2">"a button"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3503632017-11-06T21:18:11ZCarsten Tornowcarsten.tornow@hummelundmors.com
<ul></ul><p>With react for example, you can transfer the data directly to redux store. Or you can call the content of further pages asynchronously...<br />Thats it - simple as that... We can build in the magic of a single page application..!</p>
<p>I think, you've got the picture... :-)</p>
<p>PS: that's also useful to feeding a mobile app.</p> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3559142018-01-27T14:06:45ZCarsten Tornowcarsten.tornow@hummelundmors.com
<ul></ul><p>hello together,</p>
<p>does this explanation satisfy you? If you need more information, feel free to ask...</p>
<p>Carsten</p> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3626332018-04-03T14:43:18ZSybille Peterssypets@gmx.de
<ul></ul><p>Dear Carsten,</p>
<p>I'm not in the TYPO3 core team so I <strong>can't give you an official answer here</strong>. I don't like issues with long response times though, so I will <em>try</em> to provide some suggestions and hope they are helpful for you.</p>
<p>I like your idea but wouldn't this require for every content element / plugin etc. to implement a function for the JSON output?</p>
<p>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?</p>
<p>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?</p>
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:
<ul>
<li><a href="https://usetypo3.com/json-view.html" class="external">Daniel Goerz: Create APIS with the JSON view</a></li>
<li><a href="https://worksonmymachine.org/blog/onepage-design-with-fluidtypo3" class="external">Onepage/Singelpage design with FluidTYPO3</a></li>
</ul>
<p>Sybille</p> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3626342018-04-03T14:43:59ZSybille Peterssypets@gmx.de
<ul><li><strong>Subject</strong> changed from <i>Json API</i> to <i>Json API for implementing single-page applications </i></li></ul> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3626382018-04-03T15:22:40ZMathias Brodalambrodala@pagemachine.de
<ul><li><strong>Status</strong> changed from <i>Needs Feedback</i> to <i>New</i></li></ul> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3626392018-04-03T15:26:22ZSusanne Moogsusanne.moog@typo3.org
<ul><li><strong>Tracker</strong> changed from <i>Feature</i> to <i>Epic</i></li><li><strong>Status</strong> changed from <i>New</i> to <i>Accepted</i></li></ul><p>Hey Carsten,</p>
<p>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 <a class="external" href="https://typo3.org/typo3-cms/roadmap/">https://typo3.org/typo3-cms/roadmap/</a>). If you need a solution for any of the current TYPO3 versions take a look at Sybilles links or at <a class="external" href="https://extensions.typo3.org/extension/restler/">https://extensions.typo3.org/extension/restler/</a></p>
<p>HTH,</p>
<p>Susanne</p> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3631752018-04-08T10:30:37ZCarsten Tornowcarsten.tornow@hummelundmors.com
<ul></ul><p>Hi Susanne,</p>
<p>good to know, having a REST API on your agenda now!</p>
<p>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.</p>
<p>In this case, TYPO3 is out of the game...</p>
<p>Carsten</p> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3646152018-04-30T12:37:50ZSusanne Moogsusanne.moog@typo3.org
<ul><li><strong>Related to</strong> <i><a class="issue tracker-2 status-6 priority-4 priority-default closed" href="/issues/72018">Feature #72018</a>: Integrate JSON cObject</i> added</li></ul> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3646182018-04-30T12:41:35ZSusanne Moogsusanne.moog@typo3.org
<ul><li><strong>Related to</strong> <i><a class="issue tracker-10 status-5 priority-4 priority-default closed parent behind-schedule" href="/issues/84101">Epic #84101</a>: The core must provide configurable structures for both pages and elements out of the box</i> added</li></ul> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3727002018-09-06T14:22:20ZSusanne Moogsusanne.moog@typo3.org
<ul><li><strong>Target version</strong> changed from <i>9 LTS</i> to <i>Candidate for Major Version</i></li></ul> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=3984592019-04-18T08:38:56ZSusanne Moogsusanne.moog@typo3.org
<ul></ul><p>See also <a class="external" href="https://decisions.typo3.org/t/native-typo3-headless-initiative/500">https://decisions.typo3.org/t/native-typo3-headless-initiative/500</a> for a discussion / idea on that topic. If you are interested, please add your points there.</p> TYPO3 Core - Epic #82839: Json API for implementing single-page applications http://forge.typo3.org/issues/82839?journal_id=4173532020-03-02T18:19:43ZGeorg Ringer
<ul><li><strong>Status</strong> changed from <i>Accepted</i> to <i>Closed</i></li></ul><p>closed as there is <a class="external" href="https://typo3.org/community/teams/typo3-development/initiatives/pwa">https://typo3.org/community/teams/typo3-development/initiatives/pwa</a> which takes care about that, checkout the examples, working really nice</p>