Coder Social home page Coder Social logo

jsweekend's Introduction

JS Weekend

An intensive weekend React workshop with Kiwi.com developers

About

See our website: https://www.kiwi.com/jsweekend/

The goal of this workshop is to show you some great tools and best practices for building React application. During two weekend days you'll learn how to fetch data with Relay Modern from GraphQL backend, enrich Javascript with static types due to Flow, write test, create re-usable React components and setup continuous deployment.

The workshop is divided into four blocks plus one short introduction. Each block corresponds to a directory containing the desired source code we'll try to create.

Installation

There are no complicated dependencies. All you need is Node.js and Yarn installed, everything else will be installed from NPM.

Table of Contents

Requirements

This project requires the following to be installed.

How to Install

If you have everything from Requirements then you can simply run: yarn.

This project uses Yarn Workspaces so all the project dependencies for all the folders will be installed automatically.

In each block/directory, you'll find a working application. Check out the readme file if you want to run it.

Where to start

The application you should start with is in a directory start. Feel free to make all your changes here.

All other folders contain ready made parts of our final application. If you get stuck or can't keep up you can use the code from these folders to help yourself catch up with the rest or see how we've handled a problem you may have come across.

Technologies

Here you can find a list of technologies we use everyday that we would like to show you. The JSWeekend workshop is focused on teaching you some of the know how and best practices we have come to with these technologies.

Main technologies:

  • NextJS
    • Serverside rendering for React
    • Easy to use Framework for creating a React focused application with routing sorted out
    • Made by Zeit.co
  • React
    • JavaScript library for building user interfaces
    • Made by Facebook
  • Relay
    • Javascript library for communicating with GraphQL
    • React components for handling network calls
    • Made by Facebook
  • Styled-JSX
    • Library for CSS-in-JS
    • Made by Zeit.co
  • Storybook
    • Library for showcasing components
  • Jest
    • Library for testing
  • Flow
    • Library for static type checking
  • ESLint
    • Library for enforcing code style
  • Prettier
    • Opinionated and automating code styling
    • Let a extension handle formatting for the entire team automatically
  • Cypress
    • End to end testing in JS

jsweekend's People

Contributors

alexe-dev avatar fallion avatar jaroslav-kubicek avatar michalsanger avatar mrtnzlml avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

kinapets synaptiko gustaff-weldon marizikmund lspdv sivakoneti fifjgojgroj

jsweekend's Issues

Review

  • missing basic "how to start" in main README
  • dependencies cannot be installed on newest stable Node.js because of restrictions here (WTF?)

start/

  • new application throws errors into console (invalid HTML)
  • index page contains <body> but this is not how Next.js works (related to the previous issue)
  • in general, the design is quite imperative - it would be great to show best practices from the very beginning and use better components design (for example instead of <strong>{`${formatPrice(flight.price)}`}</strong> it's better to show <Price amount currency /> component; I would replace all the format* component)
  • no simple stupid unit tests?

But maybe you wanted to show how not to do do that? 😊

saturday-morning/

  • no README
  • not using exact Flow Props - I actually consider this to be a serious mistake (related to Props only - it's good to have it everywhere else)
  • no fragments? definitely not a good practice to start with
  • this project contains the only test and it's pretty stupid (no need for Enzyme; it's pointless to test high-level components via snapshot; and the test/component is so fragile it fails in my case because of different timezone - please show the best practices)

saturday-afternoon/

  • it's standalone application but again - no readme or help whatsoever (so you again need to figure out on your own how to start and I honestly failed with yarn dev)
  • doesn't work:
Error happened: Unexpected token N in JSON at position 0

List of flights from Prague to Barcelona on We Mar 21

Error happened: Unexpected token N in JSON at position 0

Client calls http://localhost:3000/undefined which returns Not Implemented...

  • no exact props types
  • not a single test
  • still no Relay fragments everywhere? (and therefore wrong Flow types) - see /components/search/Search.js for example
  • fix it please:

    jsweekend/saturday-afternoon/components/flights/FlightList.js

    Line 17 in 8c26415

    data: Object, // FlightListType, FIXME!!!
  • this type doesn't exist and therefore it's a bug (casted by Flow to any):

    jsweekend/saturday-afternoon/components/flights/FlightList.js

    Line 7 in 8c26415

    type RelayPaginationProp
    (same for FlightEmptyList.js)
  • it's not very nicely structured (readable) - for example, you are using fragment Leg_leg in /components/flights/FlightItem.js but if you open imported component (/components/flights/Legs/index.js) there is no such fragment - how should they understand the best practices?

sunday-morning/

  • doesn't work again (or no idea how to run it actually because of missing README)
  • TO BE CONTINUED...

sunday-afternoon/

Nothing to review here.

Refactor Search form

Currently, we load all cities for Autocomplete and let the component to perform filtering, which is slow with empty input / one letter in input.

Ideally, each list of options should be wrapped in QueryRenderer, which accepts string written by user into input + limit number of results to e.g. 20., so the structure should be something like this:

<SearchForm> <-- no QueryRenderer here
  <Input.Item>
    <Autocomplete onSearch={this.handleSearchFrom}>
      <QueryRenderer variables={{ search }}  ...  /> -- showing list of possible options for From
    <Autocomplete>
  </Input.Item>
  <Input.Item>
    <Autocomplete  onSearch={this.handleSearchTo}>
      <QueryRenderer variables={{ search }} ...  /> -- showing list of possible options for To
    <Autocomplete>
  </Input.Item>
</SearchForm>

Benefits:

  • we can auto suggests countries, airports etc., not just cities
  • it's not slow
  • I can show visual feedback for nonexisting location

Saturday morning issues

  • package.json specify Node version 9
  • do not version .env, create .env-sample
  • schema/schema.graphql -> schema.graphql
  • fetchQuery async/await
  • .graphqlconfig hardcoded URL, use .env
  • pages/index.js load css in pages/_document.js
  • components/flights/FlightList.js hardcoded date. Use next week date
  • version schema and relay generated files

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.