Using React, Drupal and Google Chrome to build an interactive kiosk + + =

Slides:



Advertisements
Similar presentations
Development of mobile applications using PhoneGap and HTML 5
Advertisements

 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.
Presented by…. Group 2 1. Programming language 2Introduction.
Create with SharePoint 2010 Jen Dodd Sr. Solutions Consultant
Windows.Net Programming Series Preview. Course Schedule CourseDate Microsoft.Net Fundamentals 01/13/2014 Microsoft Windows/Web Fundamentals 01/20/2014.
Philly.NET Hands-on Labs JAVASCRIPT SERIES. July 9: JavaScript Syntax Visual Studio ◦Projects ◦Editors ◦Debugging ◦Script blocks ◦Minification and bundling.
NODEJS, THE JOOMLA FRAMEWORK, AND THE FUTURE IAN MACLENNAN.
Jasmine Testing Framework. What’s Jasmine For? Framework for Test Driven Development Designed around acceptance testing Works in any environment (with.
Cross Site Integration “mashups” cross site scripting.
Ultra-modern web development (for.NET
Ventsislav Popov Crossroad Ltd.. 1. What is AJAX?  AJAX Concept  ASP.NET AJAX Framework 2. ASP.NET AJAX Server Controls  ScriptManager, UpdatePanel.
DemocracyApps, Inc. Community Budget Explorer A Technical Overview.
Telerik Software Academy ASP.NET Web Forms Telerik Software Academy ASP.NET Web Forms.
Wijmo Troy Taylor. What is Wijmo? -Wijmo is a kit of over 40 UI widgets, optimized for client-side web development. -HTML5 -jQuery -CSS3 -SVG.
Unleash the Power of jQuery Learning & Development Team Telerik Software Academy.
Plug-in Architectures Presented by Truc Nguyen. What’s a plug-in? “a type of program that tightly integrates with a larger application to add a special.
What is Firefly (1) A web UI framework for web applications
1.Getting Started 2.Modifying Design 3.Newsletter Templates 4.Announcement 5.Administer Sections Index Training 14 th Mar., 2011.
Flux & React Web Application Development Mark Repka, Rich McNeary, Steve Mueller.
Olmo de Corral Signum Framework Developer #olmocc React.
Wes Preston DEV 202. Audience: Info Workers, Dev A deeper dive into use-cases where client-side rendering (CSR) and SharePoint’s JS Link property can.
丁建文 國立高雄應用科大資管系副教授 兼任計網中心軟體發展組組長 跨平台行動應用軟體開發技術 : HTML5 & Mobile JavaScript Framework 暨南大學.
APP DESIGN AND DEVELOPMENT WITH THE IONIC FRAMEWORK Chuck Leone
Best Web Technologies for
Cloud Computing in Systems Programming Curriculum Gustavo Rodriguez-Rivera, Purdue University Enrique Kortright, IBM.
Advanced Topics in Concurrency and Reactive Programming: React
Node.js Modules Header Mastering Node.js, Part 2 Eric W. Greene
Angular vs React John
Lean With MEAN.
Building Desktop Apps with Node.js and Electron
Overview Blogs and wikis are two Web 2.0 tools that allow users to publish content online Blogs function as online journals Wikis are collections of searchable,
Creating React Components with JSX and Babel
Development of Internet Applications jQuery, TypeScript, LESS
Active Server Pages Computer Science 40S.
Human Computer Interaction
Accessibility into Automation
Introduction to Redux Header Eric W. Greene Microsoft Virtual Academy
Presentation 2 Web Design.
AVOIR -African virtual
SharePoint Bruger Gruppe (SPBG) SharePoint Framework Introduction
PHP Training at GoLogica in Bangalore
YOUR MOBILE DEVELOPMENT TEAM
Modern Front-End Web Development with Visual Studio
User Interface / User Experience Demo
Top 5 Front End Development Tools. 1. Sublime Text Sublime Text may be a super quick and have packed text and development editor. If you're about to be.
Not Sure how you Should React
The Cliff Notes Version
React Revived Web Driver IO for Testers
Power-UP YOUR UI WITH WP-API AND REACT.JS
Client-Side Web Technologies
Advanced Topics in Concurrency and Reactive Programming: React
Selenium vs Protractor
jQuery The Easy JavaScript Nikolay Chochev Technical Trainer
Modern web applications
Using REST and UI Testing to Test an Ajax Web Application
Importance of logs in custom development
WordPress Development
Modern web applications
Secure Web Programming
Pattern Libraries Leveraging Atomic Design and Pattern Lab to Develop a Living Visual Style Guide Jayson Jaynes, ITS Web Services Web Developer Mark Miller,
Input CS 422: UI Design and Programming
SEEM4570 Tutorial 5: jQuery + jQuery Mobile
A JavaScript framework
Innovation Co-Lab roots/React
Introduction to Sitecore JSS for frontend and backend developers
Web Client Side Technologies Raneem Qaddoura
#04 Web Client (HTM5, React.js)
One Set of Styles Connected to As Many Pages as You Want!!!
Angular.
Build’an’Office add-in- using’modern JavaScript tools and techniques
Presentation transcript:

Using React, Drupal and Google Chrome to build an interactive kiosk + + =

What is React?  React (sometimes styled React.js or ReactJS) is an open-source JavaScript library providing a view for data rendered as HTML. 1 It was developed by Facebook.  React can embed and render components within components.  React can accept arguments called props and maintain it’s own state data.  React uses a syntax called JSX class Hello extends Component { render() { return ( Hello {this.props.name} ) } }); class App extends Component { render() { return ( ) }

Who uses React?  Facebook  Instagram  DropBox  Netflix  Lullabot 

Why is React a good fit for a kiosk?  Easy to conceptualize kiosk design using components.  No page reloads and very responsive.  Reuse of components works well. You may be able to even use a component for a different kiosk if needed.  Large library of other modules to choose from to integrate.  Potentially take the same concepts in ReactJS and move it to React Native if a mobile app is needed.

The React HTML   That’s it?

Recommended Modules  React Router  There are no pages within React, it is all done with DOM manipulation  React Router adds hash router based state  An AJAX Library  SuperAgent  Reqwest  axios  HTML Filter or Markdown Modules  If you are importing remote data, you may need a way to filter it  React-GA  Track usage with Google Analytics.

What about jQuery?  We use jQuery in our Drupal sites.  You don’t need jQuery. You should be able to use React without it. You can rebuild or replicate much of the functionality that you would use on a jQuery site.  The only recommendation for using jQuery is when you have a specific use case for a given jQuery module.

Developer Setup  While you can write JavaScript directly for the browser, the current popular way is to use ES6 in NodeJS and transpile with Babel to the browser.  For this method you will need to install NodeJS and NPM.  Use a task runner, such as Grunt or Gulp to create a workflow for the application files. Use Browserify or Webpack to convert to browser code.  What about stylesheets? There is discussion as to whether you should embed the styles inline within a component or use external styles. You can still use pure CSS, SASS or LESS to develop and style React components.

Testing  Unit Testing Frameworks  Jest – Recommended by Facebook and built on Jasmine  Mocha  QUnit  Automated Testing  WebDriverIO with Selenium  Karma  PhantomJS headless browser testing

What if I need more from React?  React Bootstrap – A bootstrap implementation of React  Flux – Adds the model and controller layer to a React application  Vanilla Flux  Redux  Reflux  Other implementations  Relay + GraphQL – Data composition and Fetching  Immutable.js – Data object management

Bringing in Drupal!  It’s got the content management part down!  It is able to easily aggregate the needed data.  We can leverage Drupal’s existing modules to create a workflow for data generation and management.  It doesn’t have to be Drupal on the backend, it could be another CMS, framework, custom application or flat JSON files!

Drupal Setup  Recommend creating a new content type if it is specific to the kiosk.  Combine the data you need in views.  Enable the Views JSON module to export the data needed.  If you need content access restrictions:  Rabbit Hole module for the content type  New text format and Better Formats module if you use a WYSIWYG editor to restrict tags  Access Filter module if you need to block access to the view results

Operating System User Permissions  Create a new user specifically for the kiosk  Remove all app permissions except for Chrome  Set the kiosk to auto login to the kiosk user account  Put Chrome in the startup task

Running in Chrome  Kiosk Helper in the Chrome App Store  If you need additional extensions, you have to run the browser in Kiosk mode with extensions enabled.  Custom Extensions? – You have to register as an Chrome App Store developer. If you don’t want the store to list the extensions, you can set them to private.

References  React logo by Facebook, source:  Drupal logo by Drupal, source:  Google Chrome logo by Google, source:  1