Verticals-PAL

https://github.com/nbcnews/verticals-pal

• Layer between Content API & Ramen
• Acts like Today-PAL and News-PAL
• Uses GraphQL (Facebook)
• JavaScript => ES6
• Maintained by Joby Joseph

Technical Details

              schema 👉 Holds the top level queryable schema objects (Video)

              store 👉 Provides api connection functions (findById)

              types 👉 Provides the graphql schema for each type

              transforms 👉 Responsible for asking the store for data and transforming the data
            

Example Request Using GraphiQL

GraphQL GUI

              //Request
              query getVideo($slug: ID!) {
                videos(id: $slug) {
                  id
                  mpxId
                  firstAired
                  guid
                  videoAssets {
                    assetType
                  }
                }
              }
              {
                "slug": "mmvo930030659753"
              }
            

Example Response Using GraphiQL

GraphQL GUI

              //Response
              {
                "data": {
                  "videos": [
                    {
                      "id": "mmvo930030659753",
                      "mpxId": "930030659753",
                      "firstAired": "2017-04-26T15:30:38.000+0000",
                      "guid": "a_mach_pioneering_artificalwomb_170426",
                      "videoAssets": [
                        {
                          "assetType": "OnceURL"
                        },
                        {
                          "assetType": "Limelight MP4"
                        },
                        {
                          "assetType": "Limelight MP4"
                        }
                      ]
                    }
                  ]
                },
                "extensions": {
                  "runTime": 265
                }
              }
            

Ramen

https://github.com/nbcnews/ramen

• Rendering application for 3 new Verticals
• Component based front-end framework (like React.js(Facebook))
• JavaScript -> ES6
• Written by Stephen Baldwin for NBC

Technical Details

Compenent Based

              // ExamplePage.js
              import ExampleComponent from './ExampleComponent';

              const exampleComponent = new ExampleComponent({ title: 'example title', items: ['item 1', 'item 2'] });

              // ExampleComponent.js
              import Framework from 'framework';
              import ExampleSubComponent from './ExampleSubComponent';

              class ExampleComponent extends Framework.Component {
                // The return object of the components method will be namespaced as "Component" in the template
                components() {
                  const { items } = this.data;

                  return {
                    ExampleSubComponent: new ExampleSubComponent({ items }),
                  };
                }
              }

              // ExampleComponent.hbs
              

                
{{title}}
                {{{Component.ExampleSubComponent}}}
              

              // ExampleComponent.scss
              h1 {
                background-color: red;
              }
            

Example Page Data

API GUI

              {
                "data": {
                  "curation": {},
                  "subVertical": [],
                  "playlists": [],
                  "videos": [
                    {
                      "id": "mmvo915383363791",
                      "mpxId": "915383363791",
                      "guid": "a_mach_pioneering_fishDNA_170406",
                      "headline": {},
                      "description": {},
                      "dateCreated": "2017-04-06T14:43:01.000+0000",
                      "datePublished": "2017-04-06T14:43:01.000+0000",
                      "dateModified": "2017-04-06T14:51:24.000+0000",
                      "firstAired": "2017-04-06T14:51:24.000+0000",
                      "lastAired": "2017-04-06T14:51:24.000+0000",
                      "broadcastDate": "2017-04-06T14:43:01.000+0000",
                      "availableDate": "2017-04-06T14:51:24.000+0000",
                      "availabilityState": "available",
                      "source": {},
                      "urls": {},
                      "mainImage": {},
                      "coverImage": null,
                      "duration": "PT1M12S",
                      "playbackIsDisabled": false,
                      "associatedPlaylist": {},
                      "defaultAssociation": "NBC News/Topic/Innovation",
                      "videoType": "Original",
                      "nativeAd": false,
                      "requiresCaptioning": false,
                      "hasCaptions": false,
                      "captionLinks": [],
                      "hasTranscript": false,
                      "transcript": [],
                      "videoAssets": [],
                      "customFields": {},
                      "primarySection": {},
                      "primaryTopic": null,
                      "topics": null,
                      "sections": [],
                      "verticals": null
                    }
                  ]
                },
                "extensions": {
                  "runTime": 2001
                }
              }
            

Video Code

VideoComponent

• src/views/components/VideoPlayer.js
• src/templates/components/VideoPlayer.hbs
• src/templates/components/VideoPlayer.scss

Video Code

InlineVideo

• src/views/components/InlineVideo.js
• src/templates/components/InlineVideo.hbs
• src/templates/components/InlineVideo.scss

Video Code

VideoContainer

• src/views/components/VideoContainer.js
• src/templates/components/VideoContainer.hbs
• src/templates/components/VideoContainer.scss

Video Code

Non-component

• src/assets/javascripts/video.js
• src/assets/javascripts/components/ndpInit.js

Helpful Links

Github

Verticals-PAL

Ramen

Atlassian

JIRA Board

WIKI

Slack

#MBTWEB-DEV

#MBT-ALL