JSFoo-2017 Takeaways
0 likes255 views
The document discusses key topics presented by the Hotstar web team at JSFoo 2017, including the significance of web components for creating reusable HTML elements, the importance of security in web applications, and the capabilities of React Native for cross-platform development. It highlights various presentations on web technologies such as WebVR, the Jest testing framework, and the implementation of best practices for application performance. Additionally, it mentions the need for efficient bundling and loading strategies to optimize web applications.
JSFoo-2017 Takeaways
- 1. HotStar @ JSFoo-2017 Reflections by HotStar-WEB team on some of the key talks
- 2. Talks that excited us ● Demystifying Web Components as the Weapon for Web Convergence ● Safety not Guaranteed ● Building Immersive Experiences with WebVR ● JEST - A Testing Framework ● React Native ● Shadow DOM
- 3. Web Components ● They are re-usable, performant, easy to code, easy to use, and lightweight ● Provide Custom Element, Shadow DOM, HTML Import, and HTML Template ● Web Components can help us build standard reusable custom html elements with bundled CSS, HTML & JS ● Perfectly reusable components across all browsers & even with multiple frameworks like React, Ember, Vue ● Standardisation of the Web ● Ola, Google, GitHub, Comcast, Salesforce and General Electric ● Polymer supports Web Components very well.
- 4. Building JS apps with security in Mind ● Client Side Weaknesses -- Angular and Template Injection, Script Injection in MDWiki ● Server Side Weaknesses -- Jade accessing root object in CodePen, Node.js unserialize() code exec ● Clients sending encryption key and IV in plaintext ● Typo in header could lead to click-jacking attacks ● Content Security Policy -- directives -- report-uri for reporting the violation reports ● SubResource Integrity -- Is the file you fetched actually the file you fetched? CryptoHash ● HTTP Strict Transport Security ● OWASP Project ● Think like an attacker when building Apps
- 5. WebVR ● What is Virtual Reality ● Why Web-VR? ● Introduction to A-Frame ● Getting started with A-Frame
- 6. JEST - Unit Testing Framework - How does current testing frameworks work ? - How do we test UI using current frameworks ? - JEST has a reference to previous working snapshot of UI - Snapshot is nothing but a JSON data which represents the DOM
- 7. Shadow DOM - What we used to do ? - What we do now with react ? - How is shadow dom better ? - Encapsulation of UI elements - Currently Polymer has the api built in for Shadow DOM
- 8. React Native - Do we need it ? - Currently we write business logic at 3 points. Web, iOS and Android - React Native saves us from this. - Pros: Change once and it will reflect at all places One Language to rule all - Cons: Bundle size UI Elements Interactivity is different in different platforms. So in such cases we again end up building platform specific components Since React Native is new, the framework itself is changing at fast pace.
- 9. Webpack Bundling - JS Chunking - route basis - CSS Chunking - route basis - Chunking to create on demand loading - Separating Mobile Code from Desktop as UI and functionalities are different - Chunking at component level for heavier components - Reduce Image size and load image on basis of platform - Lazy Loading of Fonts as it blocks rendering - And of course gzip assets - Caching the pages and not putting load on server for server side rendering This type of bundling lead to lower size of assets to be shipped to browser and faster first time load. Most of the work is already done for our web 2.0 except the images which will get solved with cloudinary.
- 10. References ● Demystifying Web Components as the Weapon for Web Convergence -- Rahat Khanna ● Safety not Guaranteed -- Riyaz Walikar ● Building Immersive Experiences with WebVR -- Ram Vaishnav ● Importance of Testing & the Right Way to Test React Components -- Manjula Dube ● Improving Load time of a Production React App -- Kanav Arora