JSFoo 2017

The web is evolving at light speed and all the web applications are trying to catch up. It has become very difficult for a new developer or even an existing developer to decide which Framework or Tool to choose for his next project. Angular, React, Ember, Vue are few of the myriad of options available, and some time evaluating few of these for the best fit is unending.

All the browsers have come to a stage where they are almost implementing most of the new Web Standards and now developers do not need to invest much time in Browser Compatibility. Although all the front end frameworks like React, Angular, Vue & Ember have different core architectures but they are converging on a common principle design pattern i.e. Component Driven architecture. Web Components with the customElements v1 API released on most popular browsers are the solution to take standardisation of the web to the next level.

Web Components can help us build standard re-usable custom html elements with bundled CSS, HTML & JS (for behaviours). It will enable all developers to build performant, maintainable web apps unlocking the full potential of the browser.

Potential Benefits of Web Components

• Perfectly reusable components across all browsers & even with multiple frameworks like React, Ember, Vue
• Reduction of efforts in maintenance and upgradation with new features
• Single File with bundled HTML & CSS
• Drive the principle of Composition for component driven approach in building web apps
• Standardisation of the Web

Web Components have already been taken into production use by several big companies such as Google, GitHub, Comcast, Salesforce and General Electric. Some of the more high profile sites using Web Components are Youtube Gaming, Google Patents, Google Music and GitHub.

We all web developers have a contribution towards the community to reduce the pain of new people learning development and making an endeavour to work towards standardisation. In this way we can spend more time in building great and engaging User Experiences rather than learning all of these different platforms and frameworks.

Outline

The session would be divided into 3 main section:

1. What are web components?
2. How to develop a reusable Web Component?
3. How to use it with Angular & ReactJS ?

The detailed points to be covered in each of the section would be as follows:

What are Web Components

1. Problem with burst of Frameworks
2. History of Web Components
3. How will Web Components change the Web
4. Architecture of a Web Component
5. Main parts of a Web Component
   1. HTML Templates
   2. Shadow DOM
   3. Custom Elements
   4. HTML Imports
6. Browser Support for Web Components

Developing a Simple reusable Web Component

1. Polyfills or Support Libraries like Polymer, x-tag
2. Building a basic Infinite List component
   1. Component Structure
   2. Making a Template
   3. Adding Shadow DOM
   4. Inputs & Outputs (Events)
   5. Using it in a Vanilla JS Project

Using new Web Component with Angular & React

1. Using it with Angular 2
2. Using it with ReactJS

Requirements

Laptops with NodeJS & Chrome Browsers

Speaker bio

I am a UI Developer working with Apple Inc, previously have worked with Flipkart & Genpact. Sound expertise on Front End Technologies having a vast experience of developing 200+ websites, building numerous Enterprise Hybrid Mobile Apps, architecting User Interface Solutions, authoring a popular book on Ionic Framework and conducting 30+ Global Trainings on latest frameworks and technology tools.

International Trainer for Ionic/Cordova & Angular - Invited by MIMOS, Malaysia (Funded by Ministry of Science & Technology, Malaysian Govt) for Training Workshop

Links

• https://www.youtube.com/watch?v=A7SUlXxZ0nc&t=4518s (Video for 2.5 Hour Workshop at CloudCherry)
• JSRemoteConf-2015 - Session on Ionic (https://www.youtube.com/watch?v=VBJriobtvDM)
• http://twitter.com/mappmechanic
• https://linkedin.com/in/rahatkh
• Slides for my Recent Talk on Angular & RxJS
• https://www.slideshare.net/rahatkhanna/angular-observables-rxjs-introduction
• Slides for my last month talk on React Native
• https://www.slideshare.net/rahatkhanna/introduction-to-react-native-rendering-charts-graphs

Slides

https://www.slideshare.net/secret/leTVkuVuqtgi7C