This document provides an overview and introduction to web components. It discusses the key aspects of web components including custom elements, HTML imports, shadow DOM, and templates. It also shows how web components allow building reusable custom elements that encapsulate their styles and functionality independently of the page they are used in. The document demonstrates how to define and register a custom element for displaying activity cards and use templates and shadow DOM to encapsulate its implementation.
This document provides an overview comparison of JavaFX and HTML5 for building mobile applications. It includes a demo of a sailboat racing application built with both JavaFX and HTML5. The technical comparison section analyzes the architectures, controls, data binding, tables, multimedia support and other features of JavaFX and HTML5. It finds that while HTML5 has broader deployment options, JavaFX provides more robust and integrated core features out of the box. The document also discusses the perspectives and limitations of both JavaFX and HTML5.
The document provides an overview of the DataFX framework, which facilitates data retrieval and rendering in JavaFX applications. It discusses how DataFX allows developers to focus on application logic by abstracting away things like data sources, conversion, and threading. Key aspects covered include DataSources and Readers for retrieving data from various sources; Converters for transforming data formats; DataProviders for populating Observable data in JavaFX; controller APIs for building views; and Flow APIs for linking views and handling user actions. The goal of DataFX is to simplify common tasks in building enterprise JavaFX applications that interact with real-world services and data.
1. The document discusses 10 things the author likes about JavaFX, which is a Java UI toolkit.
2. It provides examples of JavaFX capabilities like data binding, FXML, CSS, effects, animations, multi-touch support, charts, and integration with web views.
3. The author encourages using JavaFX instead of older toolkits like Swing, argues it is efficient and modern, and offers to provide more information to those interested in migrating from Swing to JavaFX.
JavaFX is used by many companies and organizations for a variety of applications. Some key uses of JavaFX include:
- Embedded applications, including on devices like phones and set-top boxes.
- Mobile applications, as JavaFX supports deploying to iOS and Android.
- Web applications, with JavaFX code running in browsers using a plugin or port to HTML5.
- Traditional desktop applications, where JavaFX can provide a modern user interface for programs.
- Specific examples given include office management software by an AIDS foundation in Germany.
Java Web Application Security with Java EE, Spring Security and Apache Shiro ...Matt Raible
This presentation shows you how to implement authentication in your Java web applications using Java EE 7 Security, Spring Security and Apache Shiro. It also touches on best practices for securing a REST API and using SSL.
This document introduces the Vaadin framework, which is a user interface framework for building rich web applications. It discusses how Vaadin enables developer productivity through features like user interface components, automated communication between the client and server, and support for multiple devices. The document also covers trends in web frameworks like AngularJS and web components, and how Vaadin is exploring these trends through new components in Vaadin Labs and building web components with GWT.
This document provides an overview of DataFX, a JavaFX framework that facilitates interaction between JavaFX applications and enterprise data. It discusses how DataFX handles reading external data sources via protocols like REST, SSE, and WebSockets. It also covers how DataFX integrates with JavaFX concepts like Observables and leverages the concurrency API to avoid blocking the JavaFX application thread. Additionally, it introduces the Flow API for defining navigation between views and linking controller actions. Finally, it mentions related projects in DataFX Labs for validation, EJB support, and feature toggling.
This document provides an overview comparison of JavaFX and HTML5 for building mobile applications. It includes a demo of a sailboat racing application built with both JavaFX and HTML5. The technical comparison section analyzes the architectures, controls, data binding, tables, multimedia support and other features of JavaFX and HTML5. It finds that while HTML5 has broader deployment options, JavaFX provides more robust and integrated core features out of the box. The document also discusses the perspectives and limitations of both JavaFX and HTML5.
The document provides an overview of the DataFX framework, which facilitates data retrieval and rendering in JavaFX applications. It discusses how DataFX allows developers to focus on application logic by abstracting away things like data sources, conversion, and threading. Key aspects covered include DataSources and Readers for retrieving data from various sources; Converters for transforming data formats; DataProviders for populating Observable data in JavaFX; controller APIs for building views; and Flow APIs for linking views and handling user actions. The goal of DataFX is to simplify common tasks in building enterprise JavaFX applications that interact with real-world services and data.
1. The document discusses 10 things the author likes about JavaFX, which is a Java UI toolkit.
2. It provides examples of JavaFX capabilities like data binding, FXML, CSS, effects, animations, multi-touch support, charts, and integration with web views.
3. The author encourages using JavaFX instead of older toolkits like Swing, argues it is efficient and modern, and offers to provide more information to those interested in migrating from Swing to JavaFX.
JavaFX is used by many companies and organizations for a variety of applications. Some key uses of JavaFX include:
- Embedded applications, including on devices like phones and set-top boxes.
- Mobile applications, as JavaFX supports deploying to iOS and Android.
- Web applications, with JavaFX code running in browsers using a plugin or port to HTML5.
- Traditional desktop applications, where JavaFX can provide a modern user interface for programs.
- Specific examples given include office management software by an AIDS foundation in Germany.
Java Web Application Security with Java EE, Spring Security and Apache Shiro ...Matt Raible
This presentation shows you how to implement authentication in your Java web applications using Java EE 7 Security, Spring Security and Apache Shiro. It also touches on best practices for securing a REST API and using SSL.
This document introduces the Vaadin framework, which is a user interface framework for building rich web applications. It discusses how Vaadin enables developer productivity through features like user interface components, automated communication between the client and server, and support for multiple devices. The document also covers trends in web frameworks like AngularJS and web components, and how Vaadin is exploring these trends through new components in Vaadin Labs and building web components with GWT.
This document provides an overview of DataFX, a JavaFX framework that facilitates interaction between JavaFX applications and enterprise data. It discusses how DataFX handles reading external data sources via protocols like REST, SSE, and WebSockets. It also covers how DataFX integrates with JavaFX concepts like Observables and leverages the concurrency API to avoid blocking the JavaFX application thread. Additionally, it introduces the Flow API for defining navigation between views and linking controller actions. Finally, it mentions related projects in DataFX Labs for validation, EJB support, and feature toggling.
Vaadin7 is an introduction to the Vaadin framework, which is a user interface framework for building rich web applications in Java. It allows developers to create user interface components and connect them to backend data sources while developing everything in Java. The framework handles rendering the interface and communication with the browser, allowing developers to focus on application logic rather than browser compatibility issues or JavaScript coding.
This document discusses WebSockets and their use in Angular applications. It contains the following information:
1. An introduction to WebSockets, including what they are, where server push is needed, and how to use them in plain JavaScript.
2. Two ways to use WebSockets in Angular - manually creating WebSocket objects or using RxJS WebSocketSubject.
3. A code example of a WebSocket service in Angular that wraps a WebSocket object and exposes it as an Observable stream.
Single Page App (SPA) frameworks offer many benefits over traditional web apps which do all of their HTML generation on the server side. Popular SPA frameworks include Vue, React and Angular. Micronaut is very well suited for publishing REST APIs and is a terrific fit for implementing backend logic for SPAs.
It’s trivial today to start writing and debugging some React code, but it’s not 100% clear how to properly deploy the application, manage versions and what implications that has on the build configurations. Especially if you want to allow different versions for different users in order to perform some A/B testing, testing new features in production environment, come up with some UI experiments, or gradually roll out new features for a subset of users.
In this presentation I hopefully covered all that.
Web application development using Play Framework (with Java)Saeed Zarinfam
This document provides an overview of the Play Framework for web application development using Java. It discusses the history and architecture of Play, how to set up a Play project, the MVC structure, routing, controllers, views, sessions, assets, hot code reloading, databases, testing, deployment, and scaling. Play uses Netty as its web server, is stateless, supports hot code reloading, and allows building asynchronous and reactive applications. It also has integrations for Akka, WebSockets, caching, internationalization, and more.
This document discusses Clojure web development and describes a web-based project management system called Trakr that was created using Clojure. Trakr uses a MongoDB database and has a modern friendly UI. The architecture involves a Clojure HTTP server with a Ring middleware pipeline and Compojure routing to map requests to handlers. Testing is done with clojure.test and clojure.contrib.mock. Performance is around 70ms average latency.
This talk covers the history of Spring, as well as what's new in Spring 3.1.
Specific areas discussed:
- Environments and Profiles
- Servlet 3.0 Support
- Hibernate 4 Support
- Cache Abstraction
- Java Configuration
- Test Context Support for Configuration Classes and Profiles
Read more about this presentation at:
http://raibledesigns.com/rd/entry/my_what_s_new_in
The web - What it has, what it lacks and where it must go - IstanbulRobert Nyman
The document discusses the current state and future of the web. It describes how the web currently lacks capabilities that native mobile apps have like push notifications, background processing, and offline access. However, new web features being developed like Service Workers, Push Notifications, and Background Sync aim to address these gaps. The document argues that with these new features, the divide between native and web is diminishing and the web can provide an app-like experience without requiring users to download an app. The future of the web depends on further developing these capabilities and ensuring the web remains accessible, simple to use, and continues to work across all platforms.
Esri Dev Summit 2009 Rest and Mvc Finalguestcd4688
This document discusses building RESTful applications and services with ASP.NET MVC. It promotes using standards like JSON and HTTP verbs to build clean, intuitive REST APIs. It also advocates for unit testing at multiple levels (views, controllers, repositories, data access layers) to catch errors early and ensure quality. Architecting applications with separate models, views, controllers, repositories and data access layers is recommended to keep code organized and flexible.
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...IT Event
Over the years developers were used to thing that web is not user-friendly, performance efficient and powerful as native apps. But things have been changed so far; now you can build offline applications with notifications, Bluetooth and camera access and so on. Web development is great again.
- Quick startup - I will show how to prioritize content loading in the application to show users meaningful pixels as soon as possible
- Progressive enhancement - I will encourage you to use maximum of the platform but still support earlier browsers
- Offline application - here I will explain how you can easily make your web application working offline
- Push Notifications - one of the best way to increase conversion of your application and now it's possible on the web. I am going to show how to do it right with few steps.
- Experimental APIs - I will show how to sign in once on all your devices with Credential API, use native share menu and make payments in few clicks
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
This document outlines a presentation about building universal JavaScript web applications with React. It discusses:
1. The term "universal" in relation to JavaScript and some advantages it provides like maintainability and faster load times.
2. Building a frontend single page application with React and then making it universal by rendering on the server as well with React and Express.
3. Key aspects of universal apps like module sharing, routing, data retrieval and state management that work across client and server.
4. An example of building a universal JavaScript app with React called "Judo Heroes" that shows athlete data and profiles, using components, routing, data and building tools like Babel and Webpack.
This document provides an overview of Cucumber, a behavior-driven development (BDD) tool for testing software. Cucumber uses plain language scenarios written in Gherkin to describe desired software behaviors. Step definitions then map these scenarios to code implementations. Key features of Cucumber include living documentation through automated testing of specifications, a focus on collaboration between business and technical teams, and protection against regressions through automated testing. The document also discusses Cucumber technical details like supported testing types, configuration options, scenario states, and popular test runners.
The document discusses Java EE 6 and its evolution over time. It outlines key features of Java EE 6 including lightweight profiles, annotations, managed beans, interceptors, and Servlets 3.0. It provides examples of using managed beans, interceptors, and the new annotations-based approach in Servlets 3.0. The document aims to educate developers on the nuts and bolts of Java EE 6.
Related demo code available: https://github.com/samie/spring-vaadin-demo
Short 15min presentation how to use Vaadin and Spring together. See vaadin.com/spring on how to get started with your own app.
This document discusses various technologies for developing Smalltalk web applications, including VisualWorks plugins, Classic Blend, and VAST-ULC. It provides details on how each works, such as using plugins to embed Smalltalk applets in HTML and communicating between the browser and Smalltalk application. It also compares Classic Blend versions for differences like supported platforms and bean-based GUI building.
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
This document discusses using web standards to create interactive data visualizations for the web. It provides an overview of the JavaScript InfoVis Toolkit, which allows creating multiple graph and tree layouts using web standards and JavaScript. It also discusses upcoming improvements to browser engines and JavaScript that will further improve performance of interactive visualizations. Finally, it introduces WebGL and V8-GL as emerging web standards that bring hardware-accelerated 3D graphics to the web through JavaScript.
Moving to the Client - JavaFX and HTML5Stephen Chin
Stephen Chin presented on moving applications to the client using JavaFX and HTML5. He provided a history of HTML and discussed key HTML5 features like Canvas, offline storage, and WebSockets. He demonstrated displaying HTML in JavaFX using the WebView control and calling JavaScript from JavaFX. Chin also showed responsive design techniques and discussed using JavaScript frameworks like jQuery for cross-browser compatibility. Finally, he highlighted Oracle Cloud Platform services for running databases and Java applications in the cloud.
This document outlines the author's praxis for using drama in the classroom. The author will embed drama into all learning areas to allow students to act, reflect, and transform their thinking. Some key aspects of the praxis include using process drama to look at problems in context and deliver solutions, employing pre-texts to raise interesting questions, and considering elements of drama like focus, tension, and role. The author also discusses using ICT tools like eportfolios to differentiate instruction and support students who may be learning from a distance.
Vaadin7 is an introduction to the Vaadin framework, which is a user interface framework for building rich web applications in Java. It allows developers to create user interface components and connect them to backend data sources while developing everything in Java. The framework handles rendering the interface and communication with the browser, allowing developers to focus on application logic rather than browser compatibility issues or JavaScript coding.
This document discusses WebSockets and their use in Angular applications. It contains the following information:
1. An introduction to WebSockets, including what they are, where server push is needed, and how to use them in plain JavaScript.
2. Two ways to use WebSockets in Angular - manually creating WebSocket objects or using RxJS WebSocketSubject.
3. A code example of a WebSocket service in Angular that wraps a WebSocket object and exposes it as an Observable stream.
Single Page App (SPA) frameworks offer many benefits over traditional web apps which do all of their HTML generation on the server side. Popular SPA frameworks include Vue, React and Angular. Micronaut is very well suited for publishing REST APIs and is a terrific fit for implementing backend logic for SPAs.
It’s trivial today to start writing and debugging some React code, but it’s not 100% clear how to properly deploy the application, manage versions and what implications that has on the build configurations. Especially if you want to allow different versions for different users in order to perform some A/B testing, testing new features in production environment, come up with some UI experiments, or gradually roll out new features for a subset of users.
In this presentation I hopefully covered all that.
Web application development using Play Framework (with Java)Saeed Zarinfam
This document provides an overview of the Play Framework for web application development using Java. It discusses the history and architecture of Play, how to set up a Play project, the MVC structure, routing, controllers, views, sessions, assets, hot code reloading, databases, testing, deployment, and scaling. Play uses Netty as its web server, is stateless, supports hot code reloading, and allows building asynchronous and reactive applications. It also has integrations for Akka, WebSockets, caching, internationalization, and more.
This document discusses Clojure web development and describes a web-based project management system called Trakr that was created using Clojure. Trakr uses a MongoDB database and has a modern friendly UI. The architecture involves a Clojure HTTP server with a Ring middleware pipeline and Compojure routing to map requests to handlers. Testing is done with clojure.test and clojure.contrib.mock. Performance is around 70ms average latency.
This talk covers the history of Spring, as well as what's new in Spring 3.1.
Specific areas discussed:
- Environments and Profiles
- Servlet 3.0 Support
- Hibernate 4 Support
- Cache Abstraction
- Java Configuration
- Test Context Support for Configuration Classes and Profiles
Read more about this presentation at:
http://raibledesigns.com/rd/entry/my_what_s_new_in
The web - What it has, what it lacks and where it must go - IstanbulRobert Nyman
The document discusses the current state and future of the web. It describes how the web currently lacks capabilities that native mobile apps have like push notifications, background processing, and offline access. However, new web features being developed like Service Workers, Push Notifications, and Background Sync aim to address these gaps. The document argues that with these new features, the divide between native and web is diminishing and the web can provide an app-like experience without requiring users to download an app. The future of the web depends on further developing these capabilities and ensuring the web remains accessible, simple to use, and continues to work across all platforms.
Esri Dev Summit 2009 Rest and Mvc Finalguestcd4688
This document discusses building RESTful applications and services with ASP.NET MVC. It promotes using standards like JSON and HTTP verbs to build clean, intuitive REST APIs. It also advocates for unit testing at multiple levels (views, controllers, repositories, data access layers) to catch errors early and ensure quality. Architecting applications with separate models, views, controllers, repositories and data access layers is recommended to keep code organized and flexible.
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...IT Event
Over the years developers were used to thing that web is not user-friendly, performance efficient and powerful as native apps. But things have been changed so far; now you can build offline applications with notifications, Bluetooth and camera access and so on. Web development is great again.
- Quick startup - I will show how to prioritize content loading in the application to show users meaningful pixels as soon as possible
- Progressive enhancement - I will encourage you to use maximum of the platform but still support earlier browsers
- Offline application - here I will explain how you can easily make your web application working offline
- Push Notifications - one of the best way to increase conversion of your application and now it's possible on the web. I am going to show how to do it right with few steps.
- Experimental APIs - I will show how to sign in once on all your devices with Credential API, use native share menu and make payments in few clicks
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
This document outlines a presentation about building universal JavaScript web applications with React. It discusses:
1. The term "universal" in relation to JavaScript and some advantages it provides like maintainability and faster load times.
2. Building a frontend single page application with React and then making it universal by rendering on the server as well with React and Express.
3. Key aspects of universal apps like module sharing, routing, data retrieval and state management that work across client and server.
4. An example of building a universal JavaScript app with React called "Judo Heroes" that shows athlete data and profiles, using components, routing, data and building tools like Babel and Webpack.
This document provides an overview of Cucumber, a behavior-driven development (BDD) tool for testing software. Cucumber uses plain language scenarios written in Gherkin to describe desired software behaviors. Step definitions then map these scenarios to code implementations. Key features of Cucumber include living documentation through automated testing of specifications, a focus on collaboration between business and technical teams, and protection against regressions through automated testing. The document also discusses Cucumber technical details like supported testing types, configuration options, scenario states, and popular test runners.
The document discusses Java EE 6 and its evolution over time. It outlines key features of Java EE 6 including lightweight profiles, annotations, managed beans, interceptors, and Servlets 3.0. It provides examples of using managed beans, interceptors, and the new annotations-based approach in Servlets 3.0. The document aims to educate developers on the nuts and bolts of Java EE 6.
Related demo code available: https://github.com/samie/spring-vaadin-demo
Short 15min presentation how to use Vaadin and Spring together. See vaadin.com/spring on how to get started with your own app.
This document discusses various technologies for developing Smalltalk web applications, including VisualWorks plugins, Classic Blend, and VAST-ULC. It provides details on how each works, such as using plugins to embed Smalltalk applets in HTML and communicating between the browser and Smalltalk application. It also compares Classic Blend versions for differences like supported platforms and bean-based GUI building.
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
This document discusses using web standards to create interactive data visualizations for the web. It provides an overview of the JavaScript InfoVis Toolkit, which allows creating multiple graph and tree layouts using web standards and JavaScript. It also discusses upcoming improvements to browser engines and JavaScript that will further improve performance of interactive visualizations. Finally, it introduces WebGL and V8-GL as emerging web standards that bring hardware-accelerated 3D graphics to the web through JavaScript.
Moving to the Client - JavaFX and HTML5Stephen Chin
Stephen Chin presented on moving applications to the client using JavaFX and HTML5. He provided a history of HTML and discussed key HTML5 features like Canvas, offline storage, and WebSockets. He demonstrated displaying HTML in JavaFX using the WebView control and calling JavaScript from JavaFX. Chin also showed responsive design techniques and discussed using JavaScript frameworks like jQuery for cross-browser compatibility. Finally, he highlighted Oracle Cloud Platform services for running databases and Java applications in the cloud.
This document outlines the author's praxis for using drama in the classroom. The author will embed drama into all learning areas to allow students to act, reflect, and transform their thinking. Some key aspects of the praxis include using process drama to look at problems in context and deliver solutions, employing pre-texts to raise interesting questions, and considering elements of drama like focus, tension, and role. The author also discusses using ICT tools like eportfolios to differentiate instruction and support students who may be learning from a distance.
Projective - Business Architecture and Operational Excellencefrederikpaulus
1. The document discusses business architecture and operational excellence at a banking and finance seminar presented by Projective.
2. Projective focuses on project and program management for financial institutions and helps define target operating models that link business processes and underlying applications.
3. The presentation discusses how achieving operational excellence starts with detailing the target operating model, which defines how a company organizes itself through its process, organization, and information models.
Tiga kalimat berikut merangkum dokumen tersebut:
Dokumen tersebut membahas konsep-konsep strategis seperti visi, misi, strategi, dan proses pengembangan strategi perusahaan. Visi dan misi digunakan untuk menentukan arah perusahaan, sementara strategi merupakan rencana untuk mencapai tujuan tersebut. Komunikasi yang efektif diperlukan untuk mengimplementasikan strategi sesuai dengan visi dan misi perusaha
The document discusses the importance of science education for students. It outlines how science helps with intellectual development, critical thinking, decision making, and ability to work in groups. It also discusses how science education contributes to important skills for students like problem solving and researching. The document then provides details on the science curriculum in Queensland, Australia, which focuses on five strands of science. It gives an example unit plan on global warming and pollution that will focus on two of the five strands. The unit plan provides some example classroom activities to teach the topics.
The document discusses the history and standards of the gold dinar and silver dirham currency. It argues that Muslims originally minted their own coins, with the dinar and dirham standards set by Umar ibn al-Khattab in the 7th century CE. Today, the World Islamic Mint aims to restore the dinar and dirham as a sharia-compliant currency backed by gold and silver. The document promotes the dinar and dirham as an alternative to fiat currencies and believes they will eventually be adopted on a global scale once fiat currencies fail.
Dokumen tersebut membincangkan peranan dan ciri-ciri guru besar berkesan dalam memimpin sebuah sekolah. Guru besar berkesan perlu mempunyai kemahiran kepimpinan dan pengajaran yang tinggi serta berwawasan dalam merealisasikan matlamat sekolah."
This document discusses using JavaFX for enterprise application development. It provides an overview of JavaFX basics and capabilities. It also discusses best practices for enterprise development using Java EE specifications like JAX-RS, JAX-WS, EJB and CDI. Additionally, it presents architectures for JavaFX enterprise applications including MVP and MVVM patterns. Finally, it introduces DataFX, an application framework that supports Java EE standards and middleware for building JavaFX enterprise applications.
This document summarizes a talk given by Rachel Andrew on new CSS layout methods Flexbox and Grid Layout. It discusses some of the challenges with traditional layout techniques and how Flexbox and Grid Layout allow for more semantic, flexible and responsive layouts by treating items as parts of a complete layout. Key features covered include separation of document structure from visual presentation, precise control of horizontal and vertical alignment, and responsive design being built into the new specifications.
Web Components & Polymer 1.0 (Webinale Berlin)Hendrik Ebbers
This document discusses web components and Polymer 1.0. It begins with an introduction to web components and the different specifications that make them possible, including custom elements, HTML imports, shadow DOM, and templates. It then demonstrates how web components can be used to build reusable custom elements and templates for activities. Styles are kept encapsulated using shadow DOM. The document concludes by noting browser support for web components.
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ DevoxxHendrik Ebbers
This session will give you a thorough introduction into Web Components. We start by explaining the standards that form the foundation of WebComponents: Template tag, custom elements, Shadow DOM, and HTML imports. Next we will do a live coding session showing you how you can rapidly build a web application with existing Web Components from Polymer Elements and other sources and connect the application to a server. In the last section, we are going to explain how you can build your own custom components and integrate them into your application. Also we will share our experience gained while building an application with Web Components and talk about pitfalls that should be avoided when using Web Components in a real world project.
The document discusses new elements and syntax in HTML5 for building web pages. It covers using the <!DOCTYPE html> declaration, specifying character encodings and languages, including <script> and <style> elements, and bringing back semantic HTML tags like <b>, <i>, and <abbr>. It also discusses new structural elements like <header>, <nav>, <section>, <article>, <aside>, and <footer>. Finally, it covers other new features in HTML5 like figures, details, drag and drop, and microformats.
This document provides an overview of HTML5 and what's new in the latest version. It discusses new semantic elements like <header>, <nav>, and <article> that improve document outlining. It also covers new multimedia features like native audio and video playback without Flash, as well as 2D/3D graphics using <canvas>. Other additions include new form controls, multiple file uploading, and geolocation. While HTML5 brings many new features, it is an ongoing evolution of HTML rather than a completely new language.
A High-Performance Solution To Microservices UI CompositionAlexey Gravanov
So you have decided to go for Microservices and you want to achieve maximum autonomy for your teams. However, at the front end your services still have to be joined into a single page.Here you have two options: Either have a single UI layer which all teams depend on or let each service render its own UI and compose these UI pieces later on.
In the course of moving the Autoscout24 platform - one of Europe’s leading internet car portals - to an AWS-hosted Microservice architecture, we favored autonomy and therefore decided for the UI Composition approach. During this process we faced all the challenges of UI Composition, such as performance, consistency, isolation, and testing. Learn how we started off with a rather complex attempt and then managed to greatly improve and simplify our solution.
This document discusses strategies for improving SEO, including using microformats and schema to increase click-through rate, reducing page load times to decrease bounce rates, and properly handling links and redirects to maintain link juice. It provides examples of implementing microformats, measuring page speed, and types of redirects. The document recommends names, titles, and URLs to help pages rank better in search engines.
The Offspring of SEO and Semantic Web: SEO++ Jay Myers
The document discusses how semantic technologies like RDFa, microdata, and open graph can be used to enrich web pages with structured data that is readable to both humans and machines. It provides examples of how product information, reviews, and other structured data can be annotated on web pages and extracted via APIs to power rich snippets and other semantic applications.
This document provides an agenda for an HTML5 workshop. The agenda includes discussions of differences between HTML5 and XHTML, building with HTML5 syntax like DOCTYPEs and character sets, and features like audio/video, geolocation, forms, and accessibility. It also outlines exercises for validating HTML5 markup and exploring new HTML5 elements.
The document is a HTML page from a website about tutorials. It contains metadata and code for setting up the page design, linking to stylesheets, and including scripts. The page is titled "Tutorial Membuat Extensions Google Chrome" which relates to making extensions for Google Chrome. It includes metadata like keywords, descriptions and images to support sharing on social networks.
This document provides an agenda and overview for an HTML5 and CSS3 workshop. The agenda includes explaining differences between HTML5 and XHTML, building with HTML5 elements like <header>, <nav>, <article>, <aside>, and <footer>, bringing back semantic HTML tags, figures and captions, editable elements, drag and drop, HTML5 metadata like microformats, and page structure. It discusses syntax changes in HTML5 and introducing new elements and attributes to improve semantics and accessibility.
In July 2011, Joe Walton (from Real PR) gave a presentation to demonstrate and enthuse people to take a chance on the free (and cheap) tool available online.
This presentations was given as part of the Chartered Institute of Public Relations (CIPR) Scotland Social in the City series of talks.
If you have any questions you contact <a>Joe Walton (@babbleoftongues)</a> on twitter.
This document is the HTML code for the upload page on the SlideShare website. It includes metadata, scripts, and styling to display the page content which encourages users to discover, share and present presentations, infographics and videos on the largest professional content sharing community. The page code provides options for users to upload, login or sign up for an account.
How to Tango with Salesforce & jQueryMobile for HTML5 GoodnessJoshua Hoskins
It’s so much easier when you have to actually build something FOR REAL and you have a guided visual introduction to the technology, the gotchas, different design patterns and how things are connected. In 30-45 minutes I’ll share with you my lessons learned over the last month while building a mobile application which includes -- the anatomy of a Visualforce Page, How to exchange data with SFDC, dynamically update content, debug your code and gracefully handle exceptions. Enabling you dive into Mobile Development with some level of comfort with you’re ready.
This document discusses various techniques for improving front-end web performance. It states that 80% of end-user response time is spent downloading page components like images, CSS, JavaScript, and that speed is important for user experience and functionality. Various methods are presented for minimizing file sizes like JavaScript minification and combining files. It also recommends techniques like using CSS sprites and lazy loading images. Browser tools for analyzing performance are listed, and references for further information are provided.
- Adobe acquired Typekit, a web font service, and Nitobi, makers of PhoneGap, a tool to build native mobile apps using web technologies.
- Adobe released a new preview of Edge, its digital publishing tool, and submitted CSS Shaders to the W3C to bring cinematic effects to the web through CSS.
- PhoneGap packages a web app into a native mobile app, allowing it to be distributed through app stores and take advantage of device capabilities like the camera through a native wrapper, while retaining the ease of development of the web.
- PhoneGap Build removes the pain of setting up build environments by hosting the build process in the cloud and allowing developers to upload code and link
Social Analytics Reporting Workshop - Dallas Digital Summit 2014Eric Swayne
Presented at the Dallas Digital Summit Workshop December 10, 2014
What exactly is social analytics? Why don't brands "get it?" What makes it so hard to understand this data?
This presentation takes us on a tour of the most common issues in social analytics reporting, defines the broken landscape of social data and how this makes the job hard, and offers some key points for making an impact with your reporting when you get back to your desk.
World 2013 - Pushing MicroStrategy to the Limit, The Hacker WayBryan Brandow
This presentation was delivered jointly with two colleagues. The original slides have been stripped down and blog links have been added where videos used to be.
Presented at Cardiff's monthly dev meetup, Unified.diff, on 5 June 2013. Learn what progressive enhancement is and how it can help your content authors do amazing things automagically.
GDPR and EA Commissioning a web site Part 6 of 8Allen Woods
Sixth of eight decks written to provide overview guidance of the way the web works for small to medium sized enterprises who are considering commissioning a web site for the first time. This deck introduces the idea that a web site is "not just for Christmas" and once set live, arguably, the work begins. Search engine optimisation (SEO) and cookie management and some of their associated legal issues are introduced
Some years ago development of Java Desktop applications was easy: We just downloaded Java 8 from Oracle and got a set of useful tools and framework to develop Java desktop applications:
AWT & Swing
WebStart
JavaFX
JFX Packager
If you now download a Java version from Oracle (or any other vendor) several of the mentioned tools and frameworks are gone. Some JDKs only contain AWT & Swing for desktop development and miss all the newer tools. But even if they include such tools or frameworks you have sometimes no idea about their state.
In this session I will give an overview about the differences between JDKs that you can use today and how frameworks like JavaFX are really supported by the vendors. Next to this we will have a look at all the tools that are important for building and installing desktop development. Since some like WebStart are gone you can find quite good alternatives.
Java APIs- The missing manual (concurrency)Hendrik Ebbers
This isn’t a talk about microservices, NoSQL, container solutions or hip new frameworks. This talk will show some of the standard Java APIs that are part of Java since version 5, 6, 7 or 8. All those features are very helpful to create maintainable and future-proof applications, regardless of whether JavaEE, Spring, JavaFX or any other framework is used. The talk will give an overview of some important standard concepts and APIs of Java like annotations, null values and concurrency.
Once upon a time, there was a poor, innocent language. It was friendly and kind. Everything could have been nice and peaceful, but there was another language that was grumpy and mean. One day they met and started to argue about who the better language was…. This session compares the Java language with TypeScript. It discusses how common problems are solved with these languages. At the end, you’ll see who is the beauty and who is the beast.
This document discusses Java releases and commercial support for Java. It provides an overview of the history of Java releases from Java 1 to Java 11. It describes the new faster release cycle introduced in 2018. It also outlines the commercial support models from various vendors like Oracle, Azul, and Bellsoft, including pricing structures based on the number of servers/processors.
This isn’t a talk about microservices, NO-SQL, Container solutions or hip new frameworks. This talk will show some of the standard Java APIs that are part of Java since version 5, 6, 7 or 8. All this features are very helpful to create maintainable and future-proof applications, regardless of whether JavaEE, Spring, JavaFX or any other framework is used. The talk will give an overview of some important standard concepts and APIs of Java like annotations, null values and concurrency. Based on an overview of this topics and some samples the talk will answer questions like:
- How can I create my own annotations?
- How can I create a plugin structure without using frameworks like OSGI?
- What’s the best way to handle NullPointerExceptions?
- How can I write concurrent code that is still maintainable?
Multidevice Controls: A Different Approach to UXHendrik Ebbers
Everybody knows boring form-based user interfaces. What if you could add mobile devices to improve the UX of desktop or web applications? A research project at the University of Applied Sciences and Arts Northwestern Switzerland has tried to address this topic in a totally different way. Usually you would expect to rework the UI and make it fancier, but here the idea is to enhance controls so they can reside on a mobile device. For example, you can think about a text input field that gets the focus, with the actual data input being done on a mobile phone. This session presents an overview of the concept and shows you some results of the research project in the form of demos based on Swift, JavaFX, and Polymer.
Java WebStart Is Dead: What Should We Do Now?Hendrik Ebbers
Starting with Java 11, WebStart is being removed from Java. Because even today several applications are built on top of this technology, it will be mission-critical for many companies to find a replacement for it. This session presents an overview of the features of WebStart and how they can be replaced. It includes samples of several open source and commercial tools that provide such features and might mean new and cool possibilities for WebStart-based applications.
This isn't a talk about microservices, NO-SQL, Container solutions or hip new frameworks. This talk will show some of the standard Java APIs that are part of Java since version 5, 6, 7 or 8. All this features are very helpful to create maintainable and future-proof applications, regardless of whether JavaEE, Spring, JavaFX or any other framework is used. The talk will give an overview of some important standard concepts and APIs of Java like annotations, SPI or how to handle null values. Based on an overview of this topics and some samples the talk will answer questions like:
- How can I create my own annotations?
- How can I create a plugin structure without using frameworks like OSGI?
- What's the best way to handle NullPointerExceptions?
This document discusses JavaFX and provides tips for working with it. It recommends using JavaFX with any Java IDE or "oldschool" without an IDE. It also recommends creating a class that extends Application and overriding start() to launch the application. The document also discusses project management with JavaFX, including using Maven and providing native builds on different platforms.
This document discusses test-driven development with JavaFX. It covers testing JavaFX applications at the unit, integration, and system levels. It also discusses continuous integration/continuous delivery and different tools that can be used for testing JavaFX applications, including TestFX, MarvinFX, JemmyFX, and Automaton. TestFX is highlighted as the recommended tool, with details provided on how to interact with JavaFX applications using its fluent API. The document also discusses using the view object pattern to write more readable tests and testing JavaFX applications that use DataFX or Afterburner.fx frameworks. It provides an example of using CDI to inject mocks when testing.
The document discusses using JavaFX for enterprise application development. It introduces JavaFX basics and best practices for enterprise development including using background threads to load data from servers. It also discusses client architectures like MVVM and frameworks that support JavaFX and integration with Java EE.
This document discusses feature-driven development and the use of feature toggles. It notes that concurrent development can lead to merge conflicts and bugs, but that feature branches and toggles can help address these issues. Feature toggles allow features to be independently activated and deactivated, and provide fallback options, helping with incremental development and release. The document recommends using short-lived feature branches, metadata to describe features, and administration interfaces to manage feature states.
This document provides an overview of control styling in JavaFX. It discusses the infrastructure of a control, including the Control, Skin, and Behavior classes. It then covers CSS styling rules like selectors, properties, and values. Specific CSS topics like SVG support and selector types like ID, class, and pseudo-class are explained. The document concludes with an advertisement for a book on mastering JavaFX controls.
How to use Bonjour in Java
The slides show you how to create bonjour based services on server site and use them on client site. All examples are completely written in Java.
This document discusses using Vagrant and configuration management tools like Puppet and Chef to create lightweight reproducible development environments. It provides an overview of virtualization and tools like Vagrant, Puppet and Chef. It demonstrates how to use these tools to automate the creation of virtual machines and configure them. It also summarizes the Vagrant-Binding Java library that allows managing Vagrant environments programmatically.
Devoxx UK 2013: Sandboxing with the Vagrant-Binding APIHendrik Ebbers
Vagrant-Binding is a Java wrapper for Vagrant that allows configuring and managing virtual machines from Java code. It provides fluent builder APIs to define VM configurations and manage their lifecycle. Vagrant-Binding integrates with Puppet for configuration management and provides JUnit support to start/stop VMs for tests. It can also access the Puppet Forge to install modules during tests. The goal is to manage test environments and software configurations programmatically.
This document discusses using Vagrant and Puppet to create lightweight reproducible development environments using virtual machines. It introduces Vagrant for automating VM creation and management. Puppet is used to configure VMs through scripts. The Vagrant-Binding API allows managing and configuring VMs from Java code. It provides builder APIs, JUnit integration, and access to Puppet modules. The goal is to simplify VM lifecycle management for testing and development.
Lightweight and reproducible environments with vagrant and PuppetHendrik Ebbers
The document discusses using Vagrant and Puppet to create lightweight reproducible development environments. Vagrant allows defining and managing virtual machine configurations through code. Puppet is used to automate configuration of software and services on VMs. The Java Vagrant-Binding API allows managing the lifecycle of Vagrant VMs from Java code, including provisioning VMs with Puppet. It provides builder APIs, JUnit support, and allows running tests against reproducible environments.
This document discusses JGrid, an open source Java Swing component for grid-based visualization of data. JGrid provides an alternative to using JList for non-hierarchical data and shares interfaces with JList. It uses renderers similarly to JList to display raw data in grid cells. The document demonstrates examples of grid views and discusses when grids are preferable to lists or tables for displaying data. It also outlines plans to further develop JGrid with additional features like sorting, filtering and cell editing.
Essentials of Automations: Exploring Attributes & Automation ParametersSafe Software
Building automations in FME Flow can save time, money, and help businesses scale by eliminating data silos and providing data to stakeholders in real-time. One essential component to orchestrating complex automations is the use of attributes & automation parameters (both formerly known as “keys”). In fact, it’s unlikely you’ll ever build an Automation without using these components, but what exactly are they?
Attributes & automation parameters enable the automation author to pass data values from one automation component to the next. During this webinar, our FME Flow Specialists will cover leveraging the three types of these output attributes & parameters in FME Flow: Event, Custom, and Automation. As a bonus, they’ll also be making use of the Split-Merge Block functionality.
You’ll leave this webinar with a better understanding of how to maximize the potential of automations by making use of attributes & automation parameters, with the ultimate goal of setting your enterprise integration workflows up on autopilot.
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving
Manufacturing custom quality metal nameplates and badges involves several standard operations. Processes include sheet prep, lithography, screening, coating, punch press and inspection. All decoration is completed in the flat sheet with adhesive and tooling operations following. The possibilities for creating unique durable nameplates are endless. How will you create your brand identity? We can help!
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyScyllaDB
Freshworks creates AI-boosted business software that helps employees work more efficiently and effectively. Managing data across multiple RDBMS and NoSQL databases was already a challenge at their current scale. To prepare for 10X growth, they knew it was time to rethink their database strategy. Learn how they architected a solution that would simplify scaling while keeping costs under control.
How information systems are built or acquired puts information, which is what they should be about, in a secondary place. Our language adapted accordingly, and we no longer talk about information systems but applications. Applications evolved in a way to break data into diverse fragments, tightly coupled with applications and expensive to integrate. The result is technical debt, which is re-paid by taking even bigger "loans", resulting in an ever-increasing technical debt. Software engineering and procurement practices work in sync with market forces to maintain this trend. This talk demonstrates how natural this situation is. The question is: can something be done to reverse the trend?
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...Fwdays
Direct losses from downtime in 1 minute = $5-$10 thousand dollars. Reputation is priceless.
As part of the talk, we will consider the architectural strategies necessary for the development of highly loaded fintech solutions. We will focus on using queues and streaming to efficiently work and manage large amounts of data in real-time and to minimize latency.
We will focus special attention on the architectural patterns used in the design of the fintech system, microservices and event-driven architecture, which ensure scalability, fault tolerance, and consistency of the entire system.
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...DanBrown980551
This LF Energy webinar took place June 20, 2024. It featured:
-Alex Thornton, LF Energy
-Hallie Cramer, Google
-Daniel Roesler, UtilityAPI
-Henry Richardson, WattTime
In response to the urgency and scale required to effectively address climate change, open source solutions offer significant potential for driving innovation and progress. Currently, there is a growing demand for standardization and interoperability in energy data and modeling. Open source standards and specifications within the energy sector can also alleviate challenges associated with data fragmentation, transparency, and accessibility. At the same time, it is crucial to consider privacy and security concerns throughout the development of open source platforms.
This webinar will delve into the motivations behind establishing LF Energy’s Carbon Data Specification Consortium. It will provide an overview of the draft specifications and the ongoing progress made by the respective working groups.
Three primary specifications will be discussed:
-Discovery and client registration, emphasizing transparent processes and secure and private access
-Customer data, centering around customer tariffs, bills, energy usage, and full consumption disclosure
-Power systems data, focusing on grid data, inclusive of transmission and distribution networks, generation, intergrid power flows, and market settlement data
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/temporal-event-neural-networks-a-more-efficient-alternative-to-the-transformer-a-presentation-from-brainchip/
Chris Jones, Director of Product Management at BrainChip , presents the “Temporal Event Neural Networks: A More Efficient Alternative to the Transformer” tutorial at the May 2024 Embedded Vision Summit.
The expansion of AI services necessitates enhanced computational capabilities on edge devices. Temporal Event Neural Networks (TENNs), developed by BrainChip, represent a novel and highly efficient state-space network. TENNs demonstrate exceptional proficiency in handling multi-dimensional streaming data, facilitating advancements in object detection, action recognition, speech enhancement and language model/sequence generation. Through the utilization of polynomial-based continuous convolutions, TENNs streamline models, expedite training processes and significantly diminish memory requirements, achieving notable reductions of up to 50x in parameters and 5,000x in energy consumption compared to prevailing methodologies like transformers.
Integration with BrainChip’s Akida neuromorphic hardware IP further enhances TENNs’ capabilities, enabling the realization of highly capable, portable and passively cooled edge devices. This presentation delves into the technical innovations underlying TENNs, presents real-world benchmarks, and elucidates how this cutting-edge approach is positioned to revolutionize edge AI across diverse applications.
The Microsoft 365 Migration Tutorial For Beginner.pptxoperationspcvita
This presentation will help you understand the power of Microsoft 365. However, we have mentioned every productivity app included in Office 365. Additionally, we have suggested the migration situation related to Office 365 and how we can help you.
You can also read: https://www.systoolsgroup.com/updates/office-365-tenant-to-tenant-migration-step-by-step-complete-guide/
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfChart Kalyan
A Mix Chart displays historical data of numbers in a graphical or tabular form. The Kalyan Rajdhani Mix Chart specifically shows the results of a sequence of numbers over different periods.
Introduction of Cybersecurity with OSS at Code Europe 2024Hiroshi SHIBATA
I develop the Ruby programming language, RubyGems, and Bundler, which are package managers for Ruby. Today, I will introduce how to enhance the security of your application using open-source software (OSS) examples from Ruby and RubyGems.
The first topic is CVE (Common Vulnerabilities and Exposures). I have published CVEs many times. But what exactly is a CVE? I'll provide a basic understanding of CVEs and explain how to detect and handle vulnerabilities in OSS.
Next, let's discuss package managers. Package managers play a critical role in the OSS ecosystem. I'll explain how to manage library dependencies in your application.
I'll share insights into how the Ruby and RubyGems core team works to keep our ecosystem safe. By the end of this talk, you'll have a better understanding of how to safeguard your code.
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsDianaGray10
Join us to learn how UiPath Apps can directly and easily interact with prebuilt connectors via Integration Service--including Salesforce, ServiceNow, Open GenAI, and more.
The best part is you can achieve this without building a custom workflow! Say goodbye to the hassle of using separate automations to call APIs. By seamlessly integrating within App Studio, you can now easily streamline your workflow, while gaining direct access to our Connector Catalog of popular applications.
We’ll discuss and demo the benefits of UiPath Apps and connectors including:
Creating a compelling user experience for any software, without the limitations of APIs.
Accelerating the app creation process, saving time and effort
Enjoying high-performance CRUD (create, read, update, delete) operations, for
seamless data management.
Speakers:
Russell Alfeche, Technology Leader, RPA at qBotic and UiPath MVP
Charlie Greenberg, host
Main news related to the CCS TSI 2023 (2023/1695)Jakub Marek
An English 🇬🇧 translation of a presentation to the speech I gave about the main changes brought by CCS TSI 2023 at the biggest Czech conference on Communications and signalling systems on Railways, which was held in Clarion Hotel Olomouc from 7th to 9th November 2023 (konferenceszt.cz). Attended by around 500 participants and 200 on-line followers.
The original Czech 🇨🇿 version of the presentation can be found here: https://www.slideshare.net/slideshow/hlavni-novinky-souvisejici-s-ccs-tsi-2023-2023-1695/269688092 .
The videorecording (in Czech) from the presentation is available here: https://youtu.be/WzjJWm4IyPk?si=SImb06tuXGb30BEH .
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving
What began over 115 years ago as a supplier of precision gauges to the automotive industry has evolved into being an industry leader in the manufacture of product branding, automotive cockpit trim and decorative appliance trim. Value-added services include in-house Design, Engineering, Program Management, Test Lab and Tool Shops.
In the realm of cybersecurity, offensive security practices act as a critical shield. By simulating real-world attacks in a controlled environment, these techniques expose vulnerabilities before malicious actors can exploit them. This proactive approach allows manufacturers to identify and fix weaknesses, significantly enhancing system security.
This presentation delves into the development of a system designed to mimic Galileo's Open Service signal using software-defined radio (SDR) technology. We'll begin with a foundational overview of both Global Navigation Satellite Systems (GNSS) and the intricacies of digital signal processing.
The presentation culminates in a live demonstration. We'll showcase the manipulation of Galileo's Open Service pilot signal, simulating an attack on various software and hardware systems. This practical demonstration serves to highlight the potential consequences of unaddressed vulnerabilities, emphasizing the importance of offensive security practices in safeguarding critical infrastructure.
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillLizaNolte
HERE IS YOUR WEBINAR CONTENT! 'Mastering Customer Journey Management with Dr. Graham Hill'. We hope you find the webinar recording both insightful and enjoyable.
In this webinar, we explored essential aspects of Customer Journey Management and personalization. Here’s a summary of the key insights and topics discussed:
Key Takeaways:
Understanding the Customer Journey: Dr. Hill emphasized the importance of mapping and understanding the complete customer journey to identify touchpoints and opportunities for improvement.
Personalization Strategies: We discussed how to leverage data and insights to create personalized experiences that resonate with customers.
Technology Integration: Insights were shared on how inQuba’s advanced technology can streamline customer interactions and drive operational efficiency.
Conversational agents, or chatbots, are increasingly used to access all sorts of services using natural language. While open-domain chatbots - like ChatGPT - can converse on any topic, task-oriented chatbots - the focus of this paper - are designed for specific tasks, like booking a flight, obtaining customer support, or setting an appointment. Like any other software, task-oriented chatbots need to be properly tested, usually by defining and executing test scenarios (i.e., sequences of user-chatbot interactions). However, there is currently a lack of methods to quantify the completeness and strength of such test scenarios, which can lead to low-quality tests, and hence to buggy chatbots.
To fill this gap, we propose adapting mutation testing (MuT) for task-oriented chatbots. To this end, we introduce a set of mutation operators that emulate faults in chatbot designs, an architecture that enables MuT on chatbots built using heterogeneous technologies, and a practical realisation as an Eclipse plugin. Moreover, we evaluate the applicability, effectiveness and efficiency of our approach on open-source chatbots, with promising results.
2. Web Components canoo
About us
<speaker name=„Michael Heinrichs“
company=„Canoo Engineering AG“
web=„blog.netopyr.com“
twitter=„@net0pyr“
description=„UI Magician, Active writer
and speaker“>
</speaker>
<speaker name=„Hendrik Ebbers“
company=„Canoo Engineering AG“
web=„www.guigarage.com“
twitter=„@hendrikEbbers“
description=„JUG lead, blogger,
book author, JSR EC Member“>
</speaker>
3. Content
• The web component specification
• Web component polyfills
• Polymer
• Perspectives
Web Components canoo
4. Revolution of the web
Web Components canoo
HTML Ajax JS HTML5 mobile Angular ?
5. Bower
• A package manager for the web
• Search for dependencies and install them as packages
• Created by Twitter
• Open Source
Web Components canoo
www.bower.io
6. Bower
requires npm, node.js and git
Web Components canoo
$ npm install -g bower
$ bower init
$ bower install --save webcomponentsjs
in your project folder
download &
add module
add dependency to
bower file
34. Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L
Im
ports
S
hadow
D
O
M
E
lem
ent
Tem
plate
35. Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L
Im
ports
S
hadow
D
O
M
E
lem
ent
Tem
plate
36. Web Components canoo
<div class="activity">
<a>Michael</a> had fun coding.
</div>
How do we store the icon source and time?
What is a <div> with the class “activity” anyway?
37. Web Components canoo
<activity-card iconSrc="img/michael.jpg" time="Seconds ago">
<a>Michael</a> had fun coding.
</activity-card>
<div class="activity">
<a>Michael</a> had fun coding.
</div>
39. document.registerElement("activity-card", options);
Web Components canoo
var activityCardPrototype = Object.create(HTMLElement.prototype);
document.registerElement("activity-card", options);
Rough translation
to Java
class ActivityCard extends HTMLElement {};
Class<ActivityCard> activityCardClass = ActivityCard.class;
ElementRegistrationOptions options =
new ElementRegistrationOptions(activityCardClass);
var options = {prototype: activityPrototype}
40. document.registerElement("activity-card", options);
Web Components canoo
var activityCardPrototype = Object.create(HTMLElement.prototype);
var options = {prototype: activityPrototype}
<activity-card iconSrc="img/michael.jpg" time="Seconds ago">
<a>Michael</a> had fun coding.
</activity-card>
50. Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L
Im
ports
S
hadow
D
O
M
E
lem
ent
Tem
plate
51. Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L
Im
ports
S
hadow
D
O
M
E
lem
ent
Tem
plate
52. webcomponent.js
Web Components canoo
• Today not all browsers support the new standards
• The community provides a pollyfills to enable web
components in browser that have no native support
$ bower install --save webcomponentsjs
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
install it with bower
use it in your code
53. webcomponent.js
Web Components canoo
• The polyfills are the junction of X-Tag and Polymer
basic libraries
• Mozilla created X-Tag as a polyfill to provide web
components
• Google created Polymer as a polyfill to provide web
components
54. webcomponent.js
Web Components canoo
• X-Tag and Polymer depends on webcomponents-js
• Both libraries provide additional features that are not
part of the specification
webcomponents.org
55. Polymer
Web Components canoo
• Polymer is created & supported by Google
• Current version depends on webcomponents.js (since
0.5.1)
• Adds some API sugar on top of webcomponents.js
www.polymer-project.org
57. Data Bindings
Web Components canoo
• two-way data binding is one of the additional features
of Polymer
<template repeat="{{s in salutations}}">
<li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
</template>
this.salutations = [
{what: 'Hello', who: 'World'},
{what: 'Goodbye', who: 'DOM APIs’}
];
58. X-Tag
Web Components canoo
<X>
• X-Tag is created & supported by Mozilla
• Future version will depend on webcomponents.js
(dependency added Jan 5, 2015)
• Adds some API sugar on top of webcomponents.js
x-tags.org
61. The next steps
• Web Components can be reused
• Web Components can be styled
• A logical consequence is to provide toolkits
Web Components canoo
62. Google Web Components
Web Components canoo
<google-chart></google-chart>
<google-hangout-button></google-hangout-button>
• Google is build a lot of components (maps, youtube…)
http://googlewebcomponents.github.io
63. Twitter Boostrap
• provides predefined CSS rules
• Can be used for layout
• Provides its own style
• Provides an icon set
Web Components canoo
64. Google Polymer Paper
• provides custom web components
• provides layouts
• provides icon sets
Web Components canoo
65. Boostrap
• Polymer is only released as developer preview
• Boostrap is final (Version 3.x)
• Polymer is based on modern web technology
• Boostrap is based on CSS (and some JavaScript)
• Polymer provides custom web components
• Boostrap provides CSS rules
Web Components canoo
Paper
66. Why does Google provide it?
• Polymer is the web part of „Material Design“
• Provide the same user experience on any device
• Provide the same user experience over many
applications
Web Components canoo
„We challenged ourselves to create a visual language for our users
that synthesizes the classic principles of good design with the
innovation and possibility of technology and science.“
67.
68.
69.
70.
71. Important features
• Responsive Design
• Customizable - Create your cooperative design
• Easy to use
• Extendable
Web Components canoo
72.
73.
74.
75.
76. • Layout containers
• Components
• Animations
• Icons
Polymer Paper
Web Components canoo
77. • All components (layouts, controls, icons) are build as
web components
• A single component or a set can be added by using
bower
How to use Components
Web Components canoo
$ bower install --save Polymer/paper-slider
<link rel="import" href="bower_components/paper-slider/paper-slider.html">
import it in HTML
78. • The default Button
• shows ripple animation on click
Paper Button
Web Components canoo
<paper-button>flat button</paper-button>
<paper-button raised>raised button</paper-button>
<paper-button noink>No ripple effect</paper-button>
79. • A styled CheckBox
• State can be defined as attribute
Paper CheckBox
Web Components canoo
<paper-checkbox></paper-checkbox>
<paper-checkbox checked></paper-checkbox>
80. • A dialog
• Supports title, modality, actions, …
Paper Dialog
Web Components canoo
<paper-dialog heading="Title">
<p>Some content</p>
</paper-dialog>
86. • An application toolbar
• Toolbar content will be aligned
Toolbar
Web Components
<core-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div>My Application</div>
<span flex></span>
<paper-icon-button icon="event"></paper-icon-button>
</core-toolbar>
canoo
87. • Declarative layout system
• use CSS Flexbox internally
• Layout params are defined as HTML attributes
Polymer layout attributes
Web Components
<span flex></span>
canoo
<body fullbleed layout vertical>Hello World</body>
<div layout vertical><div>
88. • Wrapper around toolbar and
content
• Toolbar always on top
• Content scrollable
HeaderPanel
Web Components canoo
<core-header-panel flex>
<core-toolbar>Title</core-toolbar>
<div>content</div>
</core-header-panel>
89. • Adds a responsive
menu
• Defines attributes to
open and close the
menu
• Normally wraps 2
core-header-panel
DrawerPanel
Web Components canoo
90. DrawerPanel
Web Components canoo
<core-drawer-panel>
<core-header-panel drawer>
<core-toolbar></core-toolbar>
<core-menu>
<core-item label="One"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<paper-icon-button core-drawer-toggle icon="menu"></paper-icon-button>
</core-toolbar>
<div>content</div>
</core-header-panel>
</core-drawer-panel>
drawer panel
main panel
show drawer
91. • Basic skeleton
• Best practice to create
an application
• Contains all the shown
features
Scaffold
Web Components
<core-scaffold>
<core-header-panel navigation flex>
<!-- nav drawer -->
</core-header-panel>
<span tool>Title</span>
<div>content</div>
</core-scaffold>
defines the drawer
defines the main
toolbar
canoo
92. • Create a new folder
• Install needed modules with Bower
Polymer demo
Web Components
$ mkdir app
$ cd app
$ bower init
$ bower install --save Polymer/paper-elements
canoo
107. • The Polymer team offers a WYSIWYG designer for Polymer
• Good to have a look at all components and play with the
layout
Polymer Designer
Web Components canoo
https://polymer-designer.appspot.com
110. Additional resources
Web Components canoo
• http://webcomponents.org
• http://component.kitchen
• http://customelements.io
most important entry point
custom web
components catalogs