WebDev Tools & Frameworks 2018

tools&frameworks.md

Frontend

• Vue (https://vuejs.org/)

  • vuex (https://vuex.vuejs.org/)
  • vue-router (https://router.vuejs.org/)
  • Nuxt.js (https://nuxtjs.org/)
    • Framework with vue.js, vuex, vue-router.. everything needded for frontend development pre-installed and configured.

• CSS

  • Element (http://element.eleme.io/#/en-US)
  • Buefy (https://buefy.github.io/#/)

Backend Frameworks

• PHP

  • Laravel (https://laravel.com/)

• Javascript

  • AdonisJS (https://adonisjs.com/)

Structure & Webapp

• Backend & Frontend in one app

  • Both Laravel and Adonis can render pages from templates. You can combine all logic and frontend in one app.

• API Based

  • This allowes a more flexible app structure. You create two apps, one that contains only the frontend and one that is only responsible for the backend and data management.
  • The backend provides a well defined API that allows querying and manipulating data. The Frontend accesses the data only via this api.
  • Standards for API are REST (simle, more than enough for most cases), JSON API (large projects), GraphQL (really, really large projects).
  • Transformers can be used to create an abstraction layer between your data and the api. (https://laravel.com/docs/5.6/eloquent-resources), (https://github.com/rhwilr/adonis-bumblebee)

Tools

Tools are mostly already pre-configured by the framework, but it is nice to know how they work.

• Webpack (https://webpack.js.org/)
• PostCSS (https://postcss.org/)
• Babel (https://babeljs.io/)

Technologies

• ServiceWorker (https://developers.google.com/web/fundamentals/primers/service-workers/)
• Websocket (https://en.wikipedia.org/wiki/WebSocket)