SlideShare a Scribd company logo

Reactions: Making Things Simpler with React and Flux

A talk about heuristics, simplicity, and the React/Flux mindset from Code on the Beach 2015. The slide notes contain my talking points.

1 of 39
Download to read offline
Reactions
Making Things Simpler with React & Flux
Software Engineer & University Liaison at feature[23]
Graduate of Florida State and North Florida with respective
degrees in Music and Computing
Prior professions include martial arts instructor, fishing guide,
touring guitarist, and I am still regularly involved in
professional drinking
Today’s Focus…
Heuristics
JavaScript
“JavaScript is the heuristic that no matter how amazing of a programmer you
think you are, you are… “Uncaught TypeError: undefined is not a function.
Reactions: Making Things Simpler with React and Flux

Recommended

LeapMotion for Web with React and Flux
LeapMotion for Web with React and FluxLeapMotion for Web with React and Flux
LeapMotion for Web with React and FluxLaura Moore
 
Lec1 - Design and its steps in Digital Designing
Lec1 - Design and its steps in Digital DesigningLec1 - Design and its steps in Digital Designing
Lec1 - Design and its steps in Digital DesigningMuhammad Salman
 
Lecture 2 Teaching Digital Technologies 2016
Lecture 2 Teaching Digital Technologies 2016Lecture 2 Teaching Digital Technologies 2016
Lecture 2 Teaching Digital Technologies 2016Jason Zagami
 
Computational Thinking
Computational ThinkingComputational Thinking
Computational ThinkingJason Zagami
 
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)
The Complexity Curve: How to Design for Simplicity (SXSW, March 2012)Dave Hogue
 

More Related Content

Recently uploaded

Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019VICTOR MAESTRE RAMIREZ
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfssuser82c38d
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfssuser82c38d
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Dmitry Zinoviev
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Jeffrey Haguewood
 
What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?NYGGS Automation Suite
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCIOWomenMagazine
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!Anthony Dahanne
 
Globus for System Administrators
Globus for System AdministratorsGlobus for System Administrators
Globus for System AdministratorsGlobus
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flinkconfluent
 
The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThousandEyes
 
Passbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentPassbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentThierry Gayet
 
Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!alttaskcom
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsSprings
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...syedfaisal759877
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxMindInventory
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureHironori Washizaki
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio, Inc.
 

Recently uploaded (20)

Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdf
 
eLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdfeLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdf
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdf
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)
 
What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdf
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!
 
Globus for System Administrators
Globus for System AdministratorsGlobus for System Administrators
Globus for System Administrators
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flink
 
The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and Takeaways
 
Passbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentPassbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managment
 
Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and Cons
 
2024 Trends Transforming Enterprise Resource Planning
2024 Trends Transforming Enterprise Resource Planning2024 Trends Transforming Enterprise Resource Planning
2024 Trends Transforming Enterprise Resource Planning
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptx
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
 

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Reactions: Making Things Simpler with React and Flux

