staltz / flux-challenge Goto Github PK

View Code? Open in Web Editor NEW

1.6K 47.0 209.0 11.33 MB

A frontend challenge to test UI architectures and solutions

License: MIT License

JavaScript 98.48% CSS 0.16% HTML 0.54% Makefile 0.01% Elm 0.19% TypeScript 0.42% Clojure 0.21%

flux-challenge's Introduction

Flux Challenge

Database reader of Sith lords

Background

You are Obi-Wan Kenobi's "IT" assistant at the Jedi Council, and your job is to create a User Interface for the Sith Database. Obi-Wan is travelling around the galaxy visiting many planets, doing an investigation. It is rumored that the homeworld of every Dark Jedi has a distinctive Sith emblem marked on their house where they were born/raised, and Obi-Wan wants to check if this rumor is true.

The Jedi Master requested you to make a dashboard-like UI showing a list of Sith lords sorted by apprenticeship (row N is the Sith Lord who was master of the Dark Jedi below at row N+1). The dashboard also shows at the top the current planet which Obi-Wan is visiting at the moment. The UI is supposed to verify if any of those Dark Jedis currently displayed on the list was born at the planet Obi-Wan is currently visiting, and if any, display that Dark Jedi in red.

Requirements

Data for current planet indicator comes from WebSocket connection to ws://localhost:4000 and is displayed at the top of the page.

Make requests to http://localhost:3000/dark-jedis/ to populate the list. The first request must be to get Darth Sidious: http://localhost:3000/dark-jedis/3616
- The HTTP response for one row tells the URL for the next row response.apprentice.url and the previous row response.master.url.
Scroll buttons: up/down buttons, move the list 2 positions
When scrolled, load more rows one at a time to fill in the blanks. Don't cache data, always request new data. (Other users might make live changes (typo fixing etc) to the data and Obi-Wan asked you to always make fresh requests)

Do not make any request for a sith that would be outside the list. Cancel any such obsolete request when the user scrolls.

When either the current planet indicator changes OR loaded new rows: check if there is a displayed Dark Jedi whose home planet matches the current planet. If true, then display that Dark Jedi in red text, and cancel ALL ongoing HTTP requests for rows. Freeze the UI from scrolling until the current planet changes again and there is no red-highlighted Dark Jedi anymore.

The list cannot be scrolled down if the last known sith has no apprentice. The list cannot be scrolled up if the first known sith has no master. Use .css-button-disabled on the buttons to indicate this status.

Use CSS classes from styles.css to style the HTML, which should look roughly like this:

<div class="app-container">
  <div class="css-root">
    <h1 class="css-planet-monitor">Obi-Wan currently on Tatooine</h1>

    <section class="css-scrollable-list">
      <ul class="css-slots">
        <li class="css-slot">
          <h3>Jorak Uln</h3>
          <h6>Homeworld: Korriban</h6>
        </li>
        <li class="css-slot">
          <h3>Skere Kaan</h3>
          <h6>Homeworld: Coruscant</h6>
        </li>
        <li class="css-slot">
          <h3>Na'daz</h3>
          <h6>Homeworld: Ryloth</h6>
        </li>
        <li class="css-slot">
          <h3>Kas'im</h3>
          <h6>Homeworld: Nal Hutta</h6>
        </li>
        <li class="css-slot">
          <h3>Darth Bane</h3>
          <h6>Homeworld: Apatros</h6>
        </li>
      </ul>

      <div class="css-scroll-buttons">
        <button class="css-button-up"></button>
        <button class="css-button-down"></button>
      </div>
    </section>
  </div>
</div>

Submission

Create a directory inside submissions named after your GitHub username. E.g submissions/staltz/.
Place all your client-side code in that repository, must include index.html in your submission folder.
Run the server like this: cd server then npm install (just once) then npm start.
Remember to use styles.css in your index.html solution.
Your solution should be executable by opening submissions/username/index.html in the browser with no build steps.
Send a pull request only when you consider it done. Don't submit Work-In-Progress PRs.

Criteria

Must be JavaScript, running as a web page.
Preferably a Flux-like architecture, but if you feel like you can use anything
Must solve the requirements listed above
As elegant code as possible

