React + Drupal for Better UX
•Download as PPTX, PDF•
1 like•214 views
Amory explains the ins and outs of how the powers of Drupal and React combine to create an awesome User Experience.
Recommended
More Related Content
Similar to React + Drupal for Better UX
Similar to React + Drupal for Better UX (20)
Recently uploaded
Recently uploaded (20)
React + Drupal for Better UX
- 1. meltmedia React + Drupal for Better UX A Texas Camp Presentation by: Amory Borromeo June 4, 2017
- 2. Oh hello... I’m Amory! Amory Borromeo Business Analyst Supervisor meltmedia ● Business Analyst ● UX Advocate ● React Fan ● Stakeholder Wrangler @AmoryBorromeo | meltmedia #TexasCamp2017
- 3. What are we trying to solve? What is React? React Basics Making React work in Drupal Here we go! @AmoryBorromeo | #TexasCamp2017
- 4. What are we trying to solve? @AmoryBorromeo | #TexasCamp2017
- 5. @AmoryBorromeo | #TexasCamp2017 UX Challenges ● Good UX shouldn’t need explaining ● Not intuitive ● Needs training ● Confusing ● Bad usability The Drupal we all know, but love?
- 6. @AmoryBorromeo | #TexasCamp2017 UI Improvements ● Admin UI we are building includes: ○ Standard iconography ○ Intuitive features ○ Immediate visibility ○ Interactive display A better admin experience
- 7. What is React? @AmoryBorromeo | #TexasCamp2017
- 8. • Open-source JavaScript library • Maintained by Facebook, Instagram, and the community • Used on Netflix, Imgur, Buffer, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, and others • Allows us to develop web applications that use data that tends to change over time, all without having to reload the page. Super High-level What is React? @AmoryBorromeo | #TexasCamp2017
- 9. ● It is a JavaScript library ● rerender specific content only without reloading the page ● Fast, flexible and scalable = better performance What to remember What is React? @AmoryBorromeo | #TexasCamp2017
- 10. Website/Apps Using React @AmoryBorromeo | #TexasCamp2017
- 11. Who is using React? @AmoryBorromeo | #TexasCamp2017 ● Ever added an emoji reaction to a thread? That’s react.js. ● These guys actually created React.js, so it’s safe to say it’s stable and will be around for some time.
- 12. Who is using React? @AmoryBorromeo | #TexasCamp2017 ● Naturally, as part of the Facebook family, Instagram also uses React for their UI ● Nearly any time a user engages with the app, it is using React to rerender the view
- 13. Who is using React? @AmoryBorromeo | #TexasCamp2017 ● User Engages in search box = React renders a filtered list ● User moves the map around = React rerenders that filtered list ● React is ideal for performance, particularly when you’re pulling from a database
- 14. Who is using React? @AmoryBorromeo | #TexasCamp2017 ● Again, User Engagement drives a change in view, which leverages React ● There are also screens where some kind of update needs to happen, i.e. how far away your food is ● React can update the little car on the map and how many minutes away the driver is without having to reload the page
- 15. Who is using React? @AmoryBorromeo | #TexasCamp2017 ● Pinterest pulls images from massive database– need React for website performance ● React features at play: ○ Updating search criteria = only results window updates ○ Add a filter to search= only results window updates ○ Image within results window rerenders all of the following results to include similar images
- 16. Who is using React? @AmoryBorromeo | #TexasCamp2017 ● After watching a show or movie on Netflix, the menu updates to provide you with a list of similar selections ● “Because you watched …” section leverages React
- 17. @AmoryBorromeo | #TexasCamp2017 React Basics Now you’re experts at spotting cases of React in action, but let’s dive a little deeper to understand the basics of React
- 19. React Basics ● React is built into components ● Here is an example of a React application built into a site: ○ This is an eCommerce example where there are groupings of products with a name and a price, as well as functionality ○ In this example, the red product name indicates that the product is out of stock
- 20. React Basics Anatomy of a React App
- 21. React Basics ● Breakdown of app into its components: ○ Whole container shown in orange = FilterProductTable ○ Blue box (search) receives all user input (i.e. all the pieces that will change what data is rendered) ○ Green product table box displays and filters the data collection based on the user input, if any, from the Blue Search Bar
- 22. React Basics ● Breakdown of app into its components: ○ Turquoise box = Product Category Row which displays a category heading ○ Red box = product row which displays the product name and price for the item
- 23. React Basics JSX JSX adds XML syntax to JavaScript which is then translated to JS
- 24. React Basics JSX adds XML syntax to JavaScript which is then translated to JS● React uses JavaScript XML or JSX ● JSX is a preprocessor step that adds XML syntax to JavaScript. ○ You can use React without JSX but JSX makes React more elegant ● Like XML, JSX tags have a tag name, attributes, and children.
- 25. React Basics JSX adds XML syntax to JavaScript which is then translated to JS ● If an attribute value is enclosed in quotes, the value is a string ● Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.
- 26. @AmoryBorromeo | #TexasCamp2017 How Drupal & React work together
- 27. @AmoryBorromeo | #TexasCamp2017 ● Drupal is essentially wearing React lipstick ● React is literally a layer embedded into a Drupal page ● Lots of interest in Headlines/Decoupled Drupal at the moment, so we’ll likely continue to see improvements and more development on this front
- 28. @AmoryBorromeo | #TexasCamp2017 ● Drupal + React- The workflow view: ○ Build your React components with JSX ○ For larger React projects, you will want to use a JavaScript module bundler, like webpack. ■ This tool takes all your React components that have been broken up into many files and compiles it into one JavaScript file
- 29. @AmoryBorromeo | #TexasCamp2017 ● Drupal + React- The workflow view: ○ Feed that JS File to Drupal ○ Voilá! React components on your Drupal Site ● Now you have a choice to embed the React app into your Drupal site onto a page, or load it on its own and have it talk to Drupal via REST API or the web service of your choice
- 30. Virtual DOM Example How does it work? React keeps track of elements in a virtual DOM tree. When a component’s state changes, it figures out the differences. Finally, it only rebuilds the DOM elements affected. @AmoryBorromeo | #TexasCamp2017 React Basics
- 31. Virtual DOM Example Let’s break this down: ● On top, we have a representation of Virtual DOM that React manages. ● On the bottom, we see the browser DOM ● React detects that a component’s state was changed via this.setState( ) @AmoryBorromeo | #TexasCamp2017 React Basics
- 32. Virtual DOM Example Let’s break this down: ● It calculates the difference between states. This may affect the child components that receive properties from the parent component @AmoryBorromeo | #TexasCamp2017 React Basics
- 33. Virtual DOM Example Let’s break this down: ● Finally, React knows that it only needs to update the DOM elements that actually changed. It doesn’t rebuild the entire DOM tree. @AmoryBorromeo | #TexasCamp2017 React Basics
- 34. Making React work in Drupal @AmoryBorromeo | #TexasCamp2017
- 35. @AmoryBorromeo | #TexasCamp2017 We know a lot of companies use this JS Library to create fast, scalable components using JSX. We can use it with Drupal by building out our React Components and bundling them into JS. By doing this, React will only rerender the pieces of DOM that are actually affected. Let’s see how it actually works with Drupal.
- 36. Quote Request Webform @AmoryBorromeo | #TexasCamp2017 Let’s analyze this from a user's perspective ● Where do I start? ● Limitations? ● Confusing order ● No priority
- 37. Quote Request Webform @AmoryBorromeo | #TexasCamp2017 Imagine a complex form that allows a user to engages with parent and child data ● This example is what data structure on a Standard Drupal webform would look like
- 38. Quote Request Webform @AmoryBorromeo | #TexasCamp2017 ● Here, the user selects the “Parent Service” ● On the right, the user then selects an exam by service
- 39. Quote Request Webform @AmoryBorromeo | #TexasCamp2017 ● What is not illustrated here is that you can only select certain exams based on the parent exam ○ Similarly, you can only mix and match certain exams ○ Once you select one, the others should dynamically update to no longer be selectable
- 40. Quote Request Webform @AmoryBorromeo | #TexasCamp2017 ● Then we have the little insurance blip at the bottom ○ This setup makes for poor and confusing user experience
- 41. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform We decided to use a little React to clean it up and make engagement more intuitive. Here, the user is only shown the parent services to start (Progressive Disclosure)
- 42. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Step 1 ● Progressive disclosure ● Pick an exam to start ● Then continue
- 43. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Selected state active ● The user selects one of the services, such as “Mammogram,” and continues
- 44. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Step 2 ● Choose an exam ● The entire page isn’t reloading, just this block ● And now the user is shown the child exam options based on the selected “parent” service
- 45. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Step 2 ● Save then continue ● The user selects the exam “Diagnostic” and the other option, Screening, is no longer available to be selected
- 46. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Step 2 ● The user selects “Save” to engage this selection and return to the parent services or selects cancel to navigate back to the parent services without a selection made
- 47. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Step 3 ● With a selection made, the user returns to the parent view with only the remaining available options ○ Additionally, with a diagnostic Mammogram procedure made, an ultrasound is also required
- 48. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Step 3 ● That procedure has automatically been selected for the user, as a result of the mammogram > diagnostic service being true
- 49. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Step 3 ● If we were to navigate deeper into any of the parent services, the nested exams would also show what is available or unavailable to be selected in conjunction with the other selection ● One all of the selections are made, click Continue to navigate to the unrelated fields
- 50. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Final Step ● Insurance ● Personal Data ● Done...
- 51. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Final Step ● Now the block rerenders again and we have a more traditional form that allows the user to enter insurance and personal details
- 52. @AmoryBorromeo | #TexasCamp2017 Redesigned Webform Final Step ● When we hit “request a quote” my form now transmits all the collected information using standard Drupal functionality ● And we’re done!
- 53. Now, it’s time to wrap/meme this sh*t up! @AmoryBorromeo | #TexasCamp2017
- 54. ● Better UX! ● Performance ○ We hit the database and update without having to rerender the whole page ● React components are extremely reusable ● Makes it easy to make your own code very easy to refactor and iterate on ● Maintainable because we’re working with components ● Barrier of entry is low, so it’s easy to get into The Good... The Good
- 55. ● Managing “States” in large applications is still a big issue ○ Some solutions like Redux and Flux help with this ● Writing in JSX is a bit difficult to get used to ● Conflicting opinions on how CSS is handled The Bad... The Bad
- 56. ● Complex forms and user engagement without React are ugly ● Debugging process is different than what we’re used to with Drupal ● Too much of a good thing ○ Don’t use React for everything because it can be a bit of overkill ○ If you aren’t changing things often (i.e. filtering/search, etc.) you probably don’t need it The Ugly... The Ugly
- 57. Thanks, you’ve been awesome. Now go React! @AmoryBorromeo | Amory.Borromeo@meltmedia.com
Editor's Notes
- Welcome! Let’s learn about how to make a better UX by coupling React and Drupal.
- I’m Amory and I run the Business Analyst team at melt. My role cares a lot about UX regardless of the CMS platform, so I’m naturally a big fan of React. As a core team member for our Drupal LOB, I have a lot of autonomy, but i recognize not all of us have that luxury. So I’m going to arm you with what you need to make a case for using React.
- After this session you should walk away and be able to know how and when to incorporate React into your Drupal project. I’ll even arm you with some talking points to help make the case for it. We’ll talk about: What the problem we’re solving is What React is and what you need to know about it Then, how to use it with Drupal
- What we’re trying to solve
- UX Challenges in Drupal How would you explain the admin panel and content authoring to a customer new to Drupal? Good UX is something that doesn’t need to be explained. It’s intuitive and doesn’t need to be explained. If you have to write a training document, it’s prob too confusing and React may be able to help you. bad drupal - OTB; customer challenges, usability, lots of training, not intuitive, technical = why we're building a better interface; showing what we're doing.
- Our Future UI This is an Admin UI we are building using React. Here you have toolbars with intuitive iconography and functionality. (Right and left) You have an interactive display that provides instant gratification of preview state. (center) Edits are easy and straightforward. It’s still Drupal, but with some lipstick. User interacts with toolbar and React updates the canvas. User interacts with the canvas and the toolbar rerenders.
- Okay, So what is React?
- React at a High Level Essentially - React is a flexible, scalable JS library we can use to build out UIs. It was built by Facebook and is maintained by Facebook, instagram and the community A lot of companies use it like Imgur, Seatgeek, Feedly and more We can use it for small projects like embedding a dynamic form or use it across an entire site to improve the entire UI. The idea is that we leverage React to render new content on a portion of the page, without having to reload the entire page.
- The important take aways It’s a JS library It’s a flexible, scalable system, that’s fast (e.g. better performance) It allows us to render content without having to reload the page
- I bet you already interact with React a lot Let’s look at some of the companies using React and how.
- Duh...FB Uses React
- ...and IG Uses React
- It looks like the entire AirBnB site is built on react!
- UberEats: Wanna build a Mobile app? React Native has you covered All of Uber’s apps use React, but let’s look at how UberEats uses React.
- I’m a Pinterest Junkie, so naturally I’d include this one. (we’ll leave it for when Sebi presents this next :) )
- And even if you have no idea what I’m talking about with Pinterest, I’m sure you’ve engaged with Netflix at some point.
- Okay, so now you’re experts at spotting cases of React in Action, but let’s dive a little deeper to understand the basics of React
- React Basics: Component Example Remember how I said React is scalable? That’s because it’s built out into components This example is pulled from Facebook, https://facebook.github.io/react/docs/thinking-in-react.html , which was a great resources to get me started leaning React Here is an example of a react application built into a site. Here we have an eCommerce example where there are groupings of products with a name and a price, as well as a search functionality. In this example, the red product name indicates that the product is out of stock. There is also an option to show only products in stock.
- React Basics: Component Example Remember how I said React is scalable? That’s because it’s built out into components This example is pulled from Facebook, https://facebook.github.io/react/docs/thinking-in-react.html , which was a great resources to get me started leaning React Here is an example of a react application built into a site. Here we have an eCommerce example where there are groupings of products with a name and a price, as well as a search functionality. In this example, the red product name indicates that the product is out of stock. There is also an option to show only products in stock.
- React Basics: Anatomy of a React App Now let’s breakdown that application into its components The whole container shown in orange is the FilterableProductTable The Blue box or Search bar receives all the user input (e.g. all the pieces that will change what data is rendered) Then there is a Green Product table box, which displays and filters the data collection based on that user input, if any, from the Blue Search Bar Within the Product table, there are Turquoise Product Category Row which displays a category heading Finally, we have each product Row, shown in the red boxes, that displays the product name and price for each item In summary, this example consists of five react components.
- React Basics: Anatomy of a React App Now let’s breakdown that application into its components The whole container shown in orange is the FilterableProductTable The Blue box or Search bar receives all the user input (e.g. all the pieces that will change what data is rendered) Then there is a Green Product table box, which displays and filters the data collection based on that user input, if any, from the Blue Search Bar Within the Product table, there are Turquoise Product Category Row which displays a category heading Finally, we have each product Row, shown in the red boxes, that displays the product name and price for each item In summary, this example consists of five react components.
- React Basics: Anatomy of a React App Now let’s breakdown that application into its components The whole container shown in orange is the FilterableProductTable The Blue box or Search bar receives all the user input (e.g. all the pieces that will change what data is rendered) Then there is a Green Product table box, which displays and filters the data collection based on that user input, if any, from the Blue Search Bar Within the Product table, there are Turquoise Product Category Row which displays a category heading Finally, we have each product Row, shown in the red boxes, that displays the product name and price for each item In summary, this example consists of five react components.
- React Basics: JSX React uses this language called JavaScript XML or JSX JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression. Here is an example of JSX vs JS The top section of JSX has this weird HTML thing nested right in the function; whereas in the bottom JS example, we have to tell it to DisplayName, then render, and include a div and the message within the created element. JSX is clearly much more readable and save us a little bit of code You can imagine how this would be impactful when we’re working on something larger and more complex than just a “hello world” message.
- React Basics: JSX React uses this language called JavaScript XML or JSX JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression. Here is an example of JSX vs JS The top section of JSX has this weird HTML thing nested right in the function; whereas in the bottom JS example, we have to tell it to DisplayName, then render, and include a div and the message within the created element. JSX is clearly much more readable and save us a little bit of code You can imagine how this would be impactful when we’re working on something larger and more complex than just a “hello world” message.
- React Basics: JSX React uses this language called JavaScript XML or JSX JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression. Here is an example of JSX vs JS The top section of JSX has this weird HTML thing nested right in the function; whereas in the bottom JS example, we have to tell it to DisplayName, then render, and include a div and the message within the created element. JSX is clearly much more readable and save us a little bit of code You can imagine how this would be impactful when we’re working on something larger and more complex than just a “hello world” message.
- So now we know that React is a JS library we can leverage for a better UX just like Netflix and AirBnB. And we know that we can build components using JSX, which is JS with XML syntax that gets translated into JS, But how do Drupal and React play together?
- Drupal + React - Super high level view: Drupal is essentially wearing React lipstick React is literally a layer embedded onto a Drupal page Lots of interest in Headless/Decoupled Drupal at the moment, so we’ll likely continue to see improvements and more development on this front
- Drupal + React - The the workflow view: Build your React components with JSX For larger react projects, you will want to use a javascript module bundler like webpack. This nifty tool takes all your react components that have been broken up into many files and compiles it into one javascript file. Feed that JS file to Drupal Voilà - React Components on your Drupal Site Now you have a choice to embed the react app into your drupal site onto a page, or load it on its own and have it talk to Drupal via rest api or web service of your choice.
- Drupal + React - The the workflow view: Build your React components with JSX For larger react projects, you will want to use a javascript module bundler like webpack. This nifty tool takes all your react components that have been broken up into many files and compiles it into one javascript file. Feed that JS file to Drupal Voilà - React Components on your Drupal Site Now you have a choice to embed the react app into your drupal site onto a page, or load it on its own and have it talk to Drupal via rest api or web service of your choice.
- React Basics: the DOM To help explain how React works let’s look at a page DOM (Document Object Model) The HTML DOM is constructed as a tree of Objects On the top we have a representation of the Virtual DOM that React manages. On the bottom we see the browser DOM. React detects that a component’s state was changed via this.setState() It calculates the difference between states. This may affect child components that receive properties from the parent component Finally, React knows that it only needs to update the DOM elements that actually changed. It doesn’t rebuild the entire DOM tree. (Yuck, slow)
- React Basics: the DOM To help explain how React works let’s look at a page DOM (Document Object Model) The HTML DOM is constructed as a tree of Objects On the top we have a representation of the Virtual DOM that React manages. On the bottom we see the browser DOM. React detects that a component’s state was changed via this.setState() It calculates the difference between states. This may affect child components that receive properties from the parent component Finally, React knows that it only needs to update the DOM elements that actually changed. It doesn’t rebuild the entire DOM tree. (Yuck, slow)
- React Basics: the DOM To help explain how React works let’s look at a page DOM (Document Object Model) The HTML DOM is constructed as a tree of Objects On the top we have a representation of the Virtual DOM that React manages. On the bottom we see the browser DOM. React detects that a component’s state was changed via this.setState() It calculates the difference between states. This may affect child components that receive properties from the parent component Finally, React knows that it only needs to update the DOM elements that actually changed. It doesn’t rebuild the entire DOM tree. (Yuck, slow)
- React Basics: the DOM To help explain how React works let’s look at a page DOM (Document Object Model) The HTML DOM is constructed as a tree of Objects On the top we have a representation of the Virtual DOM that React manages. On the bottom we see the browser DOM. React detects that a component’s state was changed via this.setState() It calculates the difference between states. This may affect child components that receive properties from the parent component Finally, React knows that it only needs to update the DOM elements that actually changed. It doesn’t rebuild the entire DOM tree. (Yuck, slow)
- Right, so now we know: A lot of companies use this JS Library to create fast, scalable components using JSX And we can use it with Drupal by building out our React Components and bundling into JS And by doing that, React will only rerender the pieces of the DOM that are actually affected, But can you help me understand how that really works with Drupal?
- Right, so now we know: A lot of companies use this JS Library to create fast, scalable components using JSX And we can use it with Drupal by building out our React Components and bundling into JS And by doing that, React will only rerender the pieces of the DOM that are actually affected, But can you help me understand how that really works with Drupal?
- Drupal + React Example: Imagine a complex form that allows a user to engage with parent and children data. This example is what that data structure on a standard Drupal webform would look like. Here the user selects the Parent “Service” On the right, the user then selects an exam by service What is not easily illustrated here, is that you can only select certain exams based on the parent exam, and similarly, you can only mix and match certain exams Once you select one, the others should dynamically update to no longer be selectable Then we have this little Insurance blip at the bottom This setup makes for a poor and confusing user experience
- Drupal + React Example: Imagine a complex form that allows a user to engage with parent and children data. This example is what that data structure on a standard Drupal webform would look like. Here the user selects the Parent “Service” On the right, the user then selects an exam by service What is not easily illustrated here, is that you can only select certain exams based on the parent exam, and similarly, you can only mix and match certain exams Once you select one, the others should dynamically update to no longer be selectable Then we have this little Insurance blip at the bottom This setup makes for a poor and confusing user experience
- Drupal + React Example: Imagine a complex form that allows a user to engage with parent and children data. This example is what that data structure on a standard Drupal webform would look like. Here the user selects the Parent “Service” On the right, the user then selects an exam by service What is not easily illustrated here, is that you can only select certain exams based on the parent exam, and similarly, you can only mix and match certain exams Once you select one, the others should dynamically update to no longer be selectable Then we have this little Insurance blip at the bottom This setup makes for a poor and confusing user experience
- Drupal + React Example: Imagine a complex form that allows a user to engage with parent and children data. This example is what that data structure on a standard Drupal webform would look like. Here the user selects the Parent “Service” On the right, the user then selects an exam by service What is not easily illustrated here, is that you can only select certain exams based on the parent exam, and similarly, you can only mix and match certain exams Once you select one, the others should dynamically update to no longer be selectable Then we have this little Insurance blip at the bottom This setup makes for a poor and confusing user experience
- Drupal + React Example: Imagine a complex form that allows a user to engage with parent and children data. This example is what that data structure on a standard Drupal webform would look like. Here the user selects the Parent “Service” On the right, the user then selects an exam by service What is not easily illustrated here, is that you can only select certain exams based on the parent exam, and similarly, you can only mix and match certain exams Once you select one, the others should dynamically update to no longer be selectable Then we have this little Insurance blip at the bottom This setup makes for a poor and confusing user experience
- Drupal + React Example: Step 1: So we decided to use a smidge of react to clean it up and make the engagement more intuitive Here the user is shown only the parent services to start (Progressive Disclosure) Continue
- Drupal + React Example: Step 1: So we decided to use a smidge of react to clean it up and make the engagement more intuitive Here the user is shown only the parent services to start (Progressive Disclosure) Continue
- Drupal + React Example: Active State of form (User Visual): The user selects one of the services, such as mammogram And continues
- Drupal + React Example: Step 2: The entire page isn’t reloading, just this block. And now the user is shown the child exam options based on the selected parent “service”
- Drupal + React Example: Step 2: The user selects the exam “Diagnostic” and the other option, Screening, is no longer available to be selected The user selects “Save” to engage this selection and return to the parent services or selects cancel to navigate back to the parent services without a selection made
- Drupal + React Example: Step 2: The user selects the exam “Diagnostic” and the other option, Screening, is no longer available to be selected The user selects “Save” to engage this selection and return to the parent services or selects cancel to navigate back to the parent services without a selection made
- Drupal + React Example: Step 3: With a selection made, the user returns to the parent view with only the remaining available options selectable Additionally, with a diagnostic Mammogram procedure made, an ultrasound is also required. That procedure has automatically been selected for the user, as a result of the mammogram>diagnostic service being true. If I were to navigate deeper into any of these parent services, the nested exams would also show was is available or unavailable to be selected in conjunction with the current selection. Once all of my selections are made, I hit the Continue button to navigate to the unrelated fields
- Drupal + React Example: Step 3: With a selection made, the user returns to the parent view with only the remaining available options selectable Additionally, with a diagnostic Mammogram procedure made, an ultrasound is also required. That procedure has automatically been selected for the user, as a result of the mammogram>diagnostic service being true. If I were to navigate deeper into any of these parent services, the nested exams would also show was is available or unavailable to be selected in conjunction with the current selection. Once all of my selections are made, I hit the Continue button to navigate to the unrelated fields
- Drupal + React Example: Step 3: With a selection made, the user returns to the parent view with only the remaining available options selectable Additionally, with a diagnostic Mammogram procedure made, an ultrasound is also required. That procedure has automatically been selected for the user, as a result of the mammogram>diagnostic service being true. If I were to navigate deeper into any of these parent services, the nested exams would also show was is available or unavailable to be selected in conjunction with the current selection. Once all of my selections are made, I hit the Continue button to navigate to the unrelated fields
- Drupal + React Example: Final step: Now the block rerenders again and I have a more traditional form that allows the user to enter insurance and personal details. When I hit “request a quote” my form now transmits all the collected information using standard Drupal functionality
- Drupal + React Example: Final step: Now the block rerenders again and I have a more traditional form that allows the user to enter insurance and personal details. When I hit “request a quote” my form now transmits all the collected information using standard Drupal functionality
- Drupal + React Example: Final step: Now the block rerenders again and I have a more traditional form that allows the user to enter insurance and personal details. When I hit “request a quote” my form now transmits all the collected information using standard Drupal functionality
- Okay, so now, Let’s recap
- Why we like it: Better UX Performance improvements = hitting database and updating without having to rerender whole page (Virtual DOM) Reusability/portability: React components are extremely reusable Refactorability: React tends to make your code very easy to refactor and iterate on. Much more maintainable b/c we’re dealing with components Barrier of entry low - easy to get into, know basic JS and HTML
- Recap: What we dislike about it: Biggest issue among developers is state management, particularly for larger projects Fortunately, some solutions like Redux and Flux help with this piece and there are lots of great resources available for each Writing in JSX can be a bit difficult to get used to And there are conflicting opinions on how CSS is handled
- Recap: The Ugly I actually don’t have much “ugly” to point out, but I really liked these gifs I suppose the ugly is complex forms and user engagement without using React Also, if something goes wrong in React, it’s a different debugging process than what we use for Drupal Even though React sounds amazing, there is such thing as too much of a good thing Don’t use React for everything because it can be a bit of overkill If you aren’t changing things often, e.g. user filtering/search, etc., you prob don’t need it E.g. don’t use a sledgehammer to hang a picture Or as Sebi would say, React is really awesome, but don’t go tattoo the React Logo on your baby. True story ! He said that to me once.
- Thanks for being awesome! Come grab some swag and reach out if you have any questions.