Programmation Web Avancée General Introduction

# @chunk: chunks/title.md # @chunk: chunks/objectives.md ## Programmation Web Avancée {var-cours-n} : {#plan overview} - Introduction globale au cours - Applications Web : vue d'ensemble {webapp} - Pourquoi ce cours? {why} - Les technologies prévue en PWA {techs} - Plus… {more} # @copy:#plan # Avertissement / Disclaimer {no-print} # Avant de commencer {no-print} ## Sondage ... {libyli no-print} - Java? - Java Servlets? - Web pages using PHP? // what framework? - HTML? - CSS? - JavaScript ? - Système de gestion de version ? - Git ? - GitHub, Gitlab, bitbucket ? - Design patterns ? // heard of it, master it? - Laptop perso pour les TP etc ? ## Logistique (prévue) - Cours et travail personnel - cours+exercices ~20h, TP/pratique ~10h // theoretical volume - **projet**, avec quelques suivis brefs - mixed sessions: courss/demo/exercices/TP {slide} - classe inversée {slide} - Planning indicatif: 3h Vendredi matin {slide} - Évaluation {slide} - « théoriques » : QCM + questions ouvertes et exercices - « pratique », projet : rapport, présentation, et démo - Règles du jeux {slide} - soyez actifs, participez - posez des questions - interrompez quand nécessaire - Proposez des sujets de cours et des idées de projet {slide} // we cannot do everything, ... - Référence du cours [http://learn.heeere.com/2017-pwa-7c99](http://learn.heeere.com/2017-pwa-7c99) {slide} ## Classe inversée {libyli #classeinv} - Constat - cours « encyclopédiques » ⇒ baisse d'attention - liberté ⇒ travail à la dernière minute ⇒ seul avec ses problèmes ⇒ échec // parfois aussi insuffisant - Principe de la classe inversée - acquisition de connaissances avant le cours - clarification et approfondissement en cours - Travail avant le cours - regarder une vidéo, lire une partie de cours, ... // chacun à son rythme - faire des exercices - prendre des notes, noter vos interrogations - En cours - questions de votre part - discussions - QCM, exercices # @copy:#plan: %+class:inred: .webapp ## Web Application? - What does the wikipedia website do when you do a search? - type `wikipedia.com` in the address bar - type “higggs” (3 g) in the search box and click on the `→` button - in response, you get
https://en.wikipedia.org/wiki/Special:Search?search=higggs&go=Go&searchToken=af3… {slide} - C: {comment} - those who never did web programming, imagine what a program should do to achieve what you observe - those who did, comment and explain to us - C: {comment} - the goal is make a figure on the board (and take a picture of it) ## User, Browser (Client), Server - The Browser (firefox, chrome, internet explorer, edge, safari, ...) {libyli} - displays pages (HTML+CSS+…) // SVG, images, videos, webgl, … - executes scripts (JavaScript) - sends requests to the server - user actions (links, forms, …) // references that are contained in the HTML - automated scripts (automatic refresh, etc) - The Server {slide libyli} - receives requests - executes code depending on the requests - may send back static resources (fixed pages, images, …) // in the past, only this - loads and updates data // from a database - generates response pages - sends pages to the client # @copy:#plan: %+class:inred: .why ## Why Learning to Build Web Apps? {libyli} - As a web app user - understand how things work behind the scene - feel empowered to build things - understand privacy and security implications - As a software engineer - more and more applications are web based // fewer and fewer desktop applications - convergence of mobile and web - As a scientist (researcher or R&D engineer) - generate ad hoc visualizations of results … … … - do attractive visualization for communications # @copy:#plan: %+class:inred: .techs ## Technologies From Today and Yesterday

## Potential Technologies in this course - Dans ce cours de PWA {libyli} - coté server, principalement du Java - coté client, les bases techs (HTML, CSS, javascript) - coté client, framework (Angular, React, Vue) - JEE : Java Entreprise Edition {slide dense} // J2EE before renaming - a standard for Java servers - Java: portability, security, standardization - JEE web container {slide} - runtime environment providing services - portability between containers - JEE platform specification {slide} - tens of individual specifications (JSR) // Java Specification Requests, http://www.oracle.com/technetwork/java/javaee/tech/index.html - servlets, JSP, JPA, … // some we'll see - Spring (Pivotal) {slide} // VMware -> joint venture with GE : pivotal - additional framework around JEE - Java and Groovy {slide} // G2One bought by SpringSource - not a standard ⇒ sometimes faster advances {slide} - JEE and Spring {slide} - both huge // a lot of things - evolve in parallel and interact positively # @copy:#plan: %+class:inred: .more ## Learning to Learn (in general) {libyli} - Work regularly (not a big rush before the deadline) - repeat exercises - practice (don't just re-read things) - Be extremely focused - limit interruptions - work for fixed-duration slots (e.g., 25 minutes) - … but make real and regular breaks - stretch or have a walk - practice sport - sleep well ## Succeeding in this Course {libyli} - Be pro-active in lessons and practical sessions - Embrace the proposed technologies - Bring your own objectives and ideas - Look and ask for complement (me, other students, online, ...) - Practice! - make room on your computer to install things - install the required software - practice regularly # Idée de Projets ?
Accent sur certaines Technologies ? # Commencez à penser au
Projet et aux Équipes (de 3) ## Key Points {key deck-status-fake-end} - Course Objectives - understanding web apps principles and evolution - mastering some technologies - “full-stack”: both client and server side techs - Logistics - sessions de (cours + demo + TP) - suivi de projet - exam + qcm + projet - Learn to learn efficiently! - Course reference :
http://learn.heeere.com/2017-pwa-7c99/ # 6-minute break … … # @copy:#classeinv ## Pour la prochaine fois (mercredi) {libyli} - Au sujet de CSS - Comprendre les sélecteurs (slides « cours-02 ») - Comprendre la notion de spécificité - Comprendre le box-model (slides « cours-02 ») - Prendre des notes - Arriver avec des questions - Lire (en ignorant possiblement les aspects parallèles)
https://blog.mozfr.org/post/2017/09/Au-coeur-moteur-CSS-super-rapide-Quantum-CSS-stylo