There is no "winner", the objective is just to solve the problem by building the UI with the most elegant code as possible. The objective is not just to "solve the problem" (I know it can be rather easily solved), the objective is to solve it as elegantly as possible.

Elegance here is not a subjective criteria. Let's define code elegance to be "the ability of a programmer to easily understand the program's flow and state coordination, being completely familiar with the tools used but completely unfamiliar with the codebase". Special attention is given to "familiar with the tools" and "unfamiliar with the codebase". This means if I know nothing about ClojureScript, a ClojureScript solution to this problem might still be very elegant to an experienced ClojureScript developer. On the other hand, unfamiliarity with the codebase is important to determine that, because usually as you grow familiar with a codebase, you find it easier to understand how it works. Our objective is to make it easy for a peer programmer to join a codebase and quickly understand how it works.

Purpose

This challenge is meant to be solved with Flux or some variation of this architecture, such as architectures with the single state tree and "actions" (Om, Redux, etc). It's my personal belief that Flux does not provide an elegant way of coordinating multiple async data sources, but more experienced Flux users might disagree. This challenge's requirements were tailored to touch Flux's weakest spots, these are not typical web app requirements. On the other hand, analytics and sensors dashboard UIs resemble this challenge a lot. That said, I am open and curious to be proven wrong about Flux. I'm curious about every solution's pros and cons, and I would prefer to discuss over evidence/artifacts instead of with platitude arguments.

Trying out submissions

cd server
npm start

Open http://localhost:3000/s/ in your browser.

flux-challenge's People

Contributors

Stargazers

Watchers

Forkers

eiriklv verbling l1fescape michaelsbradleyjr kyldvs tvanhens mendenhallmagic skatenerd strml nemesv findjashua arbeiter andrejlamov sacho widdershin pindia clarkeadg binarymuse bikegriffith e-schultz ericf89 quinntynebrown theianjones alanrsoares winstonewert billyvg nhusher chrisgalvan neilff freekh yahwin trxcllnt jdiaz5513 dannyvincent geoffwa yorchv jaybobo lutherism thecodejack kimkj2017 marufsiddiqui jibiabraham clamstew neytema nishchay2192 bspaulding salsita magnusjt nhunzaker orionstein leoasis nefil1m hyperturtle pasieronen timproctor ghsyeung stinson7 rogeliog danleavitt0 senjai unicodesnowman gyzerok ashsidhu mykhalov cgrinaldi mauriciosoares aparticka imshara rafaelrinaldi jdlehman andyfoster leozdgao josepot rfunduk mattjbray kalburgimanjunath stoeffel bossalino kmcelveen danielmschmidt peternewnham jsnuts rossta jas-chen wirthaware fatfisz skrivle blancosway fayp fluxlet jeef3 arqex newjam haritha-kalyanaraman mrkimbo massimiliano-mantione macil gterzian kauko mklishevych

flux-challenge's Issues

Observables?

To what extend are observables allowed? I am using observables together with redux a lot now, but I think you don't want observables in this challenge... :p

Scrolling constraints in accepted solutions

Hello André. Interesting challenge.

Clarification on the requirements:

There are varying degrees of allowable scrolling in the accepted solutions. A consequence: scrolling in one direction very quickly can result in Xendor (the Sith with no master, in the case of scrolling up) being pushed to the bottom of the screen.

This is possible on mynomoto's solution (ClojureScript).
http://puu.sh/lrOfi/fdc3de7bed.png

This is not possible on abaran's solution:
http://puu.sh/lrOkd/518940f4b5.png

nor on staltz's solution
I.e., the last loaded Sith can't go down very far.
http://puu.sh/lrSYI/c50c2065ca.png

So I'd like to confirm:
What is the condition for the scroll buttons being active?
-At least one sith loaded?
->=2 sith loaded?
-No sith loaded is okay (not in any solutions)?