Editor's Notes

  1. So, I’ve been a software engineer at feature[23] for about three years now, and I also do quite a bit of work with UNF, helping bridge the gap between the academic and the real world when it comes to Software Engineering. I have two degrees… one that makes money, and one that doesn’t… I’ll let you figure out which is which. I have previously worked as a martial arts instructor, fishing guide, touring musician, and I’m still active in the beer industry.
  2. So, what are we going to talk about today? Web Development. Let’s ask Old Man Developer what he thinks about Web Development. Old Man Developer holds such opinions because that’s either what Best Practices say, or he’s formed his own set of Heuristics based on his experiences in Web Development. Regardless of your current opinions and heuristics on Web Development, I’m hoping that today’s talk has a positive influence on them, or at least gets you thinking a bit differently.
  3. To kick things off, let’s briefly talk about Heuristics, as they'll be an integral part of today's talk. Heuristics are defined as using experience to learn and improve They’re generally referred to as a rules of thumb, again, because they are primarily based on prior experience or knowledge and this means that they may not always provide the most optimal solutions... But they’re typically the best we can do, given our experiences. Aside from all the technical reading and research we do, or should do, all we really end up with in the wild are our own heuristics. Today, I’m going to present what I think are some good heuristics in JavaScript Development, and development in general for that matter But before we get too far into the high brow philosophical stuff, let’s all put on our collective dunce cap and enter the wacky world of JavaScript
  4. I could go on and on about all the ridiculous mishaps that you’ll find in this “programming language” …But I’m not going to waste your time making light of JavaScript’s shortcomings…. Of course I am. Now is the time for the requisite JavaScript bashing.
  5. JavaScript is much like a Japanese game show, in that you might actually die while participating. The danger is seriously palpable. In describing epic JavaScript fails, Brendan Eich used the term “footgun” to describe a fictitious firearm that is presumably attached to one’s foot, with the end result being a podiatric disaster. So, instead of a game show, you can think of JavaScript as this George Miller-esque dystopian wasteland where everyone is strapped with two footguns, headmines, and brain launchers. Maybe it’s more like the Saw movies? Whatever. If you haven’t already, visit http://wtfjs.com/
  6. Anyone know what this code will do? ??? It will fail miserably. Is it obvious why it will fail? Yes, r is style a property, it's actually defines the radius for SVG elements. This fails because getElementsByClassName returns a NodeList. NodeLists are one of those really nifty things in JavaScript called “array-like” objects. You get properties like length, but since they don't inherit from Array's prototype, you can't call Array methods on them. You have to iterate them with things like for and while loops.
  7. So, what inevitably happens on every project, is some well intentioned and highly motivated young developer charges in and says… “I know, we’ll add that hot new JavaScript framework to our application and all of our problems will be solved, we will deliver way ahead of schedule, and it will be SO much fun to code with!!!” Meanwhile, the poor team lead, who should have been guiding the direction of the project based on his or her heuristics, is then passenger to Mr. Eich’s Wild ride, until the lone person in the building that remotely understands JavaScript saves the day… …or the client pulls the plug on the project.
  8. And when you eventually ship your product with JavaScript, and it’s time to celebrate, JavaScript responds to your elation with a pride obliterating pimpslap as your application crumbles in production because… well… JavaScript.
  9. So why in the hell am I up here arguing for more JavaScript? Because JavaScript isn’t really the problem, it’s just a comical scapegoat. The real problem is Complexity in your JS Applications, and the answer is moving toward Simplicity.
  10. In his talk, Simple Made Easy, Rich Hickey states that Complexity undermines understanding. He also states that simple is not equivalent to easy. Simplicity does equate to a lessening of cognitive load, which has the invaluable result of better decision making. The more esoteric the concepts at play, the less your teammates will be able to $digest them (no pun intended) as a whole. Or is that $apply? I'm really aiming to avoid dumping on other frameworks today ($digest is just too easy) Unless your team is made up of five Jon Skeets, I imagine you have a team lead, and engineers of varying skill levels There are probably some juniors on your team You expect them to deliver value But you've chosen a framework loaded with esoteric concepts in a language that is about as reliable as it is good at dealing with Dates and Math Why not give them something that is simple? Something they can have confidence coding with? Better decisions upfront will yield another invaluable result, which is reduction of technical debt. This is even more invaluable than the first, because how do we even measure technical debt? I'm legitimately asking the question, because I want you to think more about it throughout the talk. Acceptable amount, how you combat it, etc. I hope to show that the React/Flux mindset will actually correlate to less tech debt, better maintainability, and a host of other amazing benefits.
  11. A good heuristic for gauging the level of simplicity is the amount of business language in the code. Does your code speak the language of the business? Or the language of the abstraction?
  12. So… it’s a given that simple is better, but what is the common cause of Complexity?
  13. Abstractions. This may seem counter-intuitive, since this is primarily what we do every day, but I’ve come up with a few heuristics around abstractions that should highlight the potential risks associated with them. I think it’s worth noting that I’m mainly referring to Black Box abstractions, or inextensible abstractions. I’m sure everyone here is familiar with The Law of Leaky Abstractions.   It states that "All non-trivial abstractions, to some degree, are leaky" I like the fact that he states "non-trivial" here, because I'm not railing against the micro level, rather the macro level. Frameworks and larger libraries that are potentially abstracting the wrong things. Obviously this is very subjective, so let me define some heuristics based on my experience, and then argue with me after my talk. 
  14. The heuristic here is that too many abstractions is generally a bad choice. I think this one is less controversial, as we’ve all heard the phrase and experienced “yet another layer of abstraction” at some point. What’s worth noting here, is that in our effort to achieve Simplicity, we must temper the level of abstraction to an appropriate level, otherwise we’re creating an intractable number of abstractions and the nasty byproduct is increased cognitive load.
  15. This should really say, “black box abstractions” can be limiting. If you didn’t create the abstraction, it’s likely difficult to alter or extend. You will inevitably run into the “framework doesn’t support it” scenario, and now you have to start hacking. You are crippled by the set of operations that the abstraction provides to you. Templating Engines are an easy example, because they are, in most cases, limited in the scope of their operations.
  16. This heuristic is derived from the first, in that it draws a line in the sand as far as “too many abstractions” goes. Effectively, you have to use your own heuristics to determine what is or isn’t worth relinquishing control of. You’re inviting risk into the project when doing so, but given enough experience, you should be able to make a sound decision. Let’s look at some candidates for good abstractions.
  17. Seems like a fine abstraction to me. For the most part, data persistence is worthy of abstraction as it is generally the same set of functionality, regardless of the medium. If it’s Postgres, MySQL, NOSQL, whatever, you’re probably going to have the same sets of operations across the board, so some abstraction here is fine… But even as I accept this as a worthy abstraction, it’s common to fight with your ORMs.
  18. Rendering is another good candidate. Similar to data fetching, the abstraction is sound in that it’s almost universally the same ideas at play, they just vary by each device’s implementation. I could probably make a good Internet Explorer joke here, but we’re on Windows 10 now, so go Spartan, Edge, whatever.
  19. To me, this is the line in the sand as far as the heuristic goes. Surrendering control over your Data Flow is a bad idea, at least in my experience. How data flows is the heart of your application. I posit that there’s a direct correlation between data flow needs and your client’s needs, in that both will be unique from project to project. Effectively, there is no one size fits all when it comes to data flow. I think this underlies the point of things like polyglot persistence. While you’re accepting numerous data fetching and persistence abstractions, you’re not relinquishing control over how your data arrives or flows from persistence.
  20. This is generally what we do as programmers. We move bits around. We try, and usually fail, to model the real world in our code. It’s generally difficult to do, but it doesn’t hurt to look to the real world for examples. Especially when our goal is to make things Simpler. Can anyone in here give me an example of two-way data binding in nature? What about unidirectional data flows? Rivers? Streams? The Water Cycle?
  21. You have some data, you manipulate that data, notify the presentation layer of its changes, and the User sees those changes. This is a watered down version of Smalltalk MVC, where the View observed changes directly from the Model. Of course, this was easier back then, because it was on desktop devices, not distributed across the Web. What are we really doing with client-side applications? We’re building applications in little desktop environments. Why should it be any harder than this?
  22. Flux and React are basically doing the same thing if we view them at the 30k foot level. Flux manages your data flow, and notifies your presentation layer, in this case, React, of changes in the model.
  23. I say “in this case”, because you can use the Flux pattern with anything. Angular, Ember, or vanilla JS. It’s really just letting you make decisions about how your data flow is managed.
  24. We get data from somewhere, remember, a data fetching abstraction is ok… And we then feed that data into our data flow. You make the decisions about how your data should be altered, and how that data will make its way to the presentation layer. You should always own this code, and it should be simple to reason about. If you own your data flow, and understand it at all times, it’s less likely that you’ll introduce bugs or run into “the framework doesn’t support it” scenarios.
  25. So, let’s take a quick look at the Flux pattern before we dive into the code.
  26. To tie the pattern together, we need to introduce Actions Actions are just Commands Typically, they are explicitly named (again, think DDD, Ubiquitous Language, declarative and well named functions) During the execution of the command, calls may be made to Web APIs via AJAX, or simply pass some data along to a Store The Action’s type will be picked up by Stores that care to respond to it, and the Store can respond to the changes associated with that Action, and potentially (usually) emit that some data changed
  27. The core concepts at play here are unidirectional data flow (in both Flux and React) Where mutations are triggered by semantic/declaratively named Actions Stores expose their data through public getters, but don’t allow you to alter it directly, this is always done through Actions and the Dispatcher. Basically, you’ve got a nice DDD/CQRS pattern for your JavaScript application. Events, Flow/Ovbserver Sync
  28. Alright, time for teh codez. Before I start, anyone have any questions up to this point?
  29. While you’re able to control the flow of your data in your application with Flux, you are surrendering the way your data flows in terms of presentation to React. Now, React still relies on unidirectional data flow, so this isn’t a painful concept to adopt. And even though you’re leaning on React as an abstraction, you’re still able to make decisions about how your data will flow through your UI in how you structure your Components. What I find more interesting here, is keeping the separation of State clear. Whether or not something belongs in a Flux Store or in a React Component is a decision left to the developer, but one worth noting. A piece of State may transition between the two based on changes in requirements or code. A quick example would be whether or not a checkbox is checked. Initially, I would call this a View concern, and leave it at that. But this can easily become an Application State concern when you need to persist the fact that the selection was made, or have that checkbox pre-selected the next time the page loads.
  30. Commit, Revert, Reset, Rollback Amazing development and debugging experience Highly recommend both talks