JavaScript Frameworks for Your Website with Omni CMS
Explore the world of JavaScript frameworks for your website, integrated with Omni CMS. Learn about the typical integration, common libraries/frameworks like jQuery, Vue, and Bootstrap, limitations, and typical use cases such as pagination and content filtering. Discover how these tools can enhance your web development projects.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
1JavaScript Frameworks for Your Website Omni CMS
Introduction Nick Catto Director of Design Design Studio 2 Jorgen Tuck Web Developer Professional Services
Brief Overview of JS and Omni Typical Integration Limitations Common Libraries/Frameworks Typical Use Cases Cool Use Cases 3
Typical Integration CDN or file path/upload placed in the following: PCF Footcode Page Level Only appears on a single page 4 XSL Footcode Template Level Appears on all template s pages (interior, blog listing, etc ) Common.xsl Footcode All Pages Every page of website Conditional Footcode Select Pages Typically used in Common.xsl but can be used in any other XSL file
Limitations There are no reported limitations with JavaScript in the CMS If any limitations caused by the CMS are encountered, they will not exist in production 5
Common Libraries/Frameworks jQuery (https://jquery.com/) jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. Slick (https://kenwheeler.github.io/slick/) 6 Fully responsive carousel library Vue (https://vuejs.org/) Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex. Bootstrap (https://getbootstrap.com/) Bootstrap is a JavaScript and CSS framework for building mobile-first, responsive sites. It is easy to set up, has a good grid system, a lot of components, and styling for many HTML elements.
Typical Use Cases Pagination Content Filtering and Search Carousels Modern Campus uses: Vue for Emergency Alerts Slick for Carousels jQuery Simplify and standardize interactions between JavaScript code and HTML elements 7
Pagination Client Client- -Side vs Server Side vs Server- -Side Side Client Server All data needs to be sent on page load Typically used when there is less data to paginate Can be done with JavaScript or even CSS Most common Only the data needed is sent Needs to be implemented in the same language as your server 8
Content Filtering and Search Does not require page re-loads when changing the filters or search terms Automatically updates when the search terms change Can combine multiple filters with keyword searching Typically used in conjunction with pagination 9
Carousels Pros Pros and Cons and Cons Pros Pros Cons Cons Easily show multiple images in a constrained location Can loop over images infinitely Nobody Clicks on Carousels* Poor accessibility issues for keyboard and screen reader user 10 * Source (https://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496)
Voca The Voca library provides helpful functions to manipulate, chop, format, escape and query strings 12 https://vocajs.com/
Demo Demo
VideoJS Supports HTML5 video and modern streaming formats, as well as YouTube and Vimeo. Supports video playback on desktop and mobile devices. 14 https://videojs.com/
Demo Demo
Sharect Share selected text to social media A lightweight script to let users share their text selections to social networks, in desktop browsers (like Medium.com) 16 https://estevanmaito.github.io/sharect/
Demo Demo
Questions? Questions?
