{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "The API Briefing: Introduction to Web Components |Digital.gov",
    "description": "The API Briefing: Introduction to Web Components",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/03/18/the-api-briefing-introduction-to-web-components/index.json","item" : [
    {"title" :"The API Briefing: Introduction to Web Components","summary" : "Instead of writing about a specific federal API this week, I want to talk about a new, evolving way of building Web interfaces and complete applications. Web Components allow developers to create their element that extends the HTML5 set of tags. Developers can create a Web Component","date" : "2015-03-18T10:00:17-04:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"bbrantley" : "Bill Brantley"},"topics" : {
        
            "application-programming-interface" : "Application programming interface"
            },"branch" : "bc-archive-content-3",
      "filename" :"2015-03-18-the-api-briefing-introduction-to-web-components.md",
      
      "filepath" :"news/2015/03/2015-03-18-the-api-briefing-introduction-to-web-components.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2015/03/2015-03-18-the-api-briefing-introduction-to-web-components.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2015/03/2015-03-18-the-api-briefing-introduction-to-web-components.md","slug" : "the-api-briefing-introduction-to-web-components","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/03/18/the-api-briefing-introduction-to-web-components/","content" :"\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/03/512-x-400-Web-Components-light-logo.jpg\"\n    alt=\"Web Components light logo\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eInstead of writing about a specific federal API this week, I want to talk about a new, evolving way of building Web interfaces and complete applications. Web Components allow developers to create their element that extends the \u003ca href=\"http://en.wikipedia.org/wiki/HTML5\" target=\"_blank\"\u003eHTML5\u003c/a\u003e set of tags. Developers can create a Web Component that is a button that performs a specific function, such as composing and sending an email. Alternatively, a Web Component can be a complete application that a developer can easily drop into a Web page or mobile app.\u003c/p\u003e\n\u003cp\u003eDevelopers can do that now just by using JavaScript libraries such as \u003ca href=\"http://jquery.com/\" target=\"_blank\"\u003ejQuery\u003c/a\u003e or \u003ca href=\"http://getbootstrap.com/\" target=\"_blank\"\u003eBootstrap\u003c/a\u003e and swapping code through GitHub. What makes Web Components different is that the components can be encapsulated. That means that all a developer has to do is import the Web Component into the \u003ca href=\"http://en.wikipedia.org/wiki/HTML\" target=\"_blank\"\u003eHTML\u003c/a\u003e page or mobile app without having to load the necessary JavaScript libraries or any other files. It is essentially plug-and-play pieces for the Web page/mobile app.\u003c/p\u003e\n\u003cp\u003eWeb Components are self-contained because of four technologies. First, there are \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements\" target=\"_blank\"\u003eCustom Elements\u003c/a\u003e which allow the developer to create a customized \u003ca href=\"http://en.wikipedia.org/wiki/HTML_element\" target=\"_blank\"\u003eHTML element\u003c/a\u003e. The custom element can have its properties and methods. The second technology is the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template\" target=\"_blank\"\u003eHTML Template Element\u003c/a\u003e. The HTML Template can hold HTML content that isn’t displayed until triggered by a JavaScript event.\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM\" target=\"_blank\"\u003eShadow DOM\u003c/a\u003e is the third technology. DOM stands for the “document object model” and is a map of the HTML document. A DOM is used by JavaScript and \u003ca href=\"http://en.wikipedia.org/wiki/Cascading_Style_Sheets\" target=\"_blank\"\u003eCascading Style Sheets (CSS)\u003c/a\u003e to make changes to an HTML page according to user interaction or a JavaScript program. The Shadow DOM is used by the Web Component to hold JavaScript and CSS separate from the main DOM.\u003c/p\u003e\n\u003cp\u003eThe fourth technology is the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports\" target=\"_blank\"\u003eHTML Import\u003c/a\u003e which packages the Web Component and allows the developer to include Web Components into the Web page or mobile app. As you can guess, APIs are working behind the scenes to make each of these technologies work.\u003c/p\u003e\n\u003cp\u003eIf you would like to learn more about Web Components, you can start with these resources.:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"http://tech.pro/blog/1940/getting-started-with-web-components\" target=\"_blank\"\u003eA technical introduction to Web Components\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.youtube.com/watch?v=fqULJBBEVQE\u0026feature=youtu.be\" target=\"_blank\"\u003eA video presentation of the potential of Web Components (33 minutes)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://webcomponents.org/\" target=\"_blank\"\u003eWebcomponents.org\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.polymer-project.org/0.5/\" target=\"_blank\"\u003eGoogle’s Polymer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/\" target=\"_blank\"\u003eHow the Angular JavaScript library differs from Google’s Polymer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://component.kitchen/tutorial\" target=\"_blank\"\u003eComponent Kitchen’s interactive Web Components tutorial\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524\" target=\"_blank\"\u003eHow to create your HTML elements using Web Components\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWeb Components present another way that federal agencies can package and distribute their APIs. Maybe a possible new project is to create a federal Web Components library for website developers and mobile app developers?\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003cstrong\u003eDisclaimer\u003c/strong\u003e: All references to specific brands, products, and/or companies are used only for illustrative purposes and do not imply endorsement by the U.S. federal government or any federal government agency.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003e*API – Application Programming Interface; how software programs and databases share data and functions with each other. Check out \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2013/04/30/apis-in-government/\"\u003eAPIs in Government\u003c/a\u003e for more information.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eEach week, “\u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/topics/application-programming-interface/\"\u003eThe API Briefing\u003c/a\u003e” will showcase government APIs and the latest API news and trends. Visit this column every week to learn how government APIs are transforming government and improving government services for the American people. If you have ideas for a topic or have questions about APIs, please contact me via \u003ca href=\"mailto:%20bill@billbrantley.com\" target=\"_blank\"\u003eemail\u003c/a\u003e. All opinions are my own and do not reflect the opinions of the USDA and GSA.\u003c/em\u003e\u003c/p\u003e\n"}
  ]
}