Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How Reactive Programming can help reduce code s...

How Reactive Programming can help reduce code spaghetti

Presented at http://mloc-js.com/2015/. When applications become large enough, complexity arises. Some of it is accidental complexity, which programmers often identify and know how to fix. On the other hand, essential complexity is unavoidable and hard to handle. Reactive Programming has been praised lately for its power in event-driven problems, but it has more aspects which make it useful in your codebase. We will see how the reactive pattern can help organize essential complexity and produce separation of concerns.

André Staltz

June 18, 2015
Tweet

More Decks by André Staltz

Other Decks in Programming

Transcript

  1. InputStream fileInputStream = new FileInputStream(FILE_PATH); BufferedReader bufferedReader = new BufferedReader(

    new InputStreamReader(fileInputStream) ); String line=""; while((line = bufferedReader.readLine()) != null){ System.out.println(line); } Accidental complexity
  2. // speaker.js showSlide1(); showSlide2(); showSlide3(); // ... showLastSlide(); for (var

    i = 0; i < audience.length; i++) { audience[i].goGetCoffee(); }
  3. // participant1.js import {speaker} from 'speaker.js';
 speaker.addEventListener('speechEnd', function() { self.goGetCoffee();

    }); // participant2.js speaker.addEventListener('speechEnd', function() { self.tweet('Pretty decent presentation'); });
  4. Passive Reactive How does it work? Find usages Look inside

    What does it affect? Look inside Find usages
  5. Passive Reactive How does it work? Find usages Look inside

    What does it affect? Look inside Find usages
  6. How does it work? Reactive: look inside What does it

    depend on? Passive: unaware of the dependency Passively Reactive: 
 the best of two worlds
  7. // login-page.js import * as Analytics from 'analytics';
 var loginButton

    = document.querySelector(‘.login'); loginButton.addEventListener('click', () => { Analytics.sendEvent('User clicked login button'); });
  8. // analytics.js function sendEvent(eventMessage) { // ... } export default

    function inject(loginPage) { loginPage.loginButtonClicks.listen(() => { sendEvent('User clicked login button'); }); }