pietroiusti / new_new_amzn

Readme IN PROGRESS

Original task

Task:

El objetivo de este ejercicio es programar con javascript un “ecommerce”.

render_list_of_items: es una función que se ejecuta al abrir la pagina en el navegador. Tiene que generar el html con el listado de productos de la tienda, detallados en la variable “data”. La propiedad ‘img’ se correponde con el nombre de las imagenes .jpg de la carpeta img. Puedes utilizar cualquier recurso de CSS, por ejemplo bootstrap o materialize, para generar algun tipo de ficha/card de producto, con su nombre y su precio.

addItem: esta función tiene que ejecutarse para añadir un producto al carrito de la compra. Cada ficha de producto debe tener un botón para añadir el producto a la cesta. También cada producto debe tener un indicador de la cantidad de producto contenida en la cesta.

removeItem: Lo mismo que addItem pero para quitar producto de la cesta.

Es importante que haya en algún lugar de la página el número total de items en la cesta así como el precio total de la compra, que deben actualizarse debidamente al poner y quitar productos de la cesta.

Bonus points: Adicionalmente, puedes incorporar otras funcionalidades que consideres interesantes, p.ej. - Algún tipo de visualización del contenido de la cesta. - Listado/menú/cesta adaptable a móbil. - Persistencia del carrito en localStorage. - Uso de WebComponents - o cualquier otra cosa que te parezca interesante !

First implementation

After the first implementation: using web components

We can turn the items in the grid and the basket into custom elements.

A futher step: data flow

• Now:

  click -> dispactch custom event -> myamazon.js –> store update

  v attribute change

  v update view

• What we want:

  click -> dispatch custom event -> myamazon.js -> store update -> myamazon.js -> upate view

Another improvement: really disconnecting changing the state and reacting to the state change

Now we are passing a callback to the store, when we change the state:

store.change({action: 'removeItem', itemName: name}, handleDataChange);

Now we have only two components.

It would be nice to allow components to register their listeners (callbacks) in the store. If components register their own listeners, then we can update the state without passing a callback.

Each time the store is changed, then we will execute all the listeners.

Exercise: making the basket “stateful”.

Now that, instead of passing a callback to the store, we are registering listeners independently of when they changes to the store are performed, we can, as an exercise, turn the basket into a stateful (“smart”) component.

Now the basket is stateless (“dumb”), that is, it depends only on its input. We can turn it into “stateful”

Using a bundler. Introducing Webpack

Now we are loading loading several js files, using the <script> tags.

There are implicit dependencies between those files: the files basket.js and myamazon.js assume the existence of a `store` global variable, which is provided by store.js. This is not ideal:

• the script tags for those files must be placed in the right order;
• it’s not obvious that some scripts depend on others;
• if a dependency is included but not used, we will load unnecessary code

Let’s use Webpack.

We gotta do a bunch of stuff (cf. https://webpack.js.org/guides/getting-started/). Among which:

npm init -y

npm install webpack-cli --save-dev

npm install --save-dev style-loader css-loader

...

Turning myamazon.js into a module

Generalizing the store

Immutability

webpack plugins

• html-webpack-plugin

webpack-dev-server

• install: npm install webpack-dev-server --save-dev;
• add some conf to webpack.config.js;
• start with: npx webpack serve.

From JavaScript to TypeScript

• turn js file into ts files
• add types
• Use a generic type for the store.