Download to read offline
More Related Content
Similar to Speeding Up uPortal with ReactJS
Speeding Up uPortal with ReactJS
- 1. Speeding Up uPortalWith ReactJS Aaron Goodfellow, Brandon Powell, KaJuan Johnson - Oakland University
- 2. ● React isa JavaScript library for building user interfaces ● No longer need page refresh to manipulate data and user interaction ● Reusable components What Is ReactJS?
- 3.
- 4. Logic inside JSP Multiplepage reloads (e.g form submissions, view change, etc) Unfamiliar syntax (Java / Spring in jsps) CSS leaking and bootstrap being overpowering JSTL is garbage The Old Way
- 5. Low barrier toentry Familiar syntax No CSS leaking Automatic and fast re-rendering Good documentation / community React-Native potential Why ReactJS is better
- 6. ● Node ● Yarn ●Create-React-App Creating a React Project
- 7.
- 8. ● A collectionof elements (e.g. html tags) that share a relation to a data set Components
- 9. ● Data that,if changed, triggers a re-render ● Inner-workings all handled by Facebook State
- 10. ● The wayin which data is passed from parent to child components Props
- 11.
- 12. CSS ● No moreleaking CSS
- 13. ● Ejecting Integrate with aportlet
- 14. ● Remove hashesin webpack build Integrate with a portlet
- 15. ● Build reactcode during a maven build. Integrate with a portlet
- 16. react-i18next (https://github.com/i18next/react-i18next) Create translationsfor en, en-us, en-gb, fr, de, etc and place in your portlet i18next will load the translations based on browser Example code: https://github.com/bpowell/i18n-react-portlet i18n With React Many, many, many thanks to Christian Cousquer :)
- 17. Choosing Frontend Libraries Badbackend ADA Compliance Deciding when to make a piece of code its own Component JavaScript weirdness Our Mistakes
- 18. React Developer Tools⟹ Browser extension Prettier ⟹ Code formatting vim-jsx or vim-javascript-syntax ⟹ VIM plugins for syntax highlighting Create-react-app ⟹ Tool to create react applications Yarn ⟹ npm replacement made by Facebook Tools For ReactJS
- 19.
- 20. Aaron Goodfellow amgoodfellow@oakland.edu BrandonPowell bjpowel2@oakland.edu KaJuan Johnson kdjohnson23@oakland.edu Contact Us
- 21.
Editor's Notes
- #2 b
- #3 b
- #4 b
- #5 b
- #6 A Low barrier - Similar concepts to the current frontend stack of html, css, and No CSS Leaking - We still can have a separate CSS file for readability, but when we transpile the code, all CSS is inlined, so there is no leakage ‘Automatic’ - talk about state changes and just basically how that works Good documentation - the project is maintained by Facebook and they have great documentation and tutorials. It’s also a ‘hip’ language so there is a large, growing community making libraries and support for it. Notable users: Facebook, Instagram, Netflix, Twitch, NHL, Lyft, Kroger React Native: Because apps are nice and app development is hard
- #7 k Node - Executing javascript server-side. If you don’t know what this is, greetings from the 21st century. Maybe you should find a new job Yarn - A new package manager for nodeJS stuff. It’s like npm but faster! You can install it via npm or through their website. Built by Facebook. Yarn caches every package it downloads so it never needs to download it again. Create-React-App - A facebook created node package allowing for easy set-up of React projects. Before this, you had to manually set up all of webpack yourself, which is a very daunting task. Now everything comes preconfigured with helpful scripts to build and test your project
- #8 k Virtual DOM - The virtual DOM is a easily mutable copy of the traditional DOM. This is used to compare against the traditional DOM and and rerender based on changes. For a more in detail look at this topic please reference the presentation , Portals? uPortal!? What is this Béchamel? By Christian Cousquer Props -
- #9 K Components - There are two types of components, one is class based (which would be easy for developers familiar with Java) and the other type is called “functional stateless” where they are more like traditional javascript functions. The class based ones are more commonly used, since they have lifecycle methods associated with them, can manage their own state, and can have as many user added attributes and methods as a user desires. Talk about how just how lifecycle methods are built-in things that facebook provides.
- #10 A State is what makes React so magical. Everyone here is familiar with the concept of variables (I hope) - state is basically a collection of javascript variables that React keeps track of. You can reference state by saying this.state.(variableName), and set state with a special setState method. When this method is called, it changes the virtual DOM. Then, when the React diffing algorithm is run, a rerender of everything affected by the changed state variable occurs.
- #11 A Props and state are closely related. Props are basically how React passes data from a parent component, down to its children. When passing them down, they look similar to HTML attributes, and they could be hardcoded values, state variables, or even methods. This whole idea can be kind of confusing, and it seems to be what trips people up the most when coming to React for the first time, so for the sake of time, we’ll just keep a high level approach and say this is how data are passed to child components. If you have any questions, please feel free to ask anytime after our presentation
- #12 All 3 If you remember from an earlier example, we connected to a database using the method getData. Here is that method. At Oakland University, we’ve been trying to remove JQuery from all of our portlets and soffits, since it is a large dependency that’s not really needed anymore. And that brings us into the topic of some best practices. Since React will transpile down to a level of javascript that all the browsers can use, we are free to use all the latest ES6 javascript functions (though they occasionally need a pollyfill). Fetch replaces JQuery’s AJAX request function. As you can see in our above example, the syntax is very simple, and uses Javascript’s new promise feature (fetch is asynchronous). Speaking of new ES6 ways of doing things, for those used to traditional javascript, this function syntax will look pretty unfamiliar. The first strange syntax would probably be ‘const’. ES6 js introduces two new variable keywords, const and let. Let is for those variables that will eventually change. Const is for ones that won’t change. Next you’ll see the actual function declaration (it’s called an arrow function for obvious reasons). getData is the name of the function, url is what is being passed (there can be multiple parameters) and the arrow syntax means that it’s going to be a function (and if it’s in a class, it’ll autobind that function to the class it’s in) *I think* Finally, we can talk about styles.
- #13 A/K Boom. Styles. All inline without the possibility of ever leaking
- #14 B
- #15 B
- #16 B Link to pom example: https://github.com/Oakland-University/react-portlet/blob/master/pom.xml#L333
- #17 B
- #18 A/K React-MDL - Check out your libraries before you use them Bad backend - We worked for months with a bad backend then had to redo everything because reasons ADA Compliance - Make sure you do this. We’re currently reworking some stuff to be more compliant
- #19 All three https://github.com/facebook/react/wiki/Complementary-Tools https://github.com/prettier/prettier https://github.com/mxw/vim-jsx https://github.com/jelera/vim-javascript-syntax https://github.com/facebookincubator/create-react-app https://yarnpkg.com/ https://flow.org/ https://facebook.github.io/jest/