Pearson
Always Learning

Posted by tristansokol | about 3 years ago

Hello again!   This post is set to continue the discussion on web components (started on the first web component post)   Web components are the website building blocks that APIs were promised to be. The Pearson developer relations team thought that it would be best to learn by doing, and try out some of our APIs in the context of web components.

In this use case we used Google's Polymer platform to cut our teeth with web components. Polymer allows you to create and style custom elements and add them to your projects with just HTML, just like the standard <a> or <img> tags. These elements/components are self contained bundles of javascript, html, and css that is totally compartmentalized, making them easy to move between projects.   Over the weekend we made a test set of components that use the Longman Dictionary API. The first component is one that  you'd use when you want to add a definition to your webpage or app, and it looks like this:

<longman-basic-definition apikey="aa49385bhs8532sd" word="bear">
</longman-basic-definition>

And what you get is this:

noun:a large strong animal with thick fur that eats flesh, fruit, and insects

And that is the magic! As a web developer you only need to put in some special html elements and you can access all of the definitions that the API has to offer, only by editing  the "word" attribute of the element. Of course it is a little more complicated than that, you have to import the code that defines the component, but since we have already written that code for you that for you all you would need to add to your code is a little thing like this:

&lt;link rel="import" href="longman-components.html"&gt;

And that is it! This lets you focus on creating your application or website and leaves the heavy lifting of interacting with the API to somebody else. Best of all, these components don't just have to be simple text. Entire applications or design features could be encapsulated in a component, separate from any of the code you would have to write.   We have created two different sets of components ranging from basic definitions to synonyms and more, all pulling from the Longman API, and they are  both accessible via GitHub (https://github.com/ueliem/pearson-dictionary-polymer https://github.com/tristansokol/dictionary-component) We are excited to see what you can build!

Rating: 

No votes yet

2338 reads
Always Learning
Pearson