Do drop me a line in this thread if a test suite for these requirements (and others) would be helpful. My hunch is that the button should disable when scrolling causes the slots to all be empty (even though mynomoto's solution doesn't do this. Can you confirm? I can modify the readme.

Thank you,
Dan

Question: scroll position autocorrection

Should I autocorrect scroll position when user scrolled down/up to the point when there is no apprentice/master can be loaded, but there are still empty rows in the list?

Architecture question about kyldvs submission.

Hi there.
First than anything, thank you Staltz for making this repo! I've found lots of good things in it.
My question might not be an actual issue, but I found no other way to start a discussion about architecture. If this is the wrong place to ask I'll be happy if the ticket is closed.

My question goes specifically for @kyldvs and his submission. But anybody else's opinion will be more than welcomed.

About his submission: I see that all the components are 'pure', they know nothing about Flux, i.e, they don't make direct use of the Flux Actions, instead they just receive callbacks. Btw, the official TodoApp from Flux site uses Actions directly in the components.

But I feel that receiving callbacks is easier to reason about and also way easier to reuse the components in other apps. An also much easier to test.

My Question is, how do you handle passing callbacks on deeply nested components without that becoming cumbersome and a mess to maintain? For example, 'A' component wraps B component; B wraps C; C wraps D. Then the Container (root) component must pass the callback (e.g myActions.on_D_clicked) to A as a prop, then A to B, then B to C, then C finally passes the callback to D which is the only one actually making use of that callback.

I'm aware about the spread operator in ES6, but I'm not sure if that introduces a new issue, which is hiding the dependencies of the components, making it more difficult to understand what callbacks to pass down to the grand-children components without going to their corresponding class file and inspecting their {propTypes}. But maybe I'm wrong, and this is actually easier to maintain?

Any comments, or any link for reading about the topic would be much appreciated!
Thank you guys!

Still alive?

Is this project/repo still alive and maintained? There are several PRs, that look ready to merge.

Question: disable navigation criteria

Hey, didn't find in description what to do when, for example, user scrolled down to the point when only one jedi is visible on the top of the list. Should I disable down-navigation button in this case while waiting for apprentice to load? The same for the up-navigation button and masters.

Cancellation if still loading the same row?

Thanks for putting this together!

I tried @staltz's submission and noticed that if you scrolled while a row is loading, it cancels the AJAX for the row even if it's still in the new scroll view.

I'm taking a stab at a submission so I'd just like to know what the ideal behavior is before I start making it work.

What's the deadline?

I don't see a deadline in the README. I know it isn't a contest, but what's the latest day I can make a submission and have it judged? Can this be added to the README?

Submissions strategy listing

Currently submissions are organized by names, but it's difficult to navigate to find certain submissions that use certain strategies/frameworks (e.g. Redux, Yolk, etc). It is possible to have either a wiki index that has a short description of each submission, or at least, have the folders organized by "name-strategy".

Review/analysis of entries

Will there be an analysis of the "best" entries?

Is there a 100% Facebook-React boilerplate?

I'm working on a submission. It occurs to me that a standardized React boilerplate to run the UI, in addition to the style-sheet, would help me get to first base quicker. It would also make it easier to compare submissions that use the same boilerplate.

My thought is the boilerplate would have mocked-up data directly in the render-functions. The submission would then replace the mock data with their 'Flux' driven data.

Thoughts?

Can't build Elm solution

I tried building @mattjbray's elm solution and got this:

I cannot find find module 'Http'.

Module 'Main' is trying to import it.

I then ran elm-package install evancz/elm-http which added evancz/elm-http 3.0.0 to the elm-package.json file.

Running elm-make again gave me Cannot find variable Http.getWithAbort..

I searched the elm-http repo, all tags, for this method, nothing showed up on the sources. I thought maybe I hadded the wrong package and googled "http.getwithabort", only this repo showed up.

Maybe I'm doing something stupid, this is like the third example elm app I try to build. I'm going to the countryside with no internet and I thought I'd get some elm stuff building to be able to study them.

Should user be able to scroll past end/beginning of list?

In the gif illustrating when to disable the scroll buttons, it appears that the scroll buttons are still enabled after Darth Vader has been fetched, but before Antinnis Tremayne is fetched.

It seems like the user could scroll past the beginning and end of the list.
Is this the expected behavior? Am I misinterpreting the directions?

What should the expected behavior be when:

The last known sith (let's say, "Darth Vader") has an apprentice
Their apprentice is the last apprentice ("Antinnis Tremayne")
We know the apprentice's id (1330), but we dont know that they dont have an apprentice
The user clicks the scroll down button before the last apprentice is retrieved