What is omdb-search

omdb-search is a custom element, built by Giovanni Orlando using the Polymer JavaScript library, that allows you to easily query for relevant movie, series, and episode data. This element is powered by the Open Movie Database API, and is published under the MIT License.

What is Polymer

Polymer is a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps. It’s intention is to encourage developers to Use The Platform, instead of relying entirely on third party libraries and tooling.

Tasks it accomplishes

When added to your project, it makes a request to the OMDb API and generates a collection of the Movie, Series, or Episode information found based on the parameters specified by the user.

The element takes as input two main parameters:

  1. Title: Specifies the movie, series, or episode title to query for.

  2. Result Type: Can be either movie, series, or episode.

It also supports three optional parameters:

  • Year: Number representing the year in which the movie, series, or episode was released.

  • Page: Specifies the results-list page number, since OMDb pages search results (10 results per page).

  • API Version: Specifies the OMDb API version number, for future reference when said API updated. Is optional.

omdb-search is completely declarative, meaning that you can easily use this in your element, and have a full understanding of how it behaves.

Getting Started

Make a project directory for your demo and change directories into it:

mkdir omdb-search-demo && cd omdb-search-demo

Create an index.html

touch index.html

Install or Download

Install the component using bower.

bower install omdb-search --save

Or download the .zip file

Usage

In that index.html add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OMDb Search demo</title>
    <!-- Load the WebComponents polyfill: -->
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script>

    <!-- Import the omdb-search web component: -->
    <link rel="import" href="bower_components/omdb-search/omdb-search.html">

    <!-- Optionally, import the included omdb-search-theme stylesheet: -->
    <link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
    <!-- Use the element in your app:  -->
    <h1>Tarzan movies:</h1>
    <omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>

Demo It

https://giovanni-orlando.com/omdb-search/

Beneath the metal

This element depends on iron-ajax Polymer element, which exposes network request functionality to the user, and makes dealing with REST APIs a smooth experience. iron-ajax is licensed under BSD-3-Clause.

Available on webcomponents.org

Future goals

My intentions are to do a full re-write of the element once Polymer (2.x) is officially released. Polymer (2.x) brings features such as:

  • ES 2016 class syntax for defining components

  • Support for native v1 Shadow DOM and v1 Custom Elements APIs

  • Backwards compatibility with apps that rely on Polymer (1.x), meaning that developers can still use these new elements with little to no changes

I am currently developing a node web application that is built on top of this element, and plan on releasing soon to showcase what you can achieve by using it. Once it is released, I will link to it on this blog post so you can check it out.

Repo

If you are interested in learning more about this element, make sure you checkout the GitHub repository.

Outro

If you enjoyed this blog post or found it helpful in any way, make sure to follow me on Twitter to find out when a new one is available.

Twitter: @giovanni0918

Github: giovanni0918

Website: giovanni-orlando.com