diff --git a/.bundle/config b/.bundle/config deleted file mode 100644 index b572b09e2..000000000 --- a/.bundle/config +++ /dev/null @@ -1,3 +0,0 @@ ---- -BUNDLE_RETRY: "3" -BUNDLE_JOBS: "4" diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json deleted file mode 100644 index f0a6721c0..000000000 --- a/.devcontainer/devcontainer.json +++ /dev/null @@ -1,23 +0,0 @@ -// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: -// https://github.com/microsoft/vscode-dev-containers/tree/v0.234.0/containers/docker-existing-dockerfile -{ - "name": "Jekyll Dev Environment", - "context": "..", - "dockerFile": "../Dockerfile", - "customizations": { - "vscode": { - "settings": {}, - "extensions": [] - } - }, - "forwardPorts": [ - 35728, - 35729 - ], - "portsAttributes": { - "35728": { - "label": "Jekyll Preview", - "onAutoForward": "openPreview" - } - } -} diff --git a/.dockerignore b/.dockerignore deleted file mode 100644 index 5885d1c7d..000000000 --- a/.dockerignore +++ /dev/null @@ -1,9 +0,0 @@ -/_includes/ -/_layouts/ -/_posts/ -/.github/ -/assets/ -/images/ -/nodes_modules/ -/vagrant/ -/vendor/ diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml index 2be02f2cd..0036a62a2 100644 --- a/.github/workflows/deployment.yml +++ b/.github/workflows/deployment.yml @@ -6,21 +6,21 @@ on: jobs: build: - name: 'Build 📦 & Deploy 🚀' + name: 'Build 📦' runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-ruby@v1 - with: - ruby-version: '3' - - run: gem install bundler - - run: bundle install --jobs 4 --retry 3 - + - uses: actions/checkout@4 - name: 'Build 📦' - run: bundle exec jekyll build + uses: withastro/action@v3 - - uses: JamesIves/github-pages-deploy-action@v4.3.4 - name: 'Deploy 🚀' - with: - folder: _site - clean: true + deploy: + name: 'Deploy 🚀' + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml index ad0a4e829..e1339cfb8 100644 --- a/.github/workflows/integration.yml +++ b/.github/workflows/integration.yml @@ -10,10 +10,7 @@ jobs: name: 'Build 📦' runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-ruby@v1 - with: - ruby-version: '3' - - run: gem install bundler - - run: bundle install --jobs 4 --retry 3 - - run: bundle exec jekyll build + - uses: actions/checkout@4 + - name: 'Build 📦' + run: npm run build + diff --git a/.gitignore b/.gitignore index 96f00c54d..16d54bb13 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,24 @@ -_site +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files .DS_Store -*.sublime-project -*.sublime-workspace -codekit-config.json -node_modules -vagrant/.vagrant/ -.jekyll-cache -.jekyll-metadata -.idea/* + +# jetbrains setting folder +.idea/ diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index 3e343b973..000000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. - // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp - // List of extensions which should be recommended for users of this workspace. - "recommendations": [ - "ms-vscode-remote.remote-containers" - ] -} \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json deleted file mode 100644 index 8049d96e2..000000000 --- a/.vscode/tasks.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "version": "2.0.0", - "tasks": [ - { - "label": "Jekyll Serve", - "command": "rm -rf /var/_site && bundle exec jekyll serve --drafts --destination /var/_site/ --port 35728 --incremental --livereload --livereload-port 35729", - "type": "shell", - "runOptions": { - "runOn": "folderOpen" - }, - "isBackground": true - } - ] -} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7b75c45a1..691c3f85e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,70 +1,41 @@ # Contributing -## How to install the project? +## Prerequisites -### Using Visual Studio Code +- [Node.js](https://nodejs.org/en/download/) +- [pnpm](https://pnpm.io/installation) -1. Install Docker or Podman on your machine -2. Open the project in Visual Studio Code -3. Install the recommended [Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension -4. When VS code prompts you, agree to "Reopen in Container" -5. The blog should be built, refreshed and opened in a preview tab automagically. ✨ - - If not, you can run the "Jekyll Serve" VS Code task manually. - -### With Ruby and Gem +## 🔧 How to install the project? ```shell git clone https://github.com/BedrockStreaming/tech.bedrockstreaming.com.git cd tech.bedrockstreaming.com -sudo gem install jekyll bundler -bundle install +pnpm install ``` Then run this command to run a dev server locally. -```shell -bundle exec jekyll serve -``` - -:warning: There are some issues to run this project on M1 archi for now. - -### With docker - -You can use docker to run the tech blog locally. ```shell -docker build -t tech-blog . -docker run -p 8080:8080 tech-blog +pnpm dev ``` -## How to add an article to the blog? - -All articles are listed in the `_posts` folder. -Each article is a Markdown file named like this `YYYY-MM-DD-article-slug.md` where date is the date of publication. -:information: If you put a future date of publication, your article won't be visible until this date is passed. +## 📝 How to add an article to the blog? + +All articles are listed in the `src/content/posts/YYYY/MM/DD` folder structure where date is the date of publication. Make sure to complete the _frontmatter_ part of your Markdown file in order to define at least those attributes: ```markdown --- -layout: post +layout: ../../../../../layouts/post.astro title: Title of your article description: Description of your article visible in search page results author: author_of_your_article tags: [example, of, tags] -color: rgb(251,87,66) # this is Bedrock color here --- ``` -We are using a community theme for Jekyll for this blog, you may find some useful examples here: -- [How to add Table of content for your blog post ?](https://sylhare.github.io/Type-on-Strap/2014/11/28/markdown-and-html.html) -- [How to customize the color used on a post page ?](https://sylhare.github.io/Type-on-Strap/2019/05/18/color-post.html) -- [How to use images in your post ?](https://sylhare.github.io/Type-on-Strap/2018/10/29/feature-images.html) - You can store your images in _images/post_ folder of this repository. - Don't forget to compress them for performances with tools like [TinyPNG](https://tinypng.com/) -- [How to add code examples ?](https://sylhare.github.io/Type-on-Strap/2014/08/08/Markup-Syntax-Highlighting.html) -- [How to add simple Diagrams with _Mermaids_?](https://sylhare.github.io/Type-on-Strap/2019/11/02/Tech-stuff-example.html#mermaid) - Mermaid is a really powerful tool to generate Diagram dynamically with some text. - Check [Mermaid documentation](https://mermaid-js.github.io/mermaid/#/). +The _frontmatter_ is configured through a [Zod](https://zod.dev/) schema in `src/content/config.ts`. In order to add a new article, you should open a Pull Request on this repository. A preview will automatically be deployed on AWS thanks to AWS Amplify service. @@ -72,109 +43,57 @@ A preview will automatically be deployed on AWS thanks to AWS Amplify service. Don't hesitate to share your new post of **#proj-blog-tech-bedrock** slack room to ask for reviews from Bedrockers. When you have 2 approves and no change requested, you can merge your Pull Request. -## Add an author +## ✍️ Add an author -Edit `_data/authors.yml` to add an author (authors are sorted alphabetically). +Add a `.json` file in `src/content/authors` folder. You can check the `src/content/authors/bedrock.json` file +as an example. You can add the avatar image in the same folder for it to be referenced like `./.jpg` in the author json file. -Authors could have a `name`, a `url` and an `avatar` (which could be a distant file or an image hosted in the `images/avatar` directory). +Authors could have a `name`, a `url` and an `avatar` (which could be a distant file or an image hosted in the directory). Then you will be able to use the author ID in the frontmatter post configuration key named `author`. -## Add a LFT replay - -1. Create a file in the `__post` folder name matching this format `YYYY-MM-DD-slug-of-your-article.md` - Use the date the talk was first given in public. -2. Add the configuration of metadata at the beginning of this file - > :warning: **To make your videos appear in either `Last Friday Talks`page, tag your post with `lft`.** - ```markdown - --- - layout: video - # Unique ID of the Youtube video clip - youtubeId: $$$$$$$ - # Title of the article - title: Title of your article - # Description (for SEO and context purpose) - description: Description of your article visible in search page results - # Authors of the article (can also be a list of authors such as: [first_author, second_author, third_author]) - # The complete list of valid author IDs is in `_data/authors.yml` - author: author_of_your_article - # Use tags for grouping content in the blog - # Add `lft` to group with other LFT talks - tags: [lft, and, other, tags] - # Bedrock color - color: rgb(251,87,66) - --- - ``` -3. Add content to the markdown file in order to add context to the video you are sharing. - - -## Add a conference - -There are two ways to publish a conference where you were a speaker. -Please note that creating a post is more likely to help our external communication. - -### Publish information about the conference - -If you just want to add a conference presentation to the listed ones, you can add your presentation in `_data/conferences.yaml`. - -List of the metadata allowed to add a new conference: +ℹ️ the site will keep you from building if you use an author ID that does not exist. + +## ↩️ Add a LFT replay +Similar to adding an article, you can add a Last Friday Talk replay to the blog by adding a markdown file in the `src/content/lfts/YYYY/MM/DD` folder structure. +The most different parts are: +- that you should use the `lft.astro` layout instead of the `post.astro` layout. +- you should add a `youtubeId` key in the frontmatter to embed the video in the page and get the thumbnail. + +Here is an example of an LFT frontmatter +```markdown +--- +layout: ../../../../../layouts/video.astro +title: "Le LFT du LFT - PUB LFT #LFT 02/02/24" +description: "" +author: team_lft +tags: [lft, tech] +color: rgb(251,87,66) +youtubeId: UgOFZmOJOmo +``` + +## 🎤 Add a conference + +Similar to adding an article, you can add a conference to the blog by adding a markdown file in the `src/content/conferences/YYYY/MM/DD` folder structure. +Here is an example of a conference frontmatter ```markdown -- title: "Title of the conference" - # Conference date - date: 1970-01-01 - # from _data/authors.yaml - author: conference_speaker - # Public event name - eventName: ****** - # Url to redirect to the event site (optional) - eventUrl: ****** - # Youtube video id (optional) - youtubeId: ****** - # Slideshare presentation key (from iframe integration) (optional) - slideshareKey: ****** - # Bedrock sponsored the event? (default: false) - sponsored: true - # Bedrock hosted the event? (default: false) - hosted: true +--- +title: "Projet XState" +author: m_blanc +description: "La gestion d'état applicative est une notion complexe et fondamentale (donc passionnante) des applications web modernes. Pour garder le contrôle de votre application, venez découvrir XState, un moteur d'états reposant sur le concept de machines à états finis." + +eventName: LyonJS Meetup +eventUrl: https://www.meetup.com/fr-FR/lyonjs/events/290762638/ +youtubeId: HWRQp2Y1rbw +sponsored: true +hosted: true + +tags: [xstate, lyonjs, meetup, react, javascript, conference] +comments: true +color: rgb(251,87,66) +language: fr +--- ``` -That's all folks! Your conference will be displayed in "Meetups & Conferences" page. -If there is a `youtubeId` key, the video will also be added to the "Replay" section. - - -### Create a post to present the conference - -1. Create a file in `__post` folder name matching this format `YYYY-MM-DD-slug-of-your-article.md` - Use the date the talk was first given in public. -2. Add the configuration of metadata at the beginning of this file: - ```markdown - --- - layout: conference - - # Title of the conference - title: Title of your conference - # Description of the page (for SEO and context purpose) - description: Description of your article visible in search page results - # from _data/authors.yaml - author: conference_speaker - # Public event name - eventName: ****** - # Url to redirect to the event site (optional) - eventUrl: ****** - # Youtube video id (optional) - youtubeId: ****** - # Slideshare presentation key (from iframe integration) (optional) - slideshareKey: ****** - # Bedrock sponsored the event? (default: false) - sponsored: true - # Bedrock hosted the event? (default: false) - hosted: true - - # Use tags for grouping content in the blog. - tags: [example, of, tags] - # this is Bedrock color here - color: rgb(251,87,66) - --- - ``` -3. Add content to the markdown file in order to add context to the presentation you are sharing. +Your conference will be displayed in "Meetups & Conferences" page. \ No newline at end of file diff --git a/Dockerfile b/Dockerfile deleted file mode 100644 index dc8a4023e..000000000 --- a/Dockerfile +++ /dev/null @@ -1,11 +0,0 @@ -FROM ruby:3.1 - -COPY Gemfile Gemfile -COPY Gemfile.lock Gemfile.lock -COPY type-on-strap.gemspec type-on-strap.gemspec -RUN gem install jekyll bundler -RUN bundle install --jobs 4 --retry 3 - -EXPOSE 8080 -EXPOSE 35729 -CMD bundle exec jekyll serve --source . --destination /var/_site/ --host 0.0.0.0 --port 8080 --livereload --livereload-port 35729 diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 2d1a75517..000000000 --- a/Gemfile +++ /dev/null @@ -1,5 +0,0 @@ -source "https://rubygems.org" -gemspec -gem "jekyll-redirect-from", "~> 0.16.0" -gem "jekyll-twitter-plugin", "~> 2.1.0" -gem "webrick", "~> 1.7" \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 2d5d90dda..000000000 --- a/Gemfile.lock +++ /dev/null @@ -1,108 +0,0 @@ -PATH - remote: . - specs: - type-on-strap (2.4.0) - jekyll (>= 3.8, < 5.0) - jekyll-feed (>= 0.15.1, < 0.16) - jekyll-paginate (~> 1.1.0) - jekyll-seo-tag (>= 2.7.1, < 2.8) - jekyll-twitter-plugin (>= 2.1.0) - -GEM - remote: https://rubygems.org/ - specs: - addressable (2.8.7) - public_suffix (>= 2.0.2, < 7.0) - colorator (1.1.0) - concurrent-ruby (1.3.3) - em-websocket (0.5.3) - eventmachine (>= 0.12.9) - http_parser.rb (~> 0) - eventmachine (1.2.7) - ffi (1.17.0-aarch64-linux-gnu) - ffi (1.17.0-arm64-darwin) - ffi (1.17.0-x86_64-darwin) - ffi (1.17.0-x86_64-linux-gnu) - forwardable-extended (2.6.0) - google-protobuf (3.25.3-aarch64-linux) - google-protobuf (3.25.3-arm64-darwin) - google-protobuf (3.25.3-x86_64-darwin) - google-protobuf (3.25.3-x86_64-linux) - http_parser.rb (0.8.0) - i18n (1.14.5) - concurrent-ruby (~> 1.0) - jekyll (4.3.3) - addressable (~> 2.4) - colorator (~> 1.0) - em-websocket (~> 0.5) - i18n (~> 1.0) - jekyll-sass-converter (>= 2.0, < 4.0) - jekyll-watch (~> 2.0) - kramdown (~> 2.3, >= 2.3.1) - kramdown-parser-gfm (~> 1.0) - liquid (~> 4.0) - mercenary (>= 0.3.6, < 0.5) - pathutil (~> 0.9) - rouge (>= 3.0, < 5.0) - safe_yaml (~> 1.0) - terminal-table (>= 1.8, < 4.0) - webrick (~> 1.7) - jekyll-feed (0.15.1) - jekyll (>= 3.7, < 5.0) - jekyll-paginate (1.1.0) - jekyll-redirect-from (0.16.0) - jekyll (>= 3.3, < 5.0) - jekyll-sass-converter (3.0.0) - sass-embedded (~> 1.54) - jekyll-seo-tag (2.7.1) - jekyll (>= 3.8, < 5.0) - jekyll-twitter-plugin (2.1.0) - jekyll-watch (2.2.1) - listen (~> 3.0) - kramdown (2.4.0) - rexml - kramdown-parser-gfm (1.1.0) - kramdown (~> 2.0) - liquid (4.0.4) - listen (3.9.0) - rb-fsevent (~> 0.10, >= 0.10.3) - rb-inotify (~> 0.9, >= 0.9.10) - mercenary (0.4.0) - pathutil (0.16.2) - forwardable-extended (~> 2.6) - public_suffix (6.0.0) - rb-fsevent (0.11.2) - rb-inotify (0.11.1) - ffi (~> 1.0) - rexml (3.3.2) - strscan - rouge (4.3.0) - safe_yaml (1.0.5) - sass-embedded (1.69.5-aarch64-linux-gnu) - google-protobuf (~> 3.23) - sass-embedded (1.69.5-arm64-darwin) - google-protobuf (~> 3.23) - sass-embedded (1.69.5-x86_64-darwin) - google-protobuf (~> 3.23) - sass-embedded (1.69.5-x86_64-linux-gnu) - google-protobuf (~> 3.23) - strscan (3.1.0) - terminal-table (3.0.2) - unicode-display_width (>= 1.1.1, < 3) - unicode-display_width (2.5.0) - webrick (1.7.0) - -PLATFORMS - aarch64-linux - arm64-darwin-21 - universal-darwin-22 - x86_64-linux - -DEPENDENCIES - jekyll-redirect-from (~> 0.16.0) - jekyll-twitter-plugin (~> 2.1.0) - type-on-strap! - webrick (~> 1.7) - -BUNDLED WITH - 2.3.16 diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 04813fbf5..000000000 --- a/_config.yml +++ /dev/null @@ -1,66 +0,0 @@ -# SITE CONFIGURATION -baseurl: "" -url: "https://tech.bedrockstreaming.com" - -# THEME-SPECIFIC CONFIGURATION -title: Bedrock Tech Blog # Site's title -description: "Blog technique de Bedrock" # used by search engines -avatar: images/common/br-site-logo.jpg # Empty for no avatar in navbar -favicon: assets/favicon.png # Icon displayed in the tab - -# Header and footer text -header_text: Creating Streaming Champions # Change Blog header text -header_feature_image: images/common/banner_xl.jpg -header_feature_image_responsive: true -footer_text: > - Powered by Jekyll with Type on Strap - -# Blog -excerpt: true # Or "truncate" (first 250 characters), "false" to disable -post_navigation: true -color_image: /assets/img/lineart.png # A bit transparent for color posts. - -# Features -# More in the _data folder for share buttons, author and language -# For layout customization, go to the "_sass > base" folder, and check "_variables.scss" -katex: true # Enable if using math markup -matomo: true # Enable matomo tracking tool -mermaid: true # Enable mermaid-js for sequence and diagrams -google_analytics: # Tracking ID, e.g. "UA-000000-01" -cookie_consent: false # To respect the usage of cookies -color_theme: auto # auto, dark or light - -# Comments -comments: - disqus_shortname: # Your discus shortname for comments - cusdis_app_id: # Your cusdis data-app-id - utterances: # Enable by filling below information. For more info, go to https://utteranc.es - repo: # your public comments repository (e.g. owner/repo) - issue-term: # Issue term (e.g. "comment" consider issues with this word in the title as comments) - -# PAGINATION -paginate: 10 -paginate_path: "/blog/page:num" - -# BUILD SETTINGS -sass: - style: compressed -plugins: - [ - jekyll-paginate, - jekyll-seo-tag, - jekyll-feed, - jekyll-redirect-from, - jekyll-twitter-plugin, - ] -exclude: - [ - ".jekyll-cache", - ".jekyll-metadata", - ".idea", - "vendor/*", - "assets/node_modules/*", - ] - -# theme: type-on-strap # if using the theme as a jekyll theme gem -remote_theme: sylhare/Type-on-Strap # If using as a remote_theme in github diff --git a/_data/authors.yml b/_data/authors.yml deleted file mode 100644 index 1a902466b..000000000 --- a/_data/authors.yml +++ /dev/null @@ -1,307 +0,0 @@ -# company -bedrock: - name: Bedrock - -# teams (alphabetically ordered) -team_backend: - name: Backend teams -team_cytron: - name: Cytron team - avatar: /images/avatar/cytron.png -team_frontend: - name: Frontend teams -team_lft: - name: LFTeam - -# people (alphabetically ordered) -a_caron: - name: Antoine Caron - avatar: /images/avatar/a_caron.jpeg - url: https://blog.slashgear.dev/ -a_ferez: - name: Amélie Ferez - avatar: /images/avatar/a_ferez.jpg -a_martins: - name: Alexis Martins -a_pitel: - name: Antoine Pitel -a_zinck: - name: Arthur Zinck - avatar: /images/avatar/a_zinck.png - url: https://www.z3k.fr -al_deboissieu: - name: Anne-Laure De Boissieu - avatar: /images/avatar/al_deboissieu.jpeg -b_candellier: - name: Baptiste Candellier - avatar: https://s.gravatar.com/avatar/c638445b4e00f76960bf7ee2275d7014?s=80 - url: https://baptiste.candellier.me -b_garcia: - name: Bénédicte Garcia -b_viguier: - name: Benoit Viguier - avatar: /images/avatar/b_viguier.png - url: https://twitter.com/b_viguier -c_berard: - name: Clément Berard - url: https://berard.dev -c_chaplin: - name: Cory Chaplin - avatar: /images/avatar/c_chaplin.jpg - url: https://twitter.com/corychaplin -c_cousin: - name: Camille Cousin -c_goffoy: - name: Cédric Goffoy -c_niel: - name: Camille Niel - url: https://www.camilleniel.com/ -c_petit: - name: Coraline Petit -c_pettinelli: - name: Chiara Pettinelli -c_vanderzwaard: - name: Christian Van Der Zwaard - avatar: /images/avatar/c_vanderzwaard.jpg - url: https://twitter.com/christianvdz -d_cuny: - name: Damien Cuny -d_krieger: - name: Damien Krieger -d_larue: - name: David Larue -d_petrilli: - name: Damien Petrilli -d_roussel: - name: Denis - avatar: /images/avatar/d_roussel.jpg -d_yim: - name: David Yim -e_carneau: - name: Elise Carenau -e_doyon: - name: Etienne Doyon - avatar: /images/avatar/e_doyon.jpeg -e_idoux: - name: Etienne Idoux -e_herve: - name: Emmanuel Herve -e_perrin: - name: Élodie Perrin - avatar: /images/avatar/e_perrin.jpeg -f_desaintpern: - name: Fabien De Saint Pern -f_dubost: - name: Florent Dubost - avatar: /images/avatar/f_dubost.jpg - url: https://twitter.com/fooragnak -f_dumas: - name: Fabien Dumas -f_lepretre: - name: Florent Leprêtre - url: https://twitter.com/SuperFlaw -f_vieudrin: - name: Frederic Vieudrin - url: https://twitter.com/fvieudrin -g_bouyge: - name: Guillaume Bouyge -g_forien: - name: Gabriel Forien -g_treme: - name: Guillaume Trémé -g_sanchez: - name: Grégory SANCHEZ - url: https://github.com/chubchubsancho -h_detang: - name: Hugo Detang -h_riffiod: - name: Hugo Riffiod - avatar: /images/avatar/h_riffiod.jpg -jy_camier: - name: Jean-Yves Camier - url: https://twitter.com/Saaraahka -j_foray: - name: Jérôme Foray -j_hardeman: - name: Jérôme Hardeman -j_mastounga: - name: Jules Matsounga -j_menan: - name: Julien Menan - avatar: /images/avatar/j_menan.jpg - url: https://twitter.com/julien_menan -j_nginn: - name: Julie Nginn -j_planckeel: - name: Jérémy Planckeel - url: https://github.com/jplanckeel -j_poissonnet: - name: Jules Poissonnet - url: https://github.com/jpoissonnet - avatar: /images/avatar/j_poissonnet.jpg -j_sulpis: - name: Julien Sulpis -k_dits: - name: Kenny Dits - avatar: /images/avatar/k_dits.jpg - url: https://twitter.com/kenny_dee -k_phan: - name: Kelly Phan -l_caillet: - name: Laurent Caillet - avatar: /images/avatar/l_caillet.jpg - url: https://www.linkedin.com/in/laurent-caillet/ -l_penaguin: - name: Léo Penaguin - url: https://leopng.com - avatar: /images/avatar/l_penaguin.jpg -m_agack: - name: Moustapha Agack -m_alves: - name: Mickael Alves - avatar: /images/avatar/m_alves.jpg - url: https://twitter.com/CruuzAzul -m_benali: - name: Marwa Ben Ali - avatar: /images/avatar/m_benali.jpg -m_blanc: - name: Maxime Blanc - avatar: /images/avatar/m_blanc.jpeg - url: https://maximeblanc.fr -m_julieron: - name: Marine Julieron - avatar: /images/avatar/m_julieron.jpg -m_millet: - name: Morgan Millet -m_mure: - name: Mathieu Mure - url: https://twitter.com/mathieumure -m_oudji: - name: Maeva Oudji -m_randy: - name: Mikael Randy - avatar: /images/avatar/m_randy.png - url: https://twitter.com/mikaelrandy -m_lemoal: - name: Maxime Le Moal -m_lopez: - name: Mathieu Lopez -m_schneider: - name: Martin Schneider - url: https://github.com/martinschneider01 - avatar: /images/avatar/m_schneider.png -n_alscher: - name: Nicolas Alscher -n_boiron: - name: Nathan Boiron - url: https://mopolo.dev -n_galais: - name: Nicolas Galais -n_saby: - name: Nastasia Saby - url: https://twitter.com/saby_nastasia -o_balystky: - name: Oleksandr Balystky -o_janin: - name: Olivier Janin -o_mansour: - name: Olivier Mansour - avatar: /images/avatar/o_mansour.jpg - url: https://twitter.com/omansour -o_noel: - name: Olivier Noel - avatar: /images/avatar/o_noel.jpg -o_thebault: - name: Oliver Thébault - avatar: /images/avatar/o_thebault.png - url: https://oliver-thebault.com -o_weber: - name: Orann Weber -p_halter: - name: Pascal Halter -p_martin: - name: Pascal Martin - url: https://twitter.com/pascal_martin -p_rambaud: - name: Pauline Rambaud - url: https://twitter.com/pauinegu -pa_bedu: - name: Pierre-Alain BEDU - url: https://twitter.com/pa_bedu -pl_perez: - name: Pierre-Loup Perez - avatar: /images/avatar/pl_perez.jpeg -pt_guillot: - name: Pierre-Thomas Guillot -q_gillie: - name: Quentin Gillie -q_nambot: - name: Quentin Nambot -r_panoyan: - name: Rafi Panoyan - url: https://twitter.com/rafipanoyan -s_drode: - name: Sebastien Drode -s_gougouzian: - name: Sylvain Gougouzian -s_guyon: - name: Sylvain Guyon -s_masson: - name: Sylvain Masson -s_menassa: - name: Serge Menassa -s_haim: - name: Sarah Haïm-Lubczanski - url: https://twitter.com/sarahhaim -s_lescano: - name: Sofia Lescano - url: https://twitter.com/SofLesc - avatar: /images/avatar/s_lescano.jpeg -s_zoccarato: - name: Sylvain Zoccarato - avatar: https://ca.slack-edge.com/T108ZKPMF-UN73NDMTR-1254cd998d50-512 -t_aufort: - name: Timothée Aufort - url: https://twitter.com/TimAufort -t_briset: - name: Thomas Briset -t_courtoison: - name: Thibaud Courtoison -t_crespy: - name: Timothé Crespy - url: https://timothecrespy.fr/ - avatar: /images/avatar/t_crespy.jpg -t_falconnet: - name: Tanguy Falconnet - url: https://twitter.com/TanguyFalconnet - avatar: /images/avatar/t_falconnet.jpg -t_geindre: - name: Thierry Geindre - url: https://github.com/t-geindre/ -t_gianella: - name: Théo Gianella -t_jarrand: - name: Thomas Jarrand -t_sontag: - name: Thomas Sontag -v_chabrier: - name: Valentin Chabrier - url: https://github.com/Eriwyr -v_claras: - name: Valentin Claras - avatar: /images/avatar/v_claras.jpg -v_gallissot: - name: Vincent Gallissot - url: https://twitter.com/vgallissot -v_pelus: - name: Valentin Pelus - url: https://github.com/valentinpelus -y_chauvel: - name: Yann Chauvel -y_clauss: - name: Yves Clauss - avatar: /images/avatar/y_clauss.png -y_frommelt: - name: Yoann Frommelt - avatar: /images/avatar/y_frommelt.jpeg - url: https://github.com/yfrommelt diff --git a/_data/biblio.yaml b/_data/biblio.yaml deleted file mode 100644 index 56970af42..000000000 --- a/_data/biblio.yaml +++ /dev/null @@ -1,7 +0,0 @@ -- authors: John Smith - title: A Title About Citations - key: ref1 - -- authors: Michael's Rose - title: "[Minimal Mistakes](https://mmistakes.github.io/minimal-mistakes/markup-syntax-highlighting)" - key: highlight diff --git a/_data/conferences.yaml b/_data/conferences.yaml deleted file mode 100644 index 5ae7ecd9f..000000000 --- a/_data/conferences.yaml +++ /dev/null @@ -1,128 +0,0 @@ -- title: "Le second écran chez M6Web, another (php) brick in the wall !" - date: 2015-05-13 - author: o_mansour - eventName: PHPTour Luxembourg 2015 - eventUrl: https://event.afup.org/phptourluxembourg2015__programme/ - youtubeId: VPYFnaX_5Tg - -- title: "Retour d’expérience : réaliser des Workers en PHP" - date: 2016-05-23 - author: f_desaintpern - eventName: PHPTour Clermont‑Ferrand 2016 - eventUrl: https://event.afup.org/php-tour-2016/home-phptour-2016/ - youtubeId: 0A5tbrMarGA - -- title: "Machine learning sans magie et sans s'arracher les cheveux" - date: 2019-11-14 - author: n_saby - description: Comprendre le machine learning en prenant l'exemple d'un barbecue. - youtubeId: 5c120IGLHk8 - -- title: "Webpack Workshop" - date: 2020-01-22 - author: a_caron - eventName: Snowcamp 2020 - eventUrl: https://snowcamp.io/fr/ - -- title: "Apache Spark et le machine learning : rêves et réalités" - date: 2020-02-10 - author: n_saby - eventName: Scala IO - eventUrl: https://scala.io/ - youtubeId: 8e2TOelpqds - -- title: "⚡️ Vite ⚡️ the Webpack killer" - date: 2020-06-10 - author: [a_caron, m_mure] - eventName: LyonJS Meetup - eventUrl: https://www.meetup.com/fr-FR/LyonJS/events/278441866/ - -- title: "Webpack Workshop" - date: 2020-09-07 - author: a_caron - eventName: Paris Web - eventUrl: https://www.paris-web.fr/2019/ateliers/webpack-workshop.php - -- title: "Productionizing ML Systems without Fear nor Heroism" - author: n_saby - date: 2021-05-25 - eventName: DataTalks.Club - eventUrl: https://datatalks.club/ - youtubeId: KkOGMaz4Xws - -- title: "⚡️ Vite ⚡️ the Webpack killer" - date: 2021-09-08 - author: [a_caron, m_mure] - eventName: JUG Summer Camp - eventUrl: https://www.jugsummercamp.org/edition/12/presentations/QYeD36ff9h4A8v243Hu3 - -- title: "⚡️ Vite ⚡️ the Webpack killer" - date: 2021-11-10 - author: [a_caron, m_mure] - eventName: Devfest Nantes - eventUrl: https://devfest2021.gdgnantes.com/sessions/_%EF%B8%8F_vite_%EF%B8%8Fthe_webpack_killer/ - -- title: Comment ne pas jeter son application Frontend tous les deux ans ? - date: 2022-02-05 - author: [f_dubost, a_caron] - eventName: Snowcamp 2022 - eventUrl: https://snowcamp.io/fr/ - -- title: "Transformer le load balancing pour optimiser le cache : objectif 50 millions d’utilisateurs" - date: 2022-04-12 - author: v_gallissot - eventName: AWS Summit Paris - eventUrl: https://aws.amazon.com/fr/events/summits/paris/ - -- title: "Préparez et donnez votre premier talk" - date: 2022-04-12 - author: p_martin - eventName: AWS Summit Paris - eventUrl: https://aws.amazon.com/fr/events/summits/paris/ - -- title: "Êtes-vous bien architecturé ?" - date: 2022-04-12 - author: p_martin - eventName: AWS Summit Paris - eventUrl: https://aws.amazon.com/fr/events/summits/paris/ - -- title: "Open Policy Agent avec KICS de chez Checkmarx" - date: 2022-05-13 - author: jy_camier - description: | - Chez Bedrock Streaming, tous le monde est responsable de son infrastructure Cloud : les développeurs backend et frontend, les data analyst, les ingénieurs vidéo et même les Ops et les DevOps ! De ce fait, une part considérable de notre travail consiste à accompagner les développeurs, de la montée en compétence sur l'usage de nos outils jusqu'à la conception d'architecture cloud résilliente. Il s'avère que dans le cadre d'une revue de code, en tant que DevOps, nous répétons souvent les mêmes choses. En mettant en place de l'analyse statique avec KICS et OPA, nous parions sur l'avenir d'un outil et d'une communauté jeune pour nous aider à réduire le temps entre la revue de code et la mise en production: - - en augmentant la qualité de nos infrastructures cloud - - en réduisant les coûts de cette infrastructure - eventName: Docker meetup - eventUrl: https://www.meetup.com/fr-FR/docker-lyon/events/285057478/ - sponsored: true - hosted: true - -- title: "Rust at Bedrock" - date: 2023-04-06 - author: y_clauss - eventName: Meetup Rust Lyon - eventUrl: https://www.meetup.com/fr-FR/rust-lyon/events/292283973/ - sponsored: true - hosted: true - -- title: "Introducing the Tokio stack" - date: 2023-04-06 - author: o_thebault - eventName: Meetup Rust Lyon - eventUrl: https://www.meetup.com/fr-FR/rust-lyon/events/292283973/ - sponsored: true - hosted: true - -- title: "Bienvenue dans le monde merveilleux des systèmes distribués !" - date: 2023-04-13 - author: p_martin - eventName: MiXiT 2023 - eventUrl: https://mixitconf.org/2023/bienvenue-dans-le-monde-merveilleux-des-systemes-distribues- - -- title: "Mentors : super-héros ou super-vilains ?" - date: 2023-05-12 - author: p_rambaud - eventName: AFUP Day Lyon 2023 - eventUrl: https://event.afup.org/afup-day-2023/afup-day-2023-lyon/programme/#4190 - sponsored: true diff --git a/_data/icons.yml b/_data/icons.yml deleted file mode 100644 index 73f709d1f..000000000 --- a/_data/icons.yml +++ /dev/null @@ -1,37 +0,0 @@ -# For the Icons on the footer of the website -# For the Share buttons at the end of the articles, use the "social.yml" -behance: -bitbucket: -calendly: -dribbble: -facebook: -flickr: -github: BedrockStreaming -gitlab: -google-scholar: # e.g. "WXAAOb0AAAAJ" -instagram: -hacker-news: -keybase: -linkedin: bedrock-streaming -mail: # e.g. "sam@mail.com" -map: # e.g. "34.0886/-118.3191" -mastodon: # e.g. "fostodon.org/@sam" -matrix: # e.g. "@sam:matrix.org" -medium: -patreon: -phone: # e.g. "+11111111111" -pinterest: -reddit: -soundcloud: -sms: # e.g. "+11111111111" -stack-exchange: # e.g. "123456789" -stack-overflow: # e.g. "123456789" -steam: -telegram: -tumblr: -twitch: -twitter: Bedrock_Tech -vimeo: -vk: -wordpress: -youtube: "UCSwvTdCWHS6ulRaIqdk7lNw" diff --git a/_data/icons_builder.yml b/_data/icons_builder.yml deleted file mode 100644 index 0637ae5b0..000000000 --- a/_data/icons_builder.yml +++ /dev/null @@ -1,82 +0,0 @@ -# Default data to build the footer icons -# DO NOT MODIFY, use the "icons.yml" instead. -behance: - pre: "https://www.behance.net/" -bitbucket: - pre: "https://bitbucket.org/" -calendly: - pre: "https://calendly.com/" - icon: "far fa-calendar-plus" -dribbble: - pre: "https://www.dribbble.com/" -facebook: - pre: "https://www.facebook.com/" -flickr: - pre: "https://flickr.com/photos/" -github: - pre: "https://github.com/" -gitlab: - pre: "https://gitlab.com/" -google-scholar: - pre: "https://scholar.google.com/citations?hl=en&user=" - icon: "fas fa-user-graduate" -instagram: - pre: "https://instagram.com/" -hacker-news: - pre: "https://news.ycombinator.com/user?id=" -keybase: - pre: "https://keybase.io/" -linkedin: - pre: "https://www.linkedin.com/company/" -mail: - pre: "mailto:" - icon: "fas fa-envelope" -map: - pre: "https://www.openstreetmap.org/#map=15/" - icon: "fas fa-map-marked" -mastodon: - pre: "https://" -matrix: - pre: "https://matrix.to/#/" - icon: "fab fa-connectdevelop" -medium: - pre: "https://medium.com/@" -patreon: - pre: "https://www.patreon.com/" -phone: - pre: "tel:" - icon: "fas fa-phone" -pinterest: - pre: "https://www.pinterest.com/" -reddit: - pre: "https://www.reddit.com/user/" -soundcloud: - pre: "https://soundcloud.com/" -sms: - pre: "sms:" - pos: "?body=Hi" - icon: "fas fa-sms" -stack-exchange: - pre: "https://stackexchange.com/users/" -stack-overflow: - pre: "https://stackoverflow.com/users/" -steam: - pre: "https://steamcommunity.com/id/" -telegram: - pre: "https://t.me/" -tumblr: - pre: "https://" - pos: ".tumblr.com/" -twitch: - pre: "https://twitch.tv/" -twitter: - pre: "https://twitter.com/" -vimeo: - pre: "https://vimeo.com/" -vk: - pre: "https://vk.com/" -wordpress: - pre: "https://" - pos: ".wordpress.com/" -youtube: - pre: "https://www.youtube.com/channel/" diff --git a/_data/language.yml b/_data/language.yml deleted file mode 100644 index 377d5b21b..000000000 --- a/_data/language.yml +++ /dev/null @@ -1,20 +0,0 @@ -# Localization strings -str_follow_on: "Follow on" -str_rss_follow: "Follow RSS feed" -str_share_on: "Share on" -str_add_to: "Add to" -str_email: "Email" -str_tweet: "Tweet" -str_pin_it: "Pin it" -str_next_post: "Next post" -str_previous_post: "Previous post" -str_next_page: "Next" -str_previous_page: "Prev" -str_javascript_required_disqus: "Please enable JavaScript to view comments." -str_no_result_found: "No result found" -str_cookie_approve: "Approve" -str_cookie_disclaimer: "We would like to use third party cookies and scripts to improve the functionality of this website." -str_months: [January, February, March, April, May, June, July, August, September, October, November, December] - -# Localization settings -cusdis_lang: # zh-cn, es, tr, pt-BR diff --git a/_data/social.yml b/_data/social.yml deleted file mode 100644 index e6ed3d0a8..000000000 --- a/_data/social.yml +++ /dev/null @@ -1,16 +0,0 @@ -# RSS specific -rss: true # Icons on the footer -feed: - path: feed.xml # RSS feed path - -# For the share button options at the bottom of the articles -share: - email: true - facebook: false - linkedin: true - pinterest: false - pocket: - reddit: false - tumblr: false - twitter: true - wordpress: diff --git a/_includes/aligner.html b/_includes/aligner.html deleted file mode 100644 index ad88ce529..000000000 --- a/_includes/aligner.html +++ /dev/null @@ -1,19 +0,0 @@ -{% assign images = include.images | split: ',' %} - -{% if include.column == "auto" %} -{% assign column = 100.0 | divided_by: images.size %} -{% elsif include.column > 0 %} -{% assign column = 100.0 | divided_by: include.column %} -{% endif %} - -
- {% for image in images %} -
- {{ image | prepend: '/' | split: '/' | last }} -
- {% endfor %} -
- -{% assign column = false %} diff --git a/_includes/blog/blog.liquid b/_includes/blog/blog.liquid deleted file mode 100644 index 802cb8277..000000000 --- a/_includes/blog/blog.liquid +++ /dev/null @@ -1,37 +0,0 @@ -
- {% unless paginator.posts %} -

There are no blog posts

- {% endunless %} - {% for post in paginator.posts %} - - {% endfor %} -
- -{% include blog/blog_nav.liquid %} diff --git a/_includes/blog/blog_nav.liquid b/_includes/blog/blog_nav.liquid deleted file mode 100644 index de8a3aeda..000000000 --- a/_includes/blog/blog_nav.liquid +++ /dev/null @@ -1,43 +0,0 @@ -{% if paginator.total_pages > 1 %} - -{% endif %} diff --git a/_includes/blog/post_info.liquid b/_includes/blog/post_info.liquid deleted file mode 100644 index a34cd3635..000000000 --- a/_includes/blog/post_info.liquid +++ /dev/null @@ -1,40 +0,0 @@ - diff --git a/_includes/blog/post_nav.liquid b/_includes/blog/post_nav.liquid deleted file mode 100644 index eb10d6938..000000000 --- a/_includes/blog/post_nav.liquid +++ /dev/null @@ -1,19 +0,0 @@ -
- {% if page.next.url %} - - {% endif %} - - {% if page.previous.url %} - - {% endif %} -
diff --git a/_includes/citation.html b/_includes/citation.html deleted file mode 100644 index b05ebecc4..000000000 --- a/_includes/citation.html +++ /dev/null @@ -1,2 +0,0 @@ -{%- assign citation = site.data.biblio | where:"key", include.key | first -%} -{{citation.authors}}, {{citation.title}} \ No newline at end of file diff --git a/_includes/default/footer.liquid b/_includes/default/footer.liquid deleted file mode 100644 index 782372f49..000000000 --- a/_includes/default/footer.liquid +++ /dev/null @@ -1,12 +0,0 @@ -
-

- {{ site.footer_text | default: "Powered by Jekyll with Type on Strap" }}

- -
- - diff --git a/_includes/default/head.liquid b/_includes/default/head.liquid deleted file mode 100644 index 871e73242..000000000 --- a/_includes/default/head.liquid +++ /dev/null @@ -1,109 +0,0 @@ - - - - - {% if site.color_theme == 'auto' %} - - - {% else %} - - {% endif %} - - - - - - - - - - - {% if page.bootstrap %} - - - - - - - - - {% endif %} - - {% if site.katex or site.theme_settings.katex %} - - - - {% endif %} - - {% if site.mermaid %} - - - {% endif %} - - - - - {% if site.matomo and jekyll.environment != "preview" %} - - - {% endif %} - - - - - {% if site.cookie_consent %} - {{ site.data.language.str_cookie_disclaimer | default: "We would like to use third party cookies and scripts to improve the functionality of this website." }} - {{ site.data.language.str_cookie_approve | default: "Approve" }} - - {% endif %} - {% if site.google_analytics %} - - - - - {% endif %} - - - - {% unless page.layout == post %} - - {% endunless %} - {% seo %} - - - - {% feed_meta %} - - - - - {% if site.data.social.twitter %} - - - {% endif %} - - - - diff --git a/_includes/default/navbar.liquid b/_includes/default/navbar.liquid deleted file mode 100644 index eeaf4d6e1..000000000 --- a/_includes/default/navbar.liquid +++ /dev/null @@ -1,45 +0,0 @@ - diff --git a/_includes/default/tags_list.liquid b/_includes/default/tags_list.liquid deleted file mode 100644 index c70aefe31..000000000 --- a/_includes/default/tags_list.liquid +++ /dev/null @@ -1,21 +0,0 @@ -{% assign tags = include.tags | split:'|' | sort | uniq %} - -{% if tags.size > 0 %} -
-
    - {% if tags.size == 1 %} -
  • Tag
  • - {% else %} -
  • Tags
  • - {% endif %} - - {% for tag in tags %} -
  • -

    {{ tag }}

    -
  • - {% endfor %} -
-
-{% else %} -
-{% endif %} diff --git a/_includes/gallery.html b/_includes/gallery.html deleted file mode 100644 index 84e8748fb..000000000 --- a/_includes/gallery.html +++ /dev/null @@ -1,22 +0,0 @@ - - -
-
-
-{% for image in site.static_files %} - {% if image.path contains include.gallery_path %} - {% unless image.path contains '.md' %} - - {% endunless %} - {% endif %} -{% endfor %} -
- - - diff --git a/_includes/portfolio.html b/_includes/portfolio.html deleted file mode 100644 index 1ac7df1da..000000000 --- a/_includes/portfolio.html +++ /dev/null @@ -1,15 +0,0 @@ - -
- {% for item in site.portfolio %} - - {% endfor %} -
diff --git a/_includes/social/cusdis.liquid b/_includes/social/cusdis.liquid deleted file mode 100644 index 67490704e..000000000 --- a/_includes/social/cusdis.liquid +++ /dev/null @@ -1,13 +0,0 @@ -
- -{% if site.data.language.cusdis_lang %} - -{% endif %} - diff --git a/_includes/social/disqus.liquid b/_includes/social/disqus.liquid deleted file mode 100644 index 3becd3936..000000000 --- a/_includes/social/disqus.liquid +++ /dev/null @@ -1,12 +0,0 @@ -
-
- - -
diff --git a/_includes/social/icons.liquid b/_includes/social/icons.liquid deleted file mode 100644 index df87adb6e..000000000 --- a/_includes/social/icons.liquid +++ /dev/null @@ -1,36 +0,0 @@ -{% if site.data.social.rss or site.theme_settings.rss %} -
  • - - - - - - -
  • -{% endif %} - -{% for footer in site.data.icons %} - {% unless footer[1] == nil %} - {% assign brand = footer[0] %} - {% assign id = footer[1] %} - {% assign data = site.data.icons_builder[brand] %} - {% if data.icon == nil %} - {% assign icon = "fab fa-" | append: brand %} - {% else %} - {% assign icon = data.icon %} - {% endif %} -
  • - - - - - - -
  • - {% endunless %} -{% endfor %} diff --git a/_includes/social/share_buttons.liquid b/_includes/social/share_buttons.liquid deleted file mode 100644 index 68313e0c5..000000000 --- a/_includes/social/share_buttons.liquid +++ /dev/null @@ -1,92 +0,0 @@ -{% if site.data.social.share.facebook or site.theme_settings.share_buttons.facebook - or site.data.social.share.twitter or site.theme_settings.twitter - or site.data.social.share.tumblr or site.theme_settings.tumblr - or site.data.social.share.pinterest or site.theme_settings.pinterest - or site.data.social.share.pocket or site.theme_settings.pocket - or site.data.social.share.reddit or site.theme_settings.reddit - or site.data.social.share.linkedin or site.theme_settings.linkedin - or site.data.social.share.wordpress or site.theme_settings.wordpress - or site.data.social.share.email or site.theme_settings.email %} - - - -{% endif %} diff --git a/_includes/social/utterances.liquid b/_includes/social/utterances.liquid deleted file mode 100644 index 35dac6cce..000000000 --- a/_includes/social/utterances.liquid +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/_layouts/conference-list.liquid b/_layouts/conference-list.liquid deleted file mode 100644 index 69a60b3fb..000000000 --- a/_layouts/conference-list.liquid +++ /dev/null @@ -1,117 +0,0 @@ ---- -layout: page ---- - -
    - - - {{ content }} - - {% assign postConferences = site.posts | where: 'layout', 'conference' %} - {% assign allConferences = site.data.conferences | concat: postConferences | sort: 'date' | reverse %} - - {% assign conferencesByYear = allConferences | group_by_exp: "conference", "conference.date | date: '%Y'" %} - - {% for conferenceYear in conferencesByYear %} - {% assign conferencesByEvent = conferenceYear.items | group_by_exp: "conference", "conference.eventName" %} -

    {{ conferenceYear.name }}

    - - {% endfor %} - -

    Replays

    - -

    Here is the list of the replay of talks given during these events:

    - -
    - {% assign videoPosts = allConferences | where_exp: 'conference', 'conference.youtubeId' %} - {% for post in videoPosts %} - {% assign author = site.data.authors[post.author] %} - {% assign date = post.date | default: "today" | date: "%B %-d, %Y" %} - {% if post.url %}{% assign url = post.url %}{% else %}{% assign url = "https://www.youtube.com/watch?v=" | append: post.youtubeId %}{% endif %} - -
    - -
    -
    {{ post.title }}
    -
    - {% if author.name %} -
    {{ author.name }}
    - {% endif %} -
    {{ site.data.language.str_months[x] | default: date | date: "%B" }} {{ date | date: "%d, %Y" }}
    -
    -
    -
    - {% endfor %} -
    -
    \ No newline at end of file diff --git a/_layouts/conference.liquid b/_layouts/conference.liquid deleted file mode 100644 index 48bfe6e58..000000000 --- a/_layouts/conference.liquid +++ /dev/null @@ -1,109 +0,0 @@ ---- -layout: default ---- -
    -
    -
    - {% if page.hide_title %} -
    - {% else %} -

    {{ page.title }}

    - {% include blog/post_info.liquid authors=page.author date=page.date %} - {% endif %} -
    -
    - -
    - {% if page.bootstrap %} -
    - {% endif %} - {{ content }} - {% if page.bootstrap %} -
    - {% endif %} - - {% assign author = site.data.authors[page.author] %} -

    - - Par - {% for author in page.author %} - {% assign authorDetail = site.data.authors[author] %} - {% if authorDetail.url %}{% endif %} - {{ authorDetail.name }} - {% if authorDetail.url %}{% endif %} - {% unless forloop.last %} et {% endunless %} - {% endfor %} - - - {{ page.eventName }} - -

    - - {% if page.youtubeId %} - - {% endif %} - - {% if page.slideshareKey %} - - {% endif %} - - {% if page.conferenceUrl %} -

    Lien vers la conférence

    - {% endif %} -
    - - - {% include social/share_buttons.liquid %} - - - {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %} - {% include default/tags_list.liquid tags=tag_list %} - -
    - - -{% if site.post_navigation or site.theme_settings.post_navigation %} -{% include blog/post_nav.liquid %} -{% endif %} - - -{% if site.comments.utterances.repo and site.comments.utterances.issue-term %} {% include social/utterances.liquid %} {% endif %} - - -{% if site.comments.cusdis_app_id or site.cusdis_app_id %}{% include social/cusdis.liquid %}{% endif %} - - -{% if site.comments.disqus_shortname or site.theme_settings.disqus_shortname or site.disqus_shortname %} -{% include social/disqus.liquid %}{% endif %} - - - diff --git a/_layouts/custom.liquid b/_layouts/custom.liquid deleted file mode 100644 index f238c4b72..000000000 --- a/_layouts/custom.liquid +++ /dev/null @@ -1,37 +0,0 @@ ---- -layout: default ---- - -
    -
    - {% unless page.hide_title %} -

    {{ page.title }}

    - {% endunless %} - {% if page.is_post %} - {% include blog/post_info.liquid authors=page.author date=page.date %} - {% endif %} -
    -
    {{ content }}
    - -
    - - {% if include.is_post %} {% include social/share_buttons.html %} {% endif %} - - - {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %} - {% include default/tags_list.liquid tags=tag_list %} -
    - -
    - - -{% if site.post_navigation %} -{% include blog/post_nav.liquid %} -{% endif %} - - -{% if site.cusdis_app_id %}{% include social/cusdis.liquid %}{% endif %} - - -{% if site.disqus_shortname or site.theme_settings.disqus_shortname %} -{% include social/disqus.liquid %}{% endif %} diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index dc0f72adf..000000000 --- a/_layouts/default.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - {% include default/head.liquid %} - - {% include default/navbar.liquid %} -
    - {{ content }} -
    - {% include default/footer.liquid %} - - diff --git a/_layouts/home.liquid b/_layouts/home.liquid deleted file mode 100644 index 546ce0621..000000000 --- a/_layouts/home.liquid +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: default ---- - -
    - -
    -

    {{ site.header_text | default: "Change header_text in _config.yml"}}

    -
    - - {% include blog/blog.liquid %} - -
    diff --git a/_layouts/page.liquid b/_layouts/page.liquid deleted file mode 100644 index e8f8f647a..000000000 --- a/_layouts/page.liquid +++ /dev/null @@ -1,35 +0,0 @@ ---- -layout: default ---- - -
    - -
    -
    - {% if page.hide_title %} -
    - {% else %} -

    {{ page.title }}

    - {% if page.subtitle %} -

    {{ page.subtitle }}

    - {% endif %} - {% endif %} -
    -
    - -
    - {% if page.bootstrap %} -
    - {% endif %} - {{ content }} - {% if page.bootstrap %} -
    - {% endif %} -
    - - - - {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %} - {% include default/tags_list.liquid tags=tag_list %} - -
    diff --git a/_layouts/post.liquid b/_layouts/post.liquid deleted file mode 100644 index 16bd88330..000000000 --- a/_layouts/post.liquid +++ /dev/null @@ -1,81 +0,0 @@ ---- -layout: default ---- -
    -
    -
    - {% if page.hide_title %} -
    - {% else %} -

    {{ page.title }}

    - {% include blog/post_info.liquid authors=page.author date=page.date %} - {% endif %} -
    -
    - -
    - {% if page.bootstrap %} -
    - {% endif %} - {{ content }} - {% if page.bootstrap %} -
    - {% endif %} -
    - - - {% include social/share_buttons.liquid %} - - - {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %} - {% include default/tags_list.liquid tags=tag_list %} - -
    - - -{% if site.post_navigation or site.theme_settings.post_navigation %} -{% include blog/post_nav.liquid %} -{% endif %} - - -{% if site.comments.utterances.repo and site.comments.utterances.issue-term %} {% include social/utterances.liquid %} {% endif %} - - -{% if site.comments.cusdis_app_id or site.cusdis_app_id %}{% include social/cusdis.liquid %}{% endif %} - - -{% if site.comments.disqus_shortname or site.theme_settings.disqus_shortname or site.disqus_shortname %} -{% include social/disqus.liquid %}{% endif %} - - - diff --git a/_layouts/search.liquid b/_layouts/search.liquid deleted file mode 100644 index c039bf485..000000000 --- a/_layouts/search.liquid +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: page ---- - - - -
    -
    - - -
    - -
    diff --git a/_layouts/tags.liquid b/_layouts/tags.liquid deleted file mode 100644 index 8456ad627..000000000 --- a/_layouts/tags.liquid +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: page ---- - -
    - - - {% assign rawtags = "" %} - {% for post in site.posts %} - {% if post.tags.size > 0 %} - {% assign post_tags = post.tags | join:'|' | append:'|' %} - {% assign rawtags = rawtags | append:post_tags %} - {% endif %} - {% endfor %} - - - {% assign portfolio = site.portfolio | map: 'tags' | join: ',' | split: ',' | uniq %} - {% for tag in portfolio %} - {% assign portfolio_tags = tag | join: '|' | append: '|' %} - {% assign rawtags = rawtags | append: portfolio_tags %} - {% endfor %} - - - {% for page in site.pages %} - {% if page.tags.size > 0 %} - {% assign page_tags = page.tags | join:'|' | append:'|' %} - {% assign rawtags = rawtags | append:page_tags %} - {% endif %} - {% endfor %} - - - {% include default/tags_list.liquid tags=rawtags %} - - -
    - {% for tag in tags %} -

    - {{ tag }} - - -

    - - -
    - - - {% for page in site.pages %} - {% if page.tags contains tag %} -
    - - - {{ page.title }} - - {% include blog/post_info.liquid date=page.date %} -
    - {% endif %} - {% endfor %} - - - {% for post in site.posts %} - {% if post.tags contains tag %} -
    - - - {{ post.title }} - - - {% include blog/post_info.liquid date=post.date %} -
    - {% endif %} - {% endfor %} - - - {% for note in site.portfolio %} - {% if note.tags contains tag %} -
    - - - {{ note.title }} - - - {% include blog/post_info.liquid date=note.date %} -
    - {% endif %} - {% endfor %} - -
    - {% endfor %} - -
    -
    diff --git a/_layouts/video-list.liquid b/_layouts/video-list.liquid deleted file mode 100644 index 6446876af..000000000 --- a/_layouts/video-list.liquid +++ /dev/null @@ -1,68 +0,0 @@ ---- -layout: page ---- - - - -
    - - {{ content }} - -
    - {% for post in site.posts %} - {% if post.tags contains page.filter_tag and post.youtubeId %} - {% assign author = site.data.authors[post.author] %} - {% assign date = post.date | default: "today" | date: "%B %-d, %Y" %} -
    - -
    -
    {{ post.title }}
    -
    - {% if author.name %} -
    {{ author.name }}
    - {% endif %} -
    {{ site.data.language.str_months[x] | default: date | date: "%B" }} {{ date | date: "%d, %Y" }}
    -
    -
    -
    - {% endif %} - {% endfor %} -
    -
    diff --git a/_layouts/video.liquid b/_layouts/video.liquid deleted file mode 100644 index bbb9362e2..000000000 --- a/_layouts/video.liquid +++ /dev/null @@ -1,85 +0,0 @@ ---- -layout: default ---- -
    -
    -
    - {% if page.hide_title %} -
    - {% else %} -

    {{ page.title }}

    - {% include blog/post_info.liquid authors=page.author date=page.date %} - {% endif %} -
    -
    - -
    - {% if page.bootstrap %} -
    - {% endif %} - {{ content }} - {% if page.bootstrap %} -
    - {% endif %} - - {% if page.youtubeId %} - - {% endif %} -
    - - - {% include social/share_buttons.liquid %} - - - {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %} - {% include default/tags_list.liquid tags=tag_list %} - -
    - - -{% if site.post_navigation or site.theme_settings.post_navigation %} -{% include blog/post_nav.liquid %} -{% endif %} - - -{% if site.comments.utterances.repo and site.comments.utterances.issue-term %} {% include social/utterances.liquid %} {% endif %} - - -{% if site.comments.cusdis_app_id or site.cusdis_app_id %}{% include social/cusdis.liquid %}{% endif %} - - -{% if site.comments.disqus_shortname or site.theme_settings.disqus_shortname or site.disqus_shortname %} -{% include social/disqus.liquid %}{% endif %} - - - diff --git a/_posts/2012-05-24-lancement-du-blog-technique-dm6web.md b/_posts/2012-05-24-lancement-du-blog-technique-dm6web.md deleted file mode 100644 index 43da7f346..000000000 --- a/_posts/2012-05-24-lancement-du-blog-technique-dm6web.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: post -title: "Lancement du blog technique d'M6Web" -description: "" -author: - name: M6Web - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [] -image: - feature: - credit: - creditlink: -comments: true -permalink: post/23664141031/lancement-du-blog-technique-dm6web ---- - -Bienvenue sur le blog de la direction technique de M6 Web. - -Vous retrouverez ici, une fréquence qu'on espère des plus régulières, quelques articles et autres retours d'expérience de nos équipes technique. - - - -Attendez vous à manger du PHP, Mysql, Node.js, entendre parler de performance, monitoring, vidéo, html5 etc ;-) - -Bonne lecture à tous. - - - diff --git a/_posts/2012-05-24-performances-php-chez-m6web.md b/_posts/2012-05-24-performances-php-chez-m6web.md deleted file mode 100644 index caebf28af..000000000 --- a/_posts/2012-05-24-performances-php-chez-m6web.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: post -title: "Performances PHP chez M6Web" -description: "" -author: k_dits -category: -tags: [graphite,monitoring,nodejs,php,varnish,webperf,conference] - -comments: true -permalink: post/23671071384/performances-php-chez-m6web ---- - -Voici les slides de la présentation du 23 mai réalisée à l'Epitech de Lyon. - -C’est un retour d’expérience, qui survole un peu tous les axes sur lesquels nous travaillons chez m6web, ayant trait aux optimisations de nos sites. - - - -J’espère que certains points feront l’objet d’autres articles dans le futur ;-) - - - -**[Performances php chez M6Web](https://www.slideshare.net/kennydee/performances-php-chez-m6web "Performances php chez M6Web")** - - diff --git a/_posts/2012-06-01-m6web-au-forum-php-2012-et-au-webevent-4.md b/_posts/2012-06-01-m6web-au-forum-php-2012-et-au-webevent-4.md deleted file mode 100644 index 39a171898..000000000 --- a/_posts/2012-06-01-m6web-au-forum-php-2012-et-au-webevent-4.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -layout: post -title: "M6Web au Forum PHP 2012 et au WebEvent #4" -description: "" -author: k_dits -category: -tags: [php,afup,monitoring,conference] -comments: true -permalink: post/24184111542/m6web-au-forum-php-2012-et-au-webevent-4 ---- - -Cette année, M6Web sponsorise deux événements français majeurs dans le monde du Web : - - - -- le Web Event à Lyon #4 ([https://event.lafermeduweb.net/ ](https://event.lafermeduweb.net/)au centre de congrès de Lyon le 15 juin 2012) -- et le forumPHP 2012 ([https://afup.org/pages/forumphp2012/](https://afup.org/pages/forumphp2012/) la Cité universitaire à Paris le 5 & 6 juin 2012) ! - -A cette occasion, M6Web sera bien représenté : - -- je (Kenny Dits) présenterais chaque évènement des sessions sur le monitoring applicatif en regard de ce que nous faisons au quotidien chez M6Web. [https://afup.org/pages/forumphp2012/sessions.php#632](https://afup.org/pages/forumphp2012/sessions.php#632) -[https://event.lafermeduweb.net/les-sessions#c6](https://event.lafermeduweb.net/les-sessions#c6) -- Olivier Mansour en tant que Vice Président de l’Afup parlera lors de la Keynote de cloture du Forum Php le 6 juin. [https://afup.org/pages/forumphp2012/sessions.php#732](https://afup.org/pages/forumphp2012/sessions.php#732) -- Martin Boronski, notre directeur technique participera également à la table ronde DSI organisée par l’AFUP Paris le 6 Juin. - -Rendez-vous là bas ? ;-) - - - - -Bannière du Forum PHP 2012 - -[![Bannière du Forum PHP 2012](/images/posts/imgob/0-00-30-83-201206-ob_152c4d_bandeau-forum-php-2012-fr-large.jpg) - - -Bannière du Web Event Lyon - -[![Bannière du Web Event Lyon](/images/posts/imgob/0-00-30-83-201206-ob_681156_webeventlyon-jyserai-dark.png) - - - diff --git a/_posts/2012-06-09-m6-web-tait-pr-sent-au-forum-php-2012.md b/_posts/2012-06-09-m6-web-tait-pr-sent-au-forum-php-2012.md deleted file mode 100644 index a2dc56da1..000000000 --- a/_posts/2012-06-09-m6-web-tait-pr-sent-au-forum-php-2012.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: post -title: "M6 Web était présent au Forum PHP 2012" -description: "" -author: o_mansour -category: -tags: [afup,forumphp,conference] -comments: true -permalink: post/24732185644/m6-web-tait-pr-sent-au-forum-php-2012 ---- - -Voici quelques photos des membres d'M6Web prises lors du Forum PHP 2012. - - -Kenny a animé une conférence sur le monitoring applicatif. - -![Kenny a animé une conférence sur le monitoring applicatif.](/images/posts/kenny-monitoring-applicatif.jpg) - - -Martin, notre CTO, a participé une table ronde. - -![Martin, notre CTO, a participé à une table ronde.](/images/posts/martin-table-ronde.jpg) - -Olivier était également présent en tant que membre de l'[Afup](https://www.afup.org "Site de l'afup") - -![Olivier était également présent en tant que membre de l'Afup](/images/posts/olivier-superman.jpg) - - - -Ainsi que Didier et Julien, développeurs dans nos équipes R&D, et trop préssés d'assiter toutes les conférences pour être photographiés. - - - diff --git a/_posts/2012-06-20-m6web-au-web-event-lyon-4.md b/_posts/2012-06-20-m6web-au-web-event-lyon-4.md deleted file mode 100644 index eb795d831..000000000 --- a/_posts/2012-06-20-m6web-au-web-event-lyon-4.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: post -title: "M6Web au Web Event Lyon #4" -description: "" -author: o_mansour -category: -tags: [webevent] -comments: true -permalink: m6web-au-web-event-lyon-4 ---- - -![Une partie de l’équipe de M6 Web au webevent de La ferme du Web.](/images/posts/m6web-webevent.jpg) -Une partie de l’équipe de M6 Web au webevent de La ferme du Web. - - diff --git a/_posts/2012-06-26-monitoring-applicatif-pourquoi-et-comment.md b/_posts/2012-06-26-monitoring-applicatif-pourquoi-et-comment.md deleted file mode 100644 index f9909a46f..000000000 --- a/_posts/2012-06-26-monitoring-applicatif-pourquoi-et-comment.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: post -title: "Monitoring applicatif : Pourquoi et comment ?" -description: "" -author: k_dits -category: -tags: [monitoring,graphite,statsd,conference] -comments: true -permalink: monitoring-applicatif-pourquoi-et-comment ---- - -Voici les slides de la présentation que j'ai donnée au Forum PHP 2012, et au WebEvent 4 : - -Vous êtes développeur, chef de projet technique ou même responsable et vous souhaitez avoir de la visibilité sur le fonctionnement de vos applicatifs, ou sur la plateforme sur laquelle ils sont hébérgés ? - -Nous étudierons comment, grâce à des outils simples (StatD / Graphite / Log BDD) et nos expériences chez M6Web, mettre en place un monitoring applicatif ultra complet. - -Ce monitoring vous permettra de retrouver la vue sur vos projets, pour mieux anticiper la charge, detecter la root cause en cas d'incident et connaitre l'état de chacun de vos services .. - - - -**[Monitoring applicatif : Pourquoi et comment ?](https://www.slideshare.net/kennydee/monitoring-applicatif-pourquoi-et-comment "Monitoring applicatif : Pourquoi et comment ?")** - - diff --git a/_posts/2012-06-27-cr-velocity-conference-day-1-dev-webperf.md b/_posts/2012-06-27-cr-velocity-conference-day-1-dev-webperf.md deleted file mode 100644 index 51bc1a73b..000000000 --- a/_posts/2012-06-27-cr-velocity-conference-day-1-dev-webperf.md +++ /dev/null @@ -1,216 +0,0 @@ ---- -layout: post -title: "CR Velocity Conference 2012 : Day 1 (Dev/Webperf)" -description: "" -author: k_dits -category: -tags: [velocity,conference,webperf,mobile] -comments: true -permalink: cr-velocity-conference-day-1-dev-webperf ---- - -Nous voici à Santa Clara, CA, ce lundi 25 juin pour notre première Velocity Conference (Web Performance & Operations) aux states (nous avions déjà pu avoir un aperçu l'année dernière avec la première Velocity Europe Berlin). - - - -![CR Velocity Conference 2012 : Day 1 (Dev/Webperf)](/images/posts/velocityus2012-welcome.jpg) - -L'évenement se situe au Convention Center, et la première chose que nous remarquons, c'est la taille démesurée du lieu ! Et pour cause, 800 personnes sont attendues ! - -Pour cette première journée sous le signe des tutoriaux, il y avait entre trois et quatre tracks parallèles de 90 minutes chacun, dont un réservé aux sponsors. Dur de faire des choix parmi toutes les confs et le programme alléchant de la journée ! - -Je m'oriente donc sur le coté Dév / WebPerf / Monitoring, pendant que mon collègue, Francois, part sur le coté operations qu'il couvrira dans une autre série de CR. - - - - - -#### [WebPerf] Understanding and Optimizing Web Performance Metrics, par Bryan McQuade de chez Google - -Au menu : - -- Explication des métriques de performance orientées réseau -- Fonctionnement du parser HTML5 -- Explication des métriques de performance orientées rendu -- Démo de Critical Path Explorer (PageSpeed Online) -- Optimisation de l'affichage perçu utilisateur - -Les slides parlent d'elles même et sont disponibles ici : -[https://perf-metrics-velocity2012.appspot.com](https://perf-metrics-velocity2012.appspot.com) . - -Elles parcourent l'intégralité des notions de WebPerf existantes "à jour", dont certaines peu connues comme la Speculative loading, et permettent surtout de comprendre ce qu'elles signifient très précisément. - -A retenir aussi le SSL Server Test ici [https://www.ssllabs.com/ssltest/](https://www.ssllabs.com/ssltest/) - -C'est donc un Must Read pour tout ceux que la WebPerf intéresse. - -**Page Speed Insights : ** - -Nous avons eu droit ensuite une démo très intéressante de la fonctionnalité Critical Path Explorer (déjà entraperçue en version béta à la Velocity Europe), et qui sera je pense lancée officiellement demain. - -En attendant et pour la tester : -[https://developers.google.com/speed/pagespeed/insights?velocity=1](https://developers.google.com/speed/pagespeed/insights?velocity=1) - -Cette fonctionnalité permet, comme son nom l'indique, de montrer le chemin critique de votre page. Sur les quelques tests que j'ai pu effectués, c'est très efficace. On apprécie le détail au niveau du waterfall sur l'exécution des javascripts, l'affichage de "qui bloque quoi", ou le render css. A approfondir de toute urgence ! - - - -Bryan McQuade - -Bryan McQuade (Google) - - - -La Lightning Démo de Page Speed ayant eu lieu le lendemain - - - - -#### [WebPerf] A Web Perf Dashboard: Up & Running in 90 Minutes, par Cliff Crocker et Aaron Kulick. - -L'idée ici était de montrer en 90 minutes avec quels outils obtenir un dashboard orienté WebPerf, qui sera fourni comme une VM à la fin de la session. - -Après une longue présentation orale d'outils plutôt connus désormais comme : - -- [Boomerang.Js](https://github.com/yahoo/boomerang) -- [WebPageTest instance privée + API](https://www.webpagetest.org) -- [Piwik](https://piwik.org/) (clone de Google Analytics) -- [StatsD](https://github.com/etsy/statsd) (collecteur pour Graphite) -- [Graphite](https://graphite.wikidot.com/) -- [REDbot.org](https://redbot.org/) -- cUrl -- [ShowSlow](https://www.showslow.com/) -- … - -Les deux conférenciers nous présentent un site réalisé pour l'occasion : "Sally Squirrel’s Dance Emporium", hommage aux gifs animés d'écureuils dansant, et nous font une démo (un peu capricieuse) de leur dashboard basé sur Piwik, alternative Google Analytics avec un système de "plugin" visiblement pour aggréger un peu le tout. - -L'idée est clairement bonne, le résultat ne m'a pas convaincu titre personnel. On vante au départ de la présentation, le faite qu'une image bien choisie suffit au monitoring, et qu'un dashboard ne doit pas être complexe, et au final, on se retrouve avec un dashboard remplis d'images en tout genre, de données tabulaires, … complexe quoi ... - -**Piwik en alternative Analytics ?** - -Je doute aussi de la robustesse de Piwik que nous avions déjà étudier, et voir des pages listant les temps de latence ou de chargement utilisateur par utilisateur, me fait réellement peur avec une audience dépassant la centaine de personnes la journée … - -Pour l'anecdote, sur le wiki de Piwik, on lit cette phrase que je vous laisse apprécier : "If your website has more than a few hundreds visits per day (bravo!), waiting for Piwik to process your data may take a few minutes" - -Je vous invite tout de même à lire les slides : -[https://assets.en.oreilly.com/1/event/79/A%20Web%20Perf%20Dashboard_%20%20Up%20_%20Running%20in%2090%20Minutes%20Presentation.pptx](https://assets.en.oreilly.com/1/event/79/A%20Web%20Perf%20Dashboard_%20%20Up%20_%20Running%20in%2090%20Minutes%20Presentation.pptx) - -Ainsi qu'à tester la VM mise à disposition, car le travail derrière est conséquent, et peut correspondre à certains, ou peut au moins donner des idées pour d'autres : [https://t.co/uLv1fX1A](https://t.co/uLv1fX1A) - -**A retenir : ** - -A retenir aussi dans cette présentation, tout le bien qui a été dit de Graphite (même si je ne suis plus convaincre la dessus), et de quelques features pour lesquelles j'étais passée travers : - -- Support du SVG ( &format=svg) qui va enfin nous permettre de tester l'enrichissement des graphs par du contenu "connexe" (liste des erreurs 404 sur le graph lorsque l'on clic sur un point, nom du développeur ayant fait la mise en production etc) -- Les fonctions de HoltWinter afin d'avoir des tendances hautes et basses pour mieux savoir quand alerter par exemple. - - - - - -#### [WebPerf] How to Walk Away From Your Outage Looking Like a HERO par Teresa Dietrich (WebMD), Derek Chang (WebMD) - -L'une des conférences que j'attendais beaucoup : le titre annonçait un talk sur la gestion d'incident avec un coté humoristique. - -Les deux conférenciers ont présentés des templates très complet de gestion d'incident qu'ils réalisent pour des posts-mortems qu'on peut retrouver ici : [https://www.teresadietrich.net/?page_id=37](https://www.teresadietrich.net/?page_id=37) - -Personnellement, il me parait très important de réaliser des posts mortems. Mais si c'est pour passer plus de temps à rédiger des rapports d'incidents trop complet qu'on ne relira jamais qu'a en tirer un quelconque bénéfice, cela me parait inutile. - -Du coup, la première demi-heure a consisté à présenter ces templates, lire et expliquer quelques incidents ayant eu lieu chez WebMD. - -J'ai, comme une bonne partie de la salle, fait l'impasse rapidement : entre le sujet dans lequel je ne suis jamais rentré ainsi que des slides avec beaucoup de texte illisible passés les premiers rangs de la très grande salle, je n'ai pas accroché. - -A revoir tête reposée : [https://velocityconf.com/velocity2012/public/schedule/detail/23615](https://velocityconf.com/velocity2012/public/schedule/detail/23615) (slides non dispo à l'heure actuelle) - - -Teresa Dietrich and Derek Chang - -Teresa Dietrich (WebMD), Derek Chang (WebMD) - - - - -#### [WebPerf] The 90-minutes Mobile optimization life cycle par Hooman Beheshti (VP strangeloop) - -Conférence orientée WebPerf Mobile. - -Ici, on retrouve tout ce que j'aime dans les conférences Vélocity : - -- Un conférencier avec un grand talent d'orateur : précis, drôle et captivant -- Un sujet très maitrisé -- Des slides propres et parlantes même sans avoir assisté au talk -- Des débats lancés … - -L'idée était de partir d'un site, au hasard Oreilly.com, puis le site mobile velocityconf.com par la suite, et de démontrer les étapes d'optimisation WebPerf, étape par étape, avec à chaque fois, ce que l'on souhaite obtenir, ce que l'on obtient réellement, et une comparaison vidéo du changement. - -Des points ont été approfondis comme la gestion du cache, via LocalStorage, du fonctionnement des CDN (pour le mobile), du Pipellining HTTP, de la congestion TCP etc … - -Beaucoup d'outils ont aussi été mentionnés pour la WebPerf mobile : - -- Chrome remote debugging : [Http://developers.google.com/chrome/mobile/docs/debugging/](Http://developers.google.com/chrome/mobile/docs/debugging/) -- iWebInspector for IOS simulator : [www.iwebinspector.com](https://www.iwebinspector.com) -- Weinre : Remote debugging from the desktop for what the phone is doing : [https://people.apache.org/~pmuellr/weinre/](https://people.apache.org/~pmuellr/weinre/) -- Aardwolf : Remote js debugging [lexandera.com/aardwolf](https://https://lexandera.com/aardwolf/) -- Mobile Perf Bookmarklet : [stevesouders.com/mobileperf/mobileperfbkm.php](https://www.stevesouders.com/mobileperf/mobileperfbkm.php) -- Pcap2har : Turn packet captures to waterfalls [https://pcapperf.appspot.com](https://pcapperf.appspot.com) -- … - -Bref, un très bon panorama pour la WebPerf mobile avec deux cas concret d'étude, chacun avec deux approches différentes : - -- Améliorer les métriques de WebPerf pour le site d'Oreilly -- Améliorer la perception utilisateur sans regarder les métriques pour le site mobile de la Vélocityconf - -Slides dispo ici : [https://www.strangeloopnetworks.com/blog/the-90-minute-mobile-optimization-life-cycle/](https://www.strangeloopnetworks.com/blog/the-90-minute-mobile-optimization-life-cycle/) - -Je vous invite aussi à regarder son interview ci dessous. - - - - - -![CR Velocity Conference 2012 : Day 1 (Dev/Webperf)](/images/posts/velocityus-akamai-pool.jpg) - -#### [Event] Akamai Pool Party - -Cette journée touche à sa fin avec une Pool Party extérieure par Akamai avec un orchestre (qui nous joué notamment le thème de Mario ! Très fun), beaucoup à boire, et beaucoup à manger (légumes tremper dans du brie chaud, WTF ?). L'occasion de rencontrer quelques sponsors et 2 autres français. :-) - - - -![DevOps drinking session / @jstinson](/images/posts/velocityus-akamai-pool2.jpg) -DevOps drinking session / @jstinson - - - - -#### [Event] Ignite Sessions - -A 19h30 avait lieu les Ignite sessions, des confs "lightning talks" de 5 minutes sur des sujets divers, certains très intéressant comme : - -- le "Perceptual Diff" par un ingénieur de chez Google, pour être alerté (par l'intégration continue) lorsque la page du Service customers de chez Google change. [Photos de la présentation ici](https://www.onebigfluke.com/2012/06/i-showed-how-perceptual-diffs-are-core.html) + [https://pdiff.sourceforge.net/](https://pdiff.sourceforge.net/) -- les #lolops, avec une série de Twitt orientée Devops à mourir de rire : Voir ici [https://www.slideshare.net/cwestin63/lolops-a-years-worth-of-humorous-engineering-tweets](https://www.slideshare.net/cwestin63/lolops-a-years-worth-of-humorous-engineering-tweets) -- ... - -Le concept est vraiment efficace avec des speakers ultra dynamique et pour la majorité très drôle. - -Mention spéciale pour la partie centrale, où 11 personnes de la salle (dont certains speakers, Allspaw et Souders en tête), avait 1 à 2 minutes pour improviser sur des slides plutôt très drôle qu'ils n'avaient jamais vu. - -J'espère que les vidéos seront disponible car c'était juste hilarant au possible. Je ne m'attendais pas à pleurer de rire non stop ici :-) - - - -![CR Velocity Conference 2012 : Day 1 (Dev/Webperf)](/images/posts/velocityus2012-vide.jpg) - -#### Conclusion - -Excellente première journée, déjà des tonnes d'infos à condenser / retenir, et ce n'était que le premier jour ! - -Sinon l'organisation est impeccable, lieu exceptionnel, wifi public qui fonctionne, repas de très bonne qualité (et table qui plus est), pas mal de multiprises dans les salles, à boire à volonté … La grande classe ! - -Les comptes rendus des prochaines journées et des sessions orientés Ops suivre ;-) - -N'hésitez pas à faire un maximum de retour sur ce compte rendu, cela nous aidera et nous motivera pour les prochains ;-) - -P.S: Retrouvez moi sur Twitter : [@kenny_dee](https://twitter.com/#!/kenny_dee) - - - diff --git a/_posts/2012-06-28-cr-velocity-conference-2012-day-2-devops-webperf.md b/_posts/2012-06-28-cr-velocity-conference-2012-day-2-devops-webperf.md deleted file mode 100644 index b86da4a9d..000000000 --- a/_posts/2012-06-28-cr-velocity-conference-2012-day-2-devops-webperf.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -layout: post -title: "CR Velocity Conference 2012 : Day 2 (DevOps/WebPerf)" -description: "" -author: k_dits -category: -tags: [velocity,conference,webperf,devops,mobile] -comments: true -permalink: cr-velocity-conference-2012-day-2-devops-webperf ---- - -Compte rendu des tracks DevOps/WebPerf de cette deuxième journée de cette Vélocity Conférence à Santa Clara (Californie) qui marque l'ouverture "officielle" de la conférence, la veille étant considérée comme des conférences bonus orientées Tutoriaux. - - -La matinée offrait un track unique dans une salle gigantesque. - -![CR Velocity Conference 2012 : Day 2 (DevOps/WebPerf)](/images/posts/velocityus2012-day2.jpg) - -Vidéo d'intro à la Vélocity ! - - - - -L'ouverture officielle est donc présentée par Steve Souders (Google) et John Allspaw (Etsy), toujours dans un show l'américaine, et même déguisés. -![CR Velocity Conference 2012 : Day 2 (DevOps/WebPerf)](/images/posts/velocityus2012-intro.jpg) - -S'enchaine ensuite un condensé de session plutôt courte par des acteurs très prestigieux du web. - -*(Crédit photo : https://instagr.am/p/MV5xAAJLSt/ )* - - - - - -#### [DevOps] Building for a billion Users, par Jay Parikh (Facebook) - -Première conférence du matin, avec une présentation du "VP of Infrastructure Engineering at Facebook". - -On suis avec attention, une présentation très dense de l'infrastructure de Facebook, avec quelques chiffres hors normes. - -La philosophie Facebook est présentée en 4 points : - -1. Focus on Impact -2. Move Fast -3. Be Bold -4. Be Open - -Avec une explication sur les fameux Bootcamp cher Facebook, formation obligatoire auquelle tout le monde participe en rentrant chez Facebook. - -Une présentation très brève des outils internes utilisés et développés par Facebook : Perflab, GateKeeper (sorte de Feature Flipping), Claspin, Tasks, SevManager ... - -Une explication sur les procédures de déploiement chez Facebook et leur gestion du cache, sur leur volonté de constamment tout refaire, pour toujours être meilleur. - - - -![CR Velocity Conference 2012 : Day 2 (DevOps/WebPerf)](/images/posts/velocityus2012-facebook.jpg) -Et pour finir, une anecdote assez drôle sur un incident ayant eu lieu chez Facebook, où toutes les fonctionnalités "non terminées" se sont un jour retrouvées en production. - -Bref, une conférence intéressante, mais très dense, dont je vous conseille de regarder la vidéo çi dessous. - - - -> "Fix More, Whine less." Jay Parikh - - - - - - -#### [DevOps] Investigating Anomalies, par John Rauser (Amazon) - -Belle surprise de la journée, avec cette conférence sur la gestion d'incident, qui raconte l'histoire de l'épidémie de Cholera ayant eu lieu à Londres en 1854, et comment John Snow, trouver l'origine de l'épidémie, en se concentrant sur les données, et non pas seulement sur les chiffres. - - - -> "Explaining anomalies often makes your theroy bulletproof" John Rauser - - -Une deuxième partie était concentrée sur le fait d'étudier les extremités sur vos échantillons de manière à trouver ce qui n'allait pas. Point de vue très instructif. - -La vidéo ci dessus est un "must-see" de la Vélocity. - - - -> "Look at the extremes and you'll find things that are broken" John Rauser - - - - - - -#### [DevOps] Building Resilient User Experiences, par Mike Brittain (Etsy) - -Le message autour de cette présentation, est que votre application DOIT s'adapter aux incidents. Si possible faire en sorte que cela ne soit même pas percu par la plupart de vos internautes. En découpant chacune des fonctionnalités de votre site, vous devez pouvoir ne pas afficher celle qui ne fonctionne pas correctement sans que cela impact vos utilisateurs (Graceful Degradation). - -Les slides sont disponible ici : [https://www.slideshare.net/mikebrittain/building-resilient-user-experiences-13461063](https://www.slideshare.net/mikebrittain/building-resilient-user-experiences-13461063) - - - - - - - -#### [WebPerf] Predicting User Activity to Make the Web Fast, par Arvind Jain (Google), Dominic Hamon (Google) - -La présentation commence avec un rappel sur "How Fast is the web today". - En quelques chiffres : - -- Chrome ~2.3s/5.4s page load time (median/mean) -- Google Analytics ~2.9s/6.9s page load time (median/mean) -- Mobile ~4.3s/10.2s page load time (median/mean) - - D'autres infos sont partagées venant du très utile [HttpArchive](https://httparchive.org/) ... - -On assiste ensuite la présentation des fonctionnalités de "Prefetch" de google et du Prerendering en place dans la barre de recherche de Chrome : "Omnibox", ceci ayant pour but de rendre le web encore plus rapide. - -Tout cela donne des idéées sur la façon de prédire ce que vont faire les internautes, et sur nos gestions d'"autocomplete". - - - - - -![CR Velocity Conference 2012 : Day 2 (DevOps/WebPerf)](/images/posts/velocityus2012-jason.jpg) - -#### [WebPerf] Performance Implications of Responsive Web Design, par Jason Grigsby (Cloud Four) - -Une autre conférence que j'attendais grandement, sur le Responsive Web Design. Le sujet est parfaitement maitrisé, et tous les reproches que je peux faire cette techno en ce moment, sont mentionnés, expliqués, et certaines solutions ou idées sont données ! Du tout bon. - -A retenir, la méthode conseillée qui est de faire du Mobile First Responsive Web design, c'est dire commencer par la version mobile, puis faire la version web, et non l'inverse. - -Les slides ici : [https://speakerdeck.com/u/grigs/p/performance-implications-of-responsive-design](https://speakerdeck.com/u/grigs/p/performance-implications-of-responsive-design) - -La conférence n'étant pas disponible en vidéo, vous pouvez déjécouter Jason Grisby lors d'une interview suite sa conférence en vidéo si dessous. - -*(Crédit photo : [https://www.flickr.com/photos/stuart-dootson/4024407198/](https://www.flickr.com/photos/stuart-dootson/4024407198/) )* - - - - -Jason Grigsby interview la Vélocity Conf 2012 - - -![CR Velocity Conference 2012 : Day 2 (DevOps/WebPerf)](/images/posts/velocity2012-jason.jpg) - -#### [WebPerf] RUM for Breakfast - Distilling Insights From the Noise, par Buddy Brewer (LogNormal), Philip Tellis (LogNormal, Inc) & Carlos Bueno (Facebook) - -RUM aka Real User Monitoring est un terme qui est revenu très régulièrement durant cette Velocity. Nous avions pour cette conférence notamment, deux personnes de LogNormal dont le créateur de Boomerang.js : [https://yahoo.github.com/boomerang/doc/ ]( https://yahoo.github.com/boomerang/doc/)et Carlos Bueno de Facebook. - -La présentation expliquait comment mesurer des métriques de performances venant d'utilisateurs réel, comment analyser toutes les données, en filtrer le "bruit", et quoi en tirer. Le tout était très instructif, surtout sur la partie filtrage de données (Band Pass Filtering, IQR Filtering ..). - -Slides : [https://www.slideshare.net/buddybrewer/rum-for-breakfast-distilling-insights-from-the-noise](https://www.slideshare.net/buddybrewer/rum-for-breakfast-distilling-insights-from-the-noise) - - - -![CR Velocity Conference 2012 : Day 2 (DevOps/WebPerf)](/images/posts/velocityus2012-bouncerate.jpg) - -#### [WebPerf] Rendering Slow? Too Much CSS3? Ask RSlow, par Marcel Duran (Twitter Inc.), David Calhoun (CBS Interactive) - -On retrouve ici une présentation assez fun du résumé de la conf sous forme de Waterfall (voir photo). - -Le talk a ensuite abordé les notions de rendering au niveau CSS avec au départ un cas d'étude : Réaliser le logo de ySlow en CSS3 entièrement. On observe de manière assez drôle le rendu finale dans les différents navigateurs (éclat de rire général sur IE off course). Vous pouvez les retrouver sur les slides ci dessous. - -La conférence part ensuite sur quelques tests réalisés sur Chrome uniquement (à prendre donc avec des pincettes) sur les performances CSS3 de chacun de ces cas : - -1. background-image vs css3 gradient -2. vs css background-image -3. @font-face vs vs sans-serif -4. animated gif vs css3 spinner - -L'étude est intéressante, et mériterais d'être creusée sur d'autres navigateurs, mais cela est rendu très difficile par le fait que seul Chrome sait exporter les données de rendu de sa Timeline ... - -Les slides sont dispo ici : -[https://docs.google.com/presentation/d/1b7rdeXYdmL3lmT24GAaC14eOSkq5qt6FM-yLSeFykQk/edit?pli=1](https://docs.google.com/presentation/d/1b7rdeXYdmL3lmT24GAaC14eOSkq5qt6FM-yLSeFykQk/edit?pli=1) - - - - - -#### [WebPerf] Time To First Tweet, par Dan Webb, par (Twitter Inc) & Rob Sayre (Twitter) - -Dan et Rob nous parle performances coté client chez Twitter, et la réecriture du Front-End. - -La notion de Time To First Tweet, correspond au temps de navigation jusqu'a l'affichage du premier twiit sur la Timeline. Cette mesure est prise grace à la Navigation Timing Api, supportée dans IE>=9, Firefox & Chrome notamment. - -Twitter à aussi abandonné progressivement, l'utilisation des hashbangs (les #! dans l'url), pour utiliser la PushState Api, ainsi que le templating coté client ([Mustache.js](https://mustache.github.com/) et [Hogan.js](https://twitter.github.com/hogan.js/)) pour repasser sur un templating serveur avec leur migration de Ruby vers Java, avec au final 75% de temps client gagné sur le 95th Percentile ! - -Conférence très intéressante, notamment sur la manière de charger les Javascripts. - -Plus de détail sur le blog technique de Twitter : [https://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html](https://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html) - -Les slides sont disponible : [https://speakerdeck.com/u/danwrong/p/time-to-first-tweet](https://speakerdeck.com/u/danwrong/p/time-to-first-tweet) - - - - - -#### Conclusion Day 2 : - -Encore une journée riche en informations et idées. Le rythme étant beaucoup plus soutenu, et la fatigue s'accumulant, il n'était pas évident d'être à 100% dans chaque talk :-) - -En attendant le CR Ops, et celui du Day 3, vous pouvez relire le CR du Day 1 : -[https://tech.bedrockstreaming.com/cr-velocity-conference-day-1-dev-webperf](/cr-velocity-conference-day-1-dev-webperf) - -P.S : Retrouvez moi sur twitter : [@kenny_dee](https://twitter.com/#!/kenny_dee) - - - -[Playlist Youtube Velocity US 2012](https://www.youtube.com/playlist?list=PL80D9129677893FD8) diff --git a/_posts/2012-06-28-cr-velocity-conference-2012-day-3-devops-webperf.md b/_posts/2012-06-28-cr-velocity-conference-2012-day-3-devops-webperf.md deleted file mode 100644 index a40db368b..000000000 --- a/_posts/2012-06-28-cr-velocity-conference-2012-day-3-devops-webperf.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -layout: post -title: "CR Velocity Conference 2012 : Day 3 (DevOps/WebPerf)" -description: "" -author: k_dits -category: -tags: [velocity,conference,webperf,devops,mobile] -comments: true -permalink: cr-velocity-conference-2012-day-3-devops-webperf ---- - -Dernière journée de cette monstrueuse conférence qu'est la Vélocity Conférence. - -On commence dans la joie et la bonne humeur avec la "Seven Databases Song" :D - - - - - -#### [Mobile WebPerf] The Performance of Web vs. Apps, par Ben Galbraith (Walmart.com) & Dion Almaer (Walmart.com) - -![CR Velocity Conference 2012 : Day 3 (DevOps/WebPerf)](/images/posts/velocityus2012-walmart.jpg) - -Petit sujet assez trollesque sur les WebApps vs Apps. Conférence hyper énérgétique et très drôle ! Notamment le passage à 12mn dans la vidéo, où l'on compare le mode de distribution des apps natives à ce que cela donnerait si les show tv devraient être distribués de la même manière en prenant l'exemple de la série Friends : Hilarant ! - -L'idée intéressante sur la fin du talk, concerne le rendu de l'application, qui grâce [Node.js](https://nodejs.org/) (dispo désormais en v0.8.0 enfin) peut être aussi bien fait coté client que serveur suivant le client qui demande. A creuser. - - - - - -#### [WebPerf] Akamai Internet Insights, Stephen Ludin (Akamai) - -![CR Velocity Conference 2012 : Day 3 (DevOps/WebPerf)](/images/posts/velocityus2012-akamai.jpg) - -Petit talk de Stephen Ludin "Chief Architect for Akamai’s Site Acceleration and Security group". - -Après une présentation assez hallucinante en quelques chiffres du traffic et des données qui passent chez Akamai : - -Toutes les 60 secondes => 1 milliard 3 de logs, + de 6200 heures de vidéos streamés ... - -Il a aussi partagé une initiative louable et très intéressante sur un projet de partage des données récoltées chez Akamai : [https://www.akamai.com/io](https://www.akamai.com/io) - -On y observe quelques statistiques (relativement peu date) sur les browsers notamment. On voit d'ailleurs quelque chose d'assez fun sur les IE8 : chaque weekend, on apercoit une baisse de présence sur IE8 (qui se retrouve sur d'autres navigateurs plus récent) ... Bref, on voit encore que c'est le monde de l'entreprise qui ralenti la propagation des navigateurs récents ! - -Source : -[https://www.akamai.com/html/io/io_dataset.html#stat=browser_ver&top=5&type=line&start=20120601&end=20120626&net=n](https://www.akamai.com/html/io/io_dataset.html#stat=browser_ver&top=5&type=line&start=20120601&end=20120626&net=n) - -Et slides ici : -[https://assets.en.oreilly.com/1/event/79/Akamai%20Internet%20Insights%20%20Presentation.pptx](https://assets.en.oreilly.com/1/event/79/Akamai%20Internet%20Insights%20%20Presentation.pptx) - - - - -#### Lightning Demos, par Marcel Duran (Twitter Inc.), Nat Duca (Google), Lindsey Simon (Twist) - -![CR Velocity Conference 2012 : Day 3 (DevOps/WebPerf)](/images/posts/velocityus2012-marcel.jpg) - -Ensuite, viennent trois sessions de Lightning Talk : 5 minutes pour présenter un sujet. - -On commence par Marcel Duran, créateur de [Yslow](https://yslow.org/), célèbre extension WebPerf de Firebug à l'origine, qui fait son petit bonhomme de chemin depuis : - -- Disponible dans quasiment tous les browsers -- Ruleset personnalisable (cf C3PO voir plus bas) -- Une version en ligne de commande (en Node.Js) pour extraire les données YSlow partir d'un [HAR](https://www.softwareishard.com/blog/har-12-spec/) : [https://github.com/marcelduran/yslow/wiki/Command-Line-%28HAR%29](https://github.com/marcelduran/yslow/wiki/Command-Line-%28HAR%29) -- Un serveur Node.js que vous pouvez tester ici nécessitant aussi un HAR : [https://yslow.nodester.com/](https://yslow.nodester.com/) -- et le meilleur pour la fin, une version pour [Phantom.Js](https://phantomjs.org/) (Projet très impressionnant d'Headless Browser) qui vous permet de simplement mentionner l'url et d'avoir le résultât en sortie ! Avec en plus la possibilité via le format TAP (Test Any Protocol), d'intégrer les résultats dans votre Intégration Continue pour éviter les régressions. Juste ultime, tout est expliqué sur ce Github : [https://github.com/marcelduran/yslow/wiki/PhantomJS](https://github.com/marcelduran/yslow/wiki/PhantomJS) - -J'ai hâte d'implémenter tout ca chez M6Web :) Une vidéo à voir donc absolument : - - - - - -![CR Velocity Conference 2012 : Day 3 (DevOps/WebPerf)](/images/posts/velocityus2012-nat.jpg) - -On continue dans le lourd, avec Nat Duca qui travaille sur le développement du navigateur Chrome et qui nous démontrer une feature très bas niveau mais au combien intéressante : le [chrome://tracing/](chrome://tracing/) - -Cette fonctionnalité va vous permettre de profiler les actions du navigateur au plus bas niveau possible. Encore un excellent nouvel ajout au niveau du panel d'outillage du browser Chrome destination des développeurs. Voir vidéo ci dessous : - - - - - -![CR Velocity Conference 2012 : Day 3 (DevOps/WebPerf)](/images/posts/velocityus2012-browserscope.jpg) - -Et pour finir cette jolie session de Lightning Talk, Lindsey Simon, nous présenté Browserscope : [https://www.browserscope.org/](https://www.browserscope.org/) - -Outil dont la puissance et l'interêt pour tout développeurs Front-end Desktop ou Mobile n'est plus démontrer. - -Si vous ne connaissez pas, passez 5 minutes de votre temps sur cette vidéo : - - - - - - - -#### [WebPerf] Browsers, par Luz Caballero (Opera Software), Tony Gentilcore (Google), Taras Glek (Mozilla Corporation) - -Petite déception sur cette classique des Vélocity, où les talks ce sont plutôt concentré sur les nouveautés des browsers mobile de Google et Opéra Mini, et où le gars de Mozilla n'a pas jouer le jeu et préféré parler de la lenteur du SetTimeout Javascript ainsi que de l'api LocalStorage ... - -Slide Mozilla : -[https://people.mozilla.com/~tglek/velocity2012/#/step-1](https://people.mozilla.com/~tglek/velocity2012/#/step-1) - -Slide Opéra mini avec notes : -[https://www.slideshare.net/gerbille/speed-in-the-opera-mobile-browsers-13476236](https://www.slideshare.net/gerbille/speed-in-the-opera-mobile-browsers-13476236) - -Concernant Google, la conférence par Tony Gentilcore (créateur de FasterFox pour ceux qui ce souviennent) était plus intéressante, déja par l'annonce suivante : - - - -> Chrome for Android will be the default browser starting with Jelly Bean - - Tony Gentilcore - - -Il a aussi parlé du fonctionnement de WebKit, du Compositor Thread, ainsi que du [Chrome Remote Debugging](https://wesbos.com/remote-debugging-mobile-chrome-android/) - -Pour info, Google a peu de temps après annoncé [la présence de Chrome sur iOs !](https://twitter.com/googlechrome/status/218394457257684993) - - - -#### [DevOps] Simple log analysis and trending, par Mike Brittain (Etsy) - -![CR Velocity Conference 2012 : Day 3 (DevOps/WebPerf)](/images/posts/velocityus2012-brittain.jpg) - -On retrouve Mike sur un sujet un peu différent : Comment analyser des logs Apache pour en sortir des graphites. Quelques astuces sur la fonction PHP [apache_note()](https://us.php.net/apache_note) sont mentionnées, sur le traitement des logs avec les commandes linux "awk" et "sed", et l'utilisation assez étonnante de Gnuplot pour grapher : [https://www.gnuplot.info/](https://www.gnuplot.info/) ! - -Les slides sont dispos ici : [https://www.mikebrittain.com/blog/2012/06/22/velocity-2012/](https://www.mikebrittain.com/blog/2012/06/22/velocity-2012/) , et les codes d'exemples sur Github : [https://github.com/mikebrittain/presents](https://github.com/mikebrittain/presents) - -Encore pas mal d'idées piocher ! (Ca commence faire beaucoup d'idées ...) - - -![CR Velocity Conference 2012 : Day 3 (DevOps/WebPerf)](/images/posts/velocityus2012-stoyan.jpg) - -#### [WebPerf] Social Button BFFs, par Stoyan Stefanov (Facebook) - -Stoyan n'est plus présenter dans l'industrie des performances web. Il est désormais chez Facebook, travailler sur les performances des plugins, dont le "Like" ! Suivez le sur Twitter, c'est bourré de superbes infos [@stoyanstefanov](https://twitter.com/stoyanstefanov) ainsi que son blog : [https://www.phpied.com/](https://www.phpied.com/) ! - -L'idée du talk est de faire en sorte que les boutons sociaux (et widgets tiers) en général, deviennent vos BFF ! (Best Friend Forever :D) : [https://www.phpied.com/social-button-bffs/](https://www.phpied.com/social-button-bffs/) - -Il explique de quel manière doit-on intégrer ces widgets sur nos sites, et vous permet de le vérifier par l'extension Chrome qu'il a développé [3PO#Fail](https://https://www.phpied.com/3po-fail/) (3PO = 3rd Party Optimization) ou via une [extension de RuleSet pour YSlow](https://www.phpied.com/3po/). - -Les slides ici : [https://www.slideshare.net/stoyan/social-button-bffs](https://www.slideshare.net/stoyan/social-button-bffs) - - - -> "Friends don't let friends do document.write" Stoyan Stefanov - - - -#### [WebPerf] 5 Essential Tools for UI Performance, par Nicole Sullivan (Stubbornella) - -Encore un excellent talk pour ce dernier jour avec Nicolas Sullivan, Experte et consultante dans l'optimisation CSS, sur le fonctionnement très précis de la gestion des CSS par vos navigateurs et toutes les optimisations récentes qu'ils y ont apportées, ainsi qu'une démo (qui fait toujours son petit effet dans une salle Geek) de Tilt sur Firefox - -Les slides ne sont malheuresement pas encore en ligne, mais cela ne devrait tarder sur [son Slideshare](https://www.slideshare.net/stubbornella/). - -Vous pouvez retrouvez l'idée du talk sur l'interview ci dessous réalisée elle aussi lors de la Vélocity. - - - - - - - -#### Conclusion - -Voil, c'est terminé pour ce compte rendu en 3 actes de ce que j'ai vécu et retenu cette Vélocity Conférence 2012. François prendra le relais pour présenter sa vision d'autres talks, mais orientés Ops (Sysadmin). - -J'espère que ces comptes rendu auront servi à partager quelques outils, liens ou best practices qui vous donnerons des tonnes d'idées de nouvelles choses à faire coté Web dans votre société. De mon coté, comme la Vélocity Berlin l'année dernière, j'ai appris beaucoup et apprécié une grande partie des conférences. Cette conf reste pour moi (et nous chez M6Web) la plus importante au monde sur les aspects de Performance. - -Pour finir, je vous remercie pour vos retours (et je vous invite à continuer m'en faire un maximum) et lectures. Vous pouvez en connaitre d'avantage sur les autres talks avec quelques vidéos gratuite disponible sur -[https://www.youtube.com/playlist?list=PL80D9129677893FD8](https://www.youtube.com/playlist?list=PL80D9129677893FD8), Ainsi que les slides qui continuent d'arriver sur -[https://velocityconf.com/velocity2012/public/schedule/proceedings](https://velocityconf.com/velocity2012/public/schedule/proceedings) - -Et pour ceux que ca intéresse, sachez que Oreilly mettra disposition un pack complet des vidéos pour généralement un tarif autour des 400$, et qu'une Vélocity Europe aura lieu Londres les 3 et 4 octobre 2012. - -Merci tous ! - -- CR Vélocity Day 1 : [https://tech.bedrockstreaming.com/cr-velocity-conference-day-1-dev-webperf](/cr-velocity-conference-day-1-dev-webperf) -- CR Vélocity Day 2 : [https://tech.bedrockstreaming.com/cr-velocity-conference-2012-day-2-devops-webperf](/cr-velocity-conference-2012-day-2-devops-webperf) - -*(Crédit photo : [https://www.flickr.com/photos/oreillyconf/sets/72157630300659948/](https://www.flickr.com/photos/oreillyconf/sets/72157630300659948/))* - - - -![Le Job Board assez hallucinant !](/images/posts/velocityus2012-jobboard.jpg) -Le Job Board assez hallucinant ! diff --git a/_posts/2012-07-11-integration-continue-avec-jenkins-et-atoum.md b/_posts/2012-07-11-integration-continue-avec-jenkins-et-atoum.md deleted file mode 100644 index 60751c18d..000000000 --- a/_posts/2012-07-11-integration-continue-avec-jenkins-et-atoum.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -layout: post -title: "Intégration continue avec Jenkins et Atoum" -description: "" -author: o_mansour -category: -tags: [php,atoum,jenkins,ci] -comments: true -permalink: integration-continue-avec-jenkins-et-atoum ---- - -![Intégration continue avec Jenkins et Atoum](/images/posts/atoum.png) - -Chez M6 Web nous tentons de créer une approche open-source intra entreprise. L'objectif est que certains composants génériques adaptés notre métier puissent être crées et diffusés largement parmis les dizaines de projets gérés chaque année. Un prochain post traitera de cette problématique. - -Dans cette optique, il faut nous assurer de la qualité et la non régréssion de ces composants. Pour cela nous avons mis en place Jenkins afin d'assurer l'intégration continue de nos tests unitaires. Voici un exemple d'intégration avec Atoum (ce n'est pas forcement la meilleur méthode, n'hésitez pas à la commenter). - - - -Structure du composant : - -- ./src contient les classes du composants au format PSR-0 -- ./tests contient les TU Atoum -- ./build-tools/jenkins contient les fichiers de configuration pour Atoum et Ant -- ./vendor contient les dépendances externes du projet (gérées avec Composer) - -Voici le composer.json utilisé. - - - - -Voici le fichier de configuration de Atoum : build-tools/jenkins/atoum.ci.php et celui de jenkins build-tools/jenkins/build.xml - - - - -(cette configuration inclut l'ensemble des outils d'analyse statique que l'on utilise) - -Enfin, voici la configuration faire sur Jenkins (en image). - - - -![Intégration continue avec Jenkins et Atoum](/images/posts/jenkins-ic1.jpg) - -![Intégration continue avec Jenkins et Atoum](/images/posts/jenkins-ic2.jpg) - -![Intégration continue avec Jenkins et Atoum](/images/posts/jenkins-ic3.jpg) - -Via cette conf on obtient le résultat des tests (naturellement) ainsi que la couverture de code des tests avec la coloration des lignes couvertes ou non couvertes dans les classes testées. - - - -![Intégration continue avec Jenkins et Atoum](/images/posts/jenkins-ic4.jpg) - -![Intégration continue avec Jenkins et Atoum](/images/posts/jenkins-ic5.jpg) - diff --git a/_posts/2012-07-11-retrouvez-l-intervention-du-cto-de-m6-web-martin-boronski-a-la-table-ronde-du-forum-php-2012.md b/_posts/2012-07-11-retrouvez-l-intervention-du-cto-de-m6-web-martin-boronski-a-la-table-ronde-du-forum-php-2012.md deleted file mode 100644 index 8623f782b..000000000 --- a/_posts/2012-07-11-retrouvez-l-intervention-du-cto-de-m6-web-martin-boronski-a-la-table-ronde-du-forum-php-2012.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -layout: post -title: "Retrouvez l'intervention du CTO de M6 Web, Martin Boronski, à la table ronde du Forum PHP 2012" -description: "" -author: o_mansour -category: -tags: [forumphp,afup,video,php] -comments: true -permalink: retrouvez-l-intervention-du-cto-de-m6-web-martin-boronski-a-la-table-ronde-du-forum-php-2012 ---- - - - diff --git a/_posts/2012-07-13-tentative-d-explication-des-fast-forward-sous-git.md b/_posts/2012-07-13-tentative-d-explication-des-fast-forward-sous-git.md deleted file mode 100644 index 41dad2261..000000000 --- a/_posts/2012-07-13-tentative-d-explication-des-fast-forward-sous-git.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -layout: post -title: "Tentative d'explication des Fast-Forward sous Git" -description: "" -category: -tags: [git] -comments: true -permalink: tentative-d-explication-des-fast-forward-sous-git ---- - -![Tentative d'explication des Fast-Forward sous Git](/images/posts/git-ff.png) - -Tous les projets M6Web sont passés récemment sous le système de gestion de contenu [Git.](https://fr.wikipedia.org/wiki/Git) - -Git, c'est super cool ! On peut faire facilement des branches, les "merger" les unes aux autres et "switcher" d'une branche une autre. Pratique donc (dans l'idée) ! - -Il a été finalement assez facile de se faire au vocabulaire et au fonctionnement de git. Je ne dis pas que je ne fais pas non plus mes commit sur la bonne branche chaque fois, mais on arrive tout de même assez facilement à s'en sortir ("*git reset --help*" si vous êtes dans ce cas) ! - -Le très intéressant article "[A successful Git branching model](https://nvie.com/posts/a-successful-git-branching-model/)" a mis en avant la gestion des **fast-forward**, cela dit l'utilité m'est resté assez floue et ne couvrait pas l'ensemble de mes questions. - -J'ai donc fouillé la documentation de Git afin de débroussailler les "fast-forward". - - - -### Que fait git lors d'un merge - -Git "merge" deux branches lorsque : - -- La commande "merge" est utilisée, par exemple *git merge feature-myfeature*, -- la commande pull est utilisée, exemple *git pull origin master* - - - -### Git "fast-forward" - -Mettons que Bob fasse une modification sur une branche, il crée un commit **Y**. - -Il fait une autre modification qu'il commit, il crée alors un commit **Z**. - -Automatiquement git "fast-forward", c'est dire qu'il fait pointer la branche, qui pointait sur le commit **Y**, vers le commit **Z**. Sur les graphiques de *git log*, les deux commit sont liés par un trait continu. - -
    - Y - Z
    - -Tant que Bob continue faire des modifications + commit sans toucher au fast-forward, git va automatiquement "fast-forwarder". On aura donc un enchaînement de commit qui sont liés par un trait continu. - -
    - Y - Z - AA - AB - AC - ...
    - - -### Git ne "fast-forward" pas - -Nous sommes maintenant sur une branche qui en est la révision **X**. - -Alice travaille sur son projet et crée la révision **A**. - -Cela dit, Bob travaille aussi sur le projet et crée la révision **B**. - -**Alice pousse ses modifications :** - -Le commit **A** a pour parent le commit **X**, qui est le dernier commit connu par la branche, Git peut donc "fast-forwarder". - -
    - X - A
    - -**Bob pousse ses modifications :** - -Le commit de bob ne connaît pas de commit **A** dans son historique (son commit parent est le commit **X**). - -
    -- X - A
    -   \
    -    B
    - -Si git "fast-forwardait" ici, il ferait pointer la branche sur le commit **B**, et perdrait le commit **A**. Comme on ne souhaite pas perdre les modifications d'Alice, il va donc passer en mode "no fast-forward" automatiquement. - -Git va donc récupérer les modifications de **A** et les mélanger (merge) aux modifications de **B** en créant un commit **C**. - -Le commit **C** a pour parent les commit** B** et** A**, le pointeur de dernier commit peut donc être placé sur **C** sans risque de perte d'historique. - -
    - X - A
       \   \
        B - C
    - - - -### Option* --no-ff* - -L'auteur de l'article cité précédemment conseille d'utiliser l'option *--no-ff* sur les merge. - -Cette option force git a créer un commit de "merge" qui aura pour parents notre commit de modification, et le dernier commit connu sur la branche, même si il n'y a pas eu de modification sur cette dernière. - -Cela permet de revenir facilement à la version antérieure de la branche, sans avoir à fouiller dans les nombreux commits ayant pu amener un bug : on revient à la version initiale avant de passer plus de temps pour corriger le bug. - -
    - M1 -- -- -- -- M2
        \            /
         B1 - B2 - B3
    - -Dans l'exemple ci-dessus, on peut facilement revenir au commit **M1**, et exclure ainsi toute la branche **B**. Si on avait "fast-forwardé", il nous aurait fallut retrouver le commit **M1** en regardant tous les commit précédent. - - - -### Mode auto contre *--no-ff* - -Forcer le *--no-ff *ne sera finalement utile que lorsque vous développez une fonctionnalité pour laquelle vous allez beaucoup "commiter", sans que personne d'autre ne commit entre-temps. - -A vous de l'utiliser de manière intelligente ! - - - -#### Sources - -- nvie.com : [A successful Git Branching Model](https://nvie.com/posts/a-successful-git-branching-model/) -- *git push --help* - - - diff --git a/_posts/2012-10-04-cr-velocity-conference-europe-2012-day-1.md b/_posts/2012-10-04-cr-velocity-conference-europe-2012-day-1.md deleted file mode 100644 index 490055c71..000000000 --- a/_posts/2012-10-04-cr-velocity-conference-europe-2012-day-1.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -layout: post -title: "CR Velocity Conférence Europe 2012 : Day 1" -description: "" -author: k_dits -category: -tags: [velocity,conference,webperf,devops] -comments: true -permalink: cr-velocity-conference-europe-2012-day-1 ---- - -Nous voici de retour pour une Vélocity Conference, le paradis de la WebPerf et des Devops ! - -Après l'excellente moisson de la Vélocity US de Santa Clara, dont voici nos 3 CR : - -- Day 1 : [https://tech.bedrockstreaming.com/cr-velocity-conference-day-1-dev-webperf](/cr-velocity-conference-day-1-dev-webperf) -- Day 2 : [https://tech.bedrockstreaming.com/cr-velocity-conference-2012-day-2-devops-webperf](/cr-velocity-conference-2012-day-2-devops-webperf) -- Day 3 : [https://tech.bedrockstreaming.com/cr-velocity-conference-2012-day-3-devops-webperf](/cr-velocity-conference-2012-day-3-devops-webperf) - -Et après la session de l'année dernière qui avait lieu à Berlin, nous nous retrouvons cette fois dans la capitale anglaise Londres, au Hilton hôtel. - -Voici le compte rendu des conférences de la première journée, journée un peu à part placée sous le signe des "Tutorials" (2 octobre 2012) - - - - - -### [OPS] Monitoring and Observability in complex architecture, par Theo Schlossnagle (OmniTI) - -Première conférence de la journée, avec Theo, habitué des Velocity, et plutôt expert dans les domaines "infra" et "monitoring". Créateur de [Omniti](https://omniti.com/), MessageSystems et [Circonus.](https://circonus.com/) - -Son twitter : [@postwait](https://twitter.com/postwait) - -Theo nous explique comment monitorer et observer des archi complexes avec une présentation très bas niveau. - -Les outils de collectes de statistiques qu'il cite : - -- Metrics.js : [https://github.com/mikejihbe/metrics](https://github.com/mikejihbe/metrics) -- Resmon : [https://labs.omniti.com/labs/resmon](https://labs.omniti.com/labs/resmon) -- Folsom : [https://github.com/boundary/folsom](https://github.com/boundary/folsom) -- Metrics : [https://metrics.codahale.com/](https://metrics.codahale.com/) -- Metrics-net : [https://github.com/danielcrenna/metrics-net](https://github.com/danielcrenna/metrics-net) -- StatsD : [https://github.com/etsy/statsd](https://github.com/etsy/statsd) - -Et pour le stockage : - -- Reconnoiter : [https://labs.omniti.com/labs/reconnoiter](https://labs.omniti.com/labs/reconnoiter) -- Graphite : [https://graphite.wikidot.com/](https://graphite.wikidot.com/) -- OpenTSDB : [https://opentsdb.net/](https://opentsdb.net/) -- Circonus : [https://circonus.com/](https://circonus.com/) -- Librato : [https://metrics.librato.com/](https://metrics.librato.com/) - -Ont suivi ensuite des démos tcpdump assez poussées plutôt intéressante : - Par exemple, pour voir les nouvelles connexions entrantes (récupération des packets SYN) : tcpdump -nnq -tttt -s384 'tcpport 80 and(tcp[13] & (2|16) == 2)' - -+ d'exemples sont disponibles dans les slides, avec aussi d'autres exemples live sur "strace" et "dtrace". - -Bref, ca commence très (trop?) fort, surtout pour nous, pas forcément de nature très "OPS" ! - -Les slides sont disponible ici et plutôt parlantes pour ceux qui voudraient creuser le sujet : [https://www.slideshare.net/postwait/monitoring-and-observability](https://www.slideshare.net/postwait/monitoring-and-observability) - - - - - -> "You cannot correct what you cannot measure" Theo Schlossnagle - - -![Theo Schlossnagle (Source : https://img.ly/o0Ht )](/images/posts/imgob/0-00-30-83-201210-ob_e5890eb4c00194f155cbb70dadf2df1e_large-jpg.jpg) - -Theo Schlossnagle (Source : https://img.ly/o0Ht ) - - - - -### [DevOps] Escalading Scenario : a deep dive into outage falls, par John Allspaw (Etsy) - -On prend toujours autant de plaisir écouter John Allspaw, VP d'Esty et Co-organisateur de la Vélocity avec Steve Souders, nous parler d'incident, et de la meilleure manière de les gérer. - -Son Twitter : [@allspaw](https://twitter.com/allspaw) - -Beaucoup de parallèles sont faits avec des incidents dans l'aviation, l'industrie, voir l'armée, avec des références aussi au PostMortem d'appolo 13 ... Un joli condensé de bouquins "Must Read" d'après Allspaw comme : [Normal Accidents](https://www.amazon.co.uk/Normal-Accidents-Technologies-Princeton-Paperbacks/dp/0691004129) ou encore [Naturalistic Decision Making](https://www.amazon.fr/Naturalistic-Decision-Making-Caroline-Zsambok/dp/080581874X/ref=sr_1_1?ie=UTF8&qid=1349212572&sr=8-1), nous sont présentés. - -Difficile d'en faire un résumé, tellement la conférence était bourrée d'informations, graphiques et anecdotes en tout genre ! Malgré tout, dans les "choses" retenir, en vrac : - -- Attention au contexte de vos graphiques : un graph qui parait anormal sur une heure, peut s'avérer normal sur une échelle de temps d'une journée par exemple -- Des bons conseils sur la résolution d'incident en équipe, notamment au niveau de la communication avec des exemples de conversation pendant des incidents chez Etsy trop ambigus. Il est important de confirmer les réponses, corriger la communication des autres, afin d'éviter tout soucis de compréhension -- Ne pas hésiter à demander des "pre-mortem". Dire à l'auteur du projet par exemple, que cela va planter dans plusieurs mois, et lui demander d'essayer de trouver la ou les raisons qui pourraient amener le projet au plantage. -- ... - -Je vous invite encore consulter les slides pour plus d'informations et de références : [https://fr.slideshare.net/jallspaw/velocity-eu-2012-escalating-scenarios-outage-handling-pitfalls](https://fr.slideshare.net/jallspaw/velocity-eu-2012-escalating-scenarios-outage-handling-pitfalls) - - - - - -![John Allspaw (Source : https://twitter.com/lozzd/status/253074489540239360 )](/images/posts/imgob/0-00-30-83-201210-ob_dc94ca_1de339480c7911e2a04e123138141145-7-jpg.jpg) - -John Allspaw (Source : https://twitter.com/lozzd/status/253074489540239360 ) - - - - -### [WebPerf] Running a WebPerf Dashboard in 90 minutes, par Jeroen Tjepkema - -Son twitter : [@jeroentjepkema](https://twitter.com/jeroentjepkema) - -L'objectif de cette conférence était de proposer en 90 minutes, les étapes nécessaire pour monter un dashboard orienté WebPerf. - -On re-parcourt du coup un peu tout le classique de la performance web, en présentant déjà quelques exemples de Dashboard (rien de très sexy ..., hormis peut-être [celui de Nrc.nl](https://www.nrc.nl/apps/bigboard/) orienté "audience éditoriale" plutot intéressant), la pertinence de certains types de "graphs" comme les "heatmap" et aussi en comparant les différentes solutions pour mesurer la performance web, avec avantages et inconvénients : - -- Synthetic Monitoring (Gomez, Keynote, IpLabel, Pingdom etc) (slide 104-105) -- Real User Monitoring ([LogNormal](https://lognormal.com/) dont [l'acquisition par Soasta](https://lognormal.com/blog/2012/10/01/lognormal-acquired-by-soasta/) a aussi été annoncé ce jour, [Boomerang.js](https://lognormal.github.com/boomerang/doc/), Torbit, Google Analytics ...) (slide 121-122) -- Real User Benchmarking ([WebPageTest](https://www.webpagetest.org)) (slide 134) - -Quelques idées sympa de design sont disséminées tout au long de cette longue présentation, on regrette simplement de survoler toujours un peu tous les concepts, mais malgrés tout, cela reste l'une des rares tentatives de faire un dashboard WebPerf accessible à des "non-techniciens". Chapeau pour cela. - -Une démo du dashboard est testable ici : [https://app.measureworks.nl/secured/dashboard](https://app.measureworks.nl/secured/dashboard) (Login : demo@measureworks.nl , password: performance ) - -Les slides sont disponibles ici : [https://www.slideshare.net/MeasureWorks/measureworks-velocity-conference-europe-2012-a-web-performance-dashboard-final](https://www.slideshare.net/MeasureWorks/measureworks-velocity-conference-europe-2012-a-web-performance-dashboard-final) - - - - - -![Jeroen Tjepkema (Source : https://twitter.com/pingdom/status/253135289327951872 )](/images/posts/imgob/0-00-30-83-201210-ob_de570da1ddb751e35f1a96d2eadf7c9d_scaled-php.jpg) - -Jeroen Tjepkema (Source : https://twitter.com/pingdom/status/253135289327951872 ) - - - - -### [WebPerf] Deep Dive into Performance analysis, par Steve Souders et Patrick Meenan (Google) - -Leurs Twitter : [@souders](https://twitter.com/souders) et [@patmeenan](https://twitter.com/patmeenan) - -Dernier "Tutorials" du jour avec Steve Souders (Chief performance Officer chez Google), et Patrick Meeman (aussi chez Google désormais, créateur de Webpagetest). - -Histoire de s'adapter au public Anglais, les deux compères ont décidés de s'attaquer aux sites des équipes de Premier League du Foot Anglais :-) - -Comme imaginé, ca n'est pas "folichon", et on étudiera en profondeur en live les sites de Chelsea et Tottenham, qui chacun enchaine un nombre d'aberrations plus grandes les une que les autres ! - -Le tableur utilisé pendant la présentation avec les liens vers les tests WebPageTest : [goo.gl/YfbRn](https://goo.gl/YfbRn) - -Quelques exemples sur le site de Chelsea : [https://www.chelseafc.com/](https://www.chelseafc.com/) - -Les tests WPT annoncent un Load Time 21 secondes, 203 requêtes HTTP et 3mo4 téléchargés ! - -Le [Waterfall que vous pouvez voir ici](https://velocity.webpagetest.org/result/120925_0_13/2/details/), est on ne peut plus parlant, avec une mention spéciale pour la liste des images présentes sur la HP : [https://velocity.webpagetest.org/pageimages.php?test=120925_0_13&run=2&cached=0](https://velocity.webpagetest.org/pageimages.php?test=120925_0_13&run=2&cached=0) - -J'imagine que le problème va vous sauter aux yeux, entre les fonds énormissimes et images non compréssées, les images de chacun des joueurs de l'équipe (oui, le pauvre carroussel en bas de page ...), et le nombre incroyable de logo et ou picto en tout genre, on voit vite comment améliorer la page :-) - -Le carroussel du haut donne aussi un effet assez comique sur le "[FilmStrip View](https://velocity.webpagetest.org/video/compare.php?tests=120925_0_13-r:2-c:0)" où l'ont voit vers les 10 secondes, un début d'image se charger, pour s'effacer car le carroussel passe déja au panel suivant ... Merci au passage au jCaroussel qui charge bêtement toutes les images ... - -On remarque aussi un nombre conséquent de JS qui retarde grandement le Start Render. Optez autant que possible pour les positionner juste avant le /body, ou les charger en async/defer ou via un chargement asynchrone en Js. - -Pas mal de petites astuces sont partagées par Patrick et Steve, notamment sur l'utilisation de la courbe de Bande Passante, pour voir les parties pouvant être optimisées (celle ou la bande passante n'est pas utilisée fond par exemple), on remarque aussi quelques ajouts récents comme l'affichage des évenements Paint sur la FilmStrip View (Screenshot encadré de Orange), ou encore la possibilité via clic droit dans la Chrome Dev Tools de vider le cache et les cookies rapidement etc ... - -Nous avons aussi eu la confirmation que Google prenait le Onload Time comme référence pour ses algorithmes de ranking. - -Bref, superbe application de tous les concepts WebPerf avec des cas concrets d'étude et une conférence très interactive avec suffisament d'astuces pour combler aussi les habitués de WPT. - - - -![Patrick Meenan & Steve Souders (Source : https://twitter.com/simonox/status/253146271156670464 )](/images/posts/imgob/0-00-30-83-201210-ob_b0e31f_233d81c80ca111e28d1322000a1cba90-7-jpg.jpg) - -Patrick Meenan & Steve Souders (Source : https://twitter.com/simonox/status/253146271156670464 ) - - - - -### [DevOps] Ignite Talk - -Pour finir cette journée, rendez vous dans l'immense salle (dans laquelle aura lieu la majorité des conférences suivantes), pour un Ignite Talk combiné entre la Vélocity Conférence et Strata Conférence qui ont lieu au même moment dans l'Hilton hôtel Londres. - - - -![Salle King's Room (Source : https://twitter.com/cmsj/status/253139957093367808/photo/1 )](/images/posts/imgob/0-00-30-83-201210-ob_89db26_a4nvcywcaaavwli-jpg-large.jpg) - -Salle King's Room (Source : https://twitter.com/cmsj/status/253139957093367808/photo/1 ) - - -Nous suivrons une série de 7 ou 8 Ignite Talk dont le concept est de présenter un sujet sur 20 slides défilant automatiquement toutes les 15 secondes. C'est assez décalé, fun, et l'exercice parait très "sport" ... :) - -Pas mal de sujets tournaient autour de l'Open Data ou Big Data, les DataViz ... - -Voici par exemple un talk sympa sur les "Dataviz as interface" par [@makoto_inoue](https://twitter.com/makoto_inoue) : [https://fr.slideshare.net/inouemak/data-viz-asinterfacemakotoinoue](https://fr.slideshare.net/inouemak/data-viz-asinterfacemakotoinoue) - - - - - -![Makoto Inoue, de l'énergie, de la danse, et de la bière ! (Source: https://royal.pingdom.com/2012/10/02/velocity-europe-1/ )](/images/posts/imgob/0-00-30-83-201210-ob_8823f9b6bfed28f4d280b3f4ca99689e_ignite-jpg.jpg) - -Makoto Inoue, de l'énergie, de la danse, et de la bière ! (Source: https://royal.pingdom.com/2012/10/02/velocity-europe-1/ ) - - - - -### [WebPerf] Step by Step Mobile Optimization, par Guy Podjamy (Akamai) - -Conférence auquelle je n'ai pas pu assisté : [https://fr.slideshare.net/guypod/step-by-step-mobile-optimization](https://fr.slideshare.net/guypod/step-by-step-mobile-optimization) - - - - - - -### Conclusion : - -Bonne première journée avec déjpas mal de choses retenir et appliquer quotidiennement ! - -On regrette le fait d'avoir été dans des petites salles (sûrement à cause de la dernière journée de la Strata Conférence), et du coup d'avoir alterné le manque de place, avec la chaleur des salles ... Et je n'ai pas l'impression que les sessions du jour étaient filmées malheuresement ! - -C'est en tout cas un très bon avant-gout de ce qui nous attend demain ;-) - -Enjoy ! - -P.s : N'hésitez pas nous faire des retours sur ce CR ! :) - - - -Rappel : les CR des autres jours sont disponible : - -- Day 2 : [https://tech.bedrockstreaming.com/cr-velocity-conference-europe-2012-day-2](/cr-velocity-conference-europe-2012-day-2) -- Day 3 : [https://tech.bedrockstreaming.com/cr-velocity-conference-europe-2012-day-3](/cr-velocity-conference-europe-2012-day-3) diff --git a/_posts/2012-10-08-cr-velocity-conference-europe-2012-day-2.md b/_posts/2012-10-08-cr-velocity-conference-europe-2012-day-2.md deleted file mode 100644 index 9d78c032e..000000000 --- a/_posts/2012-10-08-cr-velocity-conference-europe-2012-day-2.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -layout: post -title: "CR Velocity Conférence Europe 2012 : Day 2" -description: "" -author: k_dits -category: -tags: [velocity,conference,webperf,devops] -comments: true -permalink: cr-velocity-conference-europe-2012-day-2 ---- - -![CR Velocity Conférence Europe 2012 : Day 2](/images/posts/imgob/0-00-30-83-201210-ob_a7328c1e5880a56085c6e7bdb8fbf23a_velocity-top-jpg.jpg) - -Deuxième journée, avec le début "officiel" de cette conférence, où l'on nous donne rendez vous dans l'immense King's Room. - -Pour bien démarrer, on commence avec en quelque sorte l'hymne de la Vélocity : Speed & Velocity ! - - - - - - - -### [DevOps] Move Fast and Ship Things, par Girish Patangay (Facebook) - -Première présentation de la journée par l'un des Manager chez Facebook, (maintenant dans les bureaux londoniens), sur la capacité de Facebook, et leur volonté, d' évoluer et de déployer rapidement. - -Il nous raconte les débuts de Facebook, avec peu de serveurs, des changements inférieurs 5Mb, Rsync pour pusher en prod etc ... puis la migration vers [HipHop](https://github.com/facebook/hiphop-php). - -Désormais chaque changement nécessite de recompiler un gros binaire de 1.2Go, et d'y envoyer sur plus de 10 000 serveurs, et ce plusieurs fois par jour ! - -Avec Bittorent, ils envoient 500Mb en moins d'une minute sur les 10 000 serveurs. - -On a eu le droit une présentation de GateKeeper, outil interne, permettant de faire du feature flipping géolocalisé. La timeline a par exemple plus d'une centaine de GateKepper. - -Aujourd'hui, Facebook cherche trouver le moyen de scaler de plus de 1000 développeurs à 10000, et d'évoluer sur ce système de "Move Fast" dans le mobile natif. - -Pour ceux que ça intéresse, en plus de la vidéo çi dessous, Quora est une mine d'or d'infos sur FB : [https://www.quora.com/Girish-Patangay](https://www.quora.com/Girish-Patangay) - - - -![(Source https://royal.pingdom.com/2012/10/03/report-from-velocity-europe-day-2/ )](/images/posts/imgob/0-00-30-83-201210-ob_8bcd544ab91083c4cc3c838a8fef5cff_facebook-jpg.jpg) - -(Source https://royal.pingdom.com/2012/10/03/report-from-velocity-europe-day-2/ ) - - - - - - -### [WebPerf] Keynote KITE and MITE, par Robert Castley (Keynote) - -Vient ensuite la conférence de Keynote (Sponsorisée), qui nous présente deux outils intéressant : - -- KITE pour Keynote Internet Testing Environnement : [https://kite.keynote.com/](https://kite.keynote.com/) -- MITE pour Mobile Internet Testing Environnement : [https://mite.keynote.com/](https://mite.keynote.com/) - -MITE est d'ailleurs utilisé par le site de Google [Howtogomo.com](https://Howtogomo.com) - -Bref, si vous êtes sur Windows (...), jetez y un oeil. Plus d'infos en vidéo : - - - - - - - -### [WebPerf] Lightning Démos - -**Démo 1 : Chrome Dev Tools :** - -Première démo de Iliya Grigorik ( [@igrigorik](https://twitter.com/igrigorik)) sur les capacités avancées de la chrome Dev Toolbar. - -On peut par exemple faire un clic droit sur l'onglet Network pour récupérer le har (voir le format [HTTP Archive](https://www.softwareishard.com/blog/har-12-spec/)) en json, et utiliser d'autres outils avec ce har, notamment Yslow dont je parlais [dans le compte rendu suivant](/cr-velocity-conference-2012-day-3-devops-webperf), qui permet d'ajouter les régressions possible WebPerf dans votre CI Jenkins. - -On parle aussi du chrome://tracing , du débugger mobile, que la devtools est une WebApp avec une url propre et scriptable, du Chrome Benchmarking (extension) ... - -Voir la présentation suivante pour plus d'infos, bien plus compléte : [https://www.igvita.com/slides/2012/devtools-tips-and-tricks/](https://www.igvita.com/slides/2012/devtools-tips-and-tricks/) - - - - - -**Démo 2 : Box Anemometer :** - -Gavin Towey ( [@gtowey](https://twitter.com/gtowey)), DBA MySql chez Box.com nous présente une interface pour visualiser et traiter correctement le slow log de Mysql. Basé sur Php 5.3, les outils Percona et Bootstrap pour l'interface, l'outil est un vrai bonheur pour tous ceux qui font un peu d'optimisation MySql au quotidien, développeur, sysadmin ou dba. Nous l'avions déjà découvert aux DevOpsDays Mountain View cet été, et l'utilisons massivement depuis. - -Le projet est sur Github : [https://github.com/box/Anemometer](https://github.com/box/Anemometer) - -Voir aussi le projet Rain Gauge dans la lignée de Anemometer, toujours par Gavin Towey : [https://github.com/box/RainGauge](https://github.com/box/RainGauge) - -Voici la démo en vidéo : - - - - - - - -### [WebPerf] Emerging Markets / Growth Markets, par Jeff Kim (CDnetworks) - -Jeff Kim, Chief Operating Officer chez CDnetworks nous a partagé quelques données et chiffres intéressants sur les marchés émergeants comme l'Inde, Indonésie, les Philippines, le Brésil etc - -On apprend que Chrome a une part de marché de 62% au Brésil, 51% en Inde, et Opéra de 26% en Russie. Que l'e-commerce au final n'a pas vraiment encore démarré en Inde, Brésil et Russie... - -Après des études d'Eye Tracking View, on remarque aussi entre la population chinoise et américaine, que sur une page de résultats de recherche, les américains ne regardent que le coin haut gauche de la page pour se contenter des premiers résultats, alors que les chinois consultent vraiment toute la hauteur de la page, pour regarder tous les résultats. - - - - - - - -### [WebPerf] Why page speed isn't enough, par Tim Morrow (Betfair) - -Son twitter : [@timmorrow](https://twitter.com/timmorrow) - -Ancien de ShopZilla, et déja présent Berlin l'année dernière, Tim a partagé son retour d'expérience sur la refonte de BetFair (très gros site de pari en ligne). Les gens se plaignaient d'une mauvaise expérience (alors que les pages refondues étaient plus rapides), mais nécessitaient à priori beaucoup plus de temps pour parvenir au pari final que dans l'ancienne version. En gros, le temps de chargement de vos pages n'est pas suffisant, il faut aussi regarder les scénarios fonctionnels de vos sites. Ils sont passés sur une navigation typée Ajax pour ne pas rafraîchir dans certains cas l'intégralité de la page. - -Voir les slides et la vidéo : [https://fr.slideshare.net/timmorrow/why-page-speed-isnt-enough-tim-morrow-velocity-europe-2012](https://fr.slideshare.net/timmorrow/why-page-speed-isnt-enough-tim-morrow-velocity-europe-2012) - - - - - - - - -### [WebPerf] W3C Status on Web Performance, par Alois Reitbauer (Compuware, Dynatrace) - -Beau récapitulatif du status du "W3C performance working group" sur la performance Web, avec des rappels sur la NavTiming et les différents standards, quelques échanges autour de la NavTimingV2, d'une Resource time Measurement etc ... - -Son twitter : @compuware et [@AloisReitbauer](https://twitter.com/AloisReitbauer) - -Plus d'infos dans la vidéo ci dessous : - - - - - - - -### [WebPerf] 3.5s Dash for attention and other stuff we found about RUM, par Philipp Tellis (Log Normal) - -Son twitter : [@bluesmoon](https://twitter.com/bluesmoon) - -Le transcript et détail complet de la présentation est présent sur un blogPost très complet de Philip Tellis, créateur de Log Normal (racheté par SOASTA) : - -[https://www.lognormal.com/blog/2012/10/03/the-3.5s-dash-for-attention/](https://www.lognormal.com/blog/2012/10/03/the-3.5s-dash-for-attention/) - -Beaucoup de chiffres et d'infos intéressantes autour de la WebPerf, avec notamment cette métrique basée sur un Bounce Rate >= 50% - -Les slides sont disponibles : [https://fr.slideshare.net/bluesmoon/the-35s-dash-for-user-attention-and-other-things-we-found-in-rum](https://fr.slideshare.net/bluesmoon/the-35s-dash-for-user-attention-and-other-things-we-found-in-rum) - - - - - - -### [Mobile] Escaping the uncanny valley, par Andrew Betts (FT Labs) - -Son twitter : [@triblondon](https://twitter.com/triblondon) - -Conférence très intéressante par Andrew, le directeur d'FT Labs (Financial Times), qui a parcouru l'ensemble des travaux que ces équipes ont effectués autour des capacités mobile pour faire une webapp HTML5 intégrée dans une appli native avec la meilleure experience possible. - -Au menu, rappel sur la lourdeur de parcours du DOM en JS, les incohérences du SetTimeout (notamment sur IOs), les problématiques de l'AppCache ou localStorage. Le fait d'utiliser au maximum l'accélération matérielle sur les CSS, l'optimisation des paint, les spinners et loading bar, le progressive rendering ... - -Rappel de la latence sur les "clics" tactiles avec le projet Fastclick, qui enlève les 300ms de délai sur le clic mobile : [https://github.com/ftlabs/fastclick/](https://github.com/ftlabs/fastclick/) - - - - - -### [Mobile] Make your mobile web apps fly, par Sam Dutton (Google) - -Son twitter : [@sw12](https://twitter.com/sw12) - -Sam Dutton, Developers Advocate (?) chez Google, nous fait un parcours assez complet des bases d'optimisations WebPerf pour le mobile. Un peu de redondance versus d'autres confs vues plus tôt, mais le sujet est bien maîtrisé et bien couvert. - -Quelques petits outils intéressants, notamment le Multires pour la gestion des images Retina : [https://fhtr.org/multires/](https://fhtr.org/multires/ ) - -A noter aussi une phrase que j'ai beaucoup aimé sur l'ergnonomie mobile, et la position des boutons de contrôle : - -> "Controls should be beneath content: think calculator" - -Les slides : [https://www.samdutton.com/velocity2012/ ](https://www.samdutton.com/velocity2012/) - - - - - -### [DevOps] Scaling Instagram, par Mike Krieger (Instagram) - -Son twitter : [@mikeyk](https://twitter.com/mikeyk) - -Petit debrief orienté Ops de la success story d'Instragram. Le rythme de la présentation était vraiment pushy, donc plutôt dur suivre pour nous autre francophones ... - -En plus d'avoir l'impression de voir un demi milliard bouger sur scène, nous avons quand même appris certaines choses sur la Stack Instagram : EC2, Python Django, Postgres, Gearman, RabbitMQ ... - -La présentation n'étant pas nouvelle, est disponible ici : [https://fr.slideshare.net/iammutex/scaling-instagram](https://fr.slideshare.net/iammutex/scaling-instagram) - - - -![Mike Krieger (Source : https://royal.pingdom.com/2012/10/03/report-from-velocity-europe-day-2/ )](/images/posts/imgob/0-00-30-83-201210-ob_f78dbded1ddadf9aa2dfa65ce69cf5b4_instagram-jpg.jpg) - -Mike Krieger (Source : https://royal.pingdom.com/2012/10/03/report-from-velocity-europe-day-2/ ) - - - - - -### [WebPerf] Bringing HTML5 into Nativelandia: A Tale of Caution, par Jackson Gabbard (Facebook) - -L'une de conférences que j'attendais beaucoup, de Jackson Gabbard, Mobile Engineer chez Facebook, qui nous explique le passage du HTML5 au native pour les applications mobile (IOs pour le moment?). - -Passé les stats toujours aussi hallucinantes, il explique tout ce qui n'était pas convainquant sur l'ancienne webApp HTML5, et que ce qui a vraiment échoué, est le marriage entre la WebView et le natif. Que l'expérience "native" est bien plus concluante pour l'utilisateur par rapport ce qu'ils souhaitent obtenir niveau fluidité, performances, efficacité, utilisation réseau etc ... - -Ils ont du coup redeveloppé pas mal de leurs outils pour s'adapter a ce mode de fonctionnement (un GateKeeper plus light) etc ... - -Conférence vraiment passionnante, avec un gars plutôt très transparent sur Facebook et les raisons qui ont poussées ce changement. - - - - - -### Conclusion : - -Du lourd encore une fois, avec énormement de sujets très intéressants, même si l'on commence à tourner un peu en rond autour de la WebPerf Mobile. - -A noter aussi qu'un grand nombre de livre Oreilly ont été donné et dédicacé par Steve Souders et John Allspaw ;-) - -Les salles sont déjà bien plus sympa, et l'organisation toujours au top ! Vivement demain. - -Pour finir, voici quelques vidéos diffusées pendant les breaks la Vélocity : - - - - -Hot Wheels World Record: Double Loop Dare at the 2012 X Games Los Angeles - - - -Jeb Corliss " Grinding The Crack" - - -Rappel : les CR des autres jours sont disponible : - -- Day 3 : [https://tech.bedrockstreaming.com/cr-velocity-conference-europe-2012-day-3](/cr-velocity-conference-europe-2012-day-3) -- Day 1 : [https://tech.bedrockstreaming.com/cr-velocity-conference-europe-2012-day-1](/cr-velocity-conference-europe-2012-day-1) diff --git a/_posts/2012-10-09-cr-velocity-conference-europe-2012-day-3.md b/_posts/2012-10-09-cr-velocity-conference-europe-2012-day-3.md deleted file mode 100644 index 3f17df014..000000000 --- a/_posts/2012-10-09-cr-velocity-conference-europe-2012-day-3.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -layout: post -title: "CR Velocity Conférence Europe 2012 : Day 3" -description: "" -author: k_dits -category: -tags: [conference,velocity,webperf,mobile,devops] -comments: true -permalink: cr-velocity-conference-europe-2012-day-3 ---- - -![CR Velocity Conférence Europe 2012 : Day 3](/images/posts/imgob/0-00-30-83-201210-ob_df8e6a600183b00e13ed9ae49d68e1e1_allspaw-souders-jpg.jpg) - -Troisième et dernière journée la Vélocity Europe. - -On arrive déjà fatigué et gavé d'informations et idées en tout genre, mais on a hâte de démarrer cette journée ! :-) - - - - - -### [Mobile] The Performance of Web Vs Apps, par Ben Galbraith et Dion Almaer (Walmart.com) - -Ben ([@bgalbs](https://twitter.com/bgalbs)) et Dion ([@dalmaer](https://twitter.com/dalmaer)) nous reprennent dans les grandes lignes, la conférence faite la Vélocity Us (voir le CR + la vidéo de ce talk : [https://tech.bedrockstreaming.com/cr-velocity-conference-2012-day-3-devops-webperf](/cr-velocity-conference-2012-day-3-devops-webperf) ) - -L'idée est de comparer les experiences possibles sur WebApp et Apps Native, avec toujours cette comparaison très drôle entre le mode de distribution des apps natives ce que cela donnerait si les show tv devraient être distribués de la même manière en prenant l'exemple de la série Friends : Hilarant ! - -Voir la vidéo ci-dessous vers 17min 30 : - - - -![Ben Galbraith et Dion Almaer (Source : https://royal.pingdom.com/2012/10/05/report-from-velocity-europe-day-3/ )](/images/posts/imgob/0-00-30-83-201210-ob_217722ac6f1101dfc98f3303ee4ee09b_walmart-jpg.jpg) - -Ben Galbraith et Dion Almaer (Source : https://royal.pingdom.com/2012/10/05/report-from-velocity-europe-day-3/ ) - - - - - - -### [WebPerf] Lightning Démos, par Steve Souders et Patrick Meenan (Google) - -Patrick nous a montré les derniers ajouts intéressants de [WebPageTest.org](https://WebPageTest.org), avec notamment le "Block Ads Feature", l'onglet "SPOF" dans les paramètres avancés pour tester si nos scripts tiers sont des SPOF sur nos sites (j'y reviendrai) ... L'outil s'enrichit progressivement et reste toujours LA référence ultime du domaine ! - - - - - -Steve Souders de son côté, est revenu sur un cas étudié la veille, à savoir l'implémentation d'un LazyLoader sur un caroussel, afin de déterminé via Browserscope.js si cela repoussait le OnLoad event, et c'est le cas ! - -Petite parenthèse sur les caroussels, je vous invite lire cet article : [Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad](https://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/) - - - - - - - -### [WebPerf] Do All Users Benefit Equally from Web Performance Optimizations? , par Arnaud Becart (ip-label) - -Talk sponsorisé assez intéressant, qui étudie les données récoltées par Ip-label afin de voir si tout le monde profite de la WebPerf de la même manière. La réponse est évidente, mais c'est intéressant de rappeler qu'il faut toujours comparer tests synthétiques au réel, et qu'en fonction du navigateur, du terminal, de la puissance de votre machine, ..., des optimisations WebPerf auront un impact différent, du négatif au très positif. - - - - - - - -### [DevOps] From DevOps to Operation Science, par Christopher Brown (Opscode) - -Son twitter : [@skeptomai](https://twitter.com/skeptomai) - -Talk orienté "Culture" intéressant par l'un des créateurs de EC2. Mon moment d'absence de la journée :) - - - - - - - -### [WebPerf] Performance and Metrics on lonelyplanet.com, par Mark Jennings et Dave Nolan (Lonely Planet) - -Retour d'experience des gars de Lonelyplanet (sorte de Routard) très enrichissant. Notamment sur la façon de communiquer à des équipes non techniques, les différentes expérimentations réalisées, et le changement de culture opéré, l'utilisation de Graphite avec notamment les Holt-Winters ... - -> "Being Right isn't Always Enough" ! - -> "Give your metrics a public presence" - -Les slides : [https://fr.slideshare.net/mbjenn/performance-and-metrics-at-lonely-planet-14589911](https://fr.slideshare.net/mbjenn/performance-and-metrics-at-lonely-planet-14589911) - - - -![Mark Jennings et Dave Nolan (Source : https://twitter.com/smcinnes/status/253805752312033280/photo/1 )](/images/posts/imgob/0-00-30-83-201210-ob_08cafe_a4wy-kzccaamulr-jpg-large.jpg) - -Mark Jennings et Dave Nolan (Source : https://twitter.com/smcinnes/status/253805752312033280/photo/1 ) - - - - - -### [WebPerf] Third-Party Scripts and You, par Patrick Meenan (Google) - -Patrick Meenan nous parle ici de SPOF (Single Point Of Failure ou Point Individuel De Defaillance en français ...) et des 3rd party scripts. - -L'idée est de montrer comment suivant l'intégration Javascript de scripts tiers, vous pouvez rendre l'affichage de votre site dépendant du bon fonctionnement des serveurs du script tiers. - -Les navigateurs mettent en général 20 secondes (45 sous mac et linux) avant de rejeter une connexion sur un script tiers en rade. Vous pouvez voir des vidéos de l'effet que ça peut avoir sur vos pages dans les slides. - -Afin de les détecter, il existe l'extension SPOF-O-Matic : - -[https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg](https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg) - -En surfant, vous saurez rapidement si un SPOF est présent sur votre site ou non et combien de contenu il bloque, et pourrez générer un WebPageTest comparatif en simulant le plantage du script en question (Redirection sur domaine blackhole.webpagetest.org) - -Pour régler ces problèmes, plusieurs solutions : Script à charger dynamiquement via Js de manière asynchrone, script avec async et defer, ou au pire, script avant le /body. - -Les slides : [https://www.slideshare.net/patrickmeenan/velocity-eu-2012-third-party-scripts-and-you](https://www.slideshare.net/patrickmeenan/velocity-eu-2012-third-party-scripts-and-you) - - - - - - -### [Ops] How Draw Something Absorbed 50 Million New Users, in 50 Days, with Zero Downtime, par J Chris Anderson (Couchbase) - -Nous arrivons à l'entrée de la salle où a lieu cette présentation, barré par des commerciaux CouchBase, nous empéchant de rentrer sans prendre le prospectus CouchBase et sans se faire scanner son QRcode présent sur nos badges ... ça commence mal ... - -Au bout de 2 minutes de talk par J Chris Anderson ( [@jchris](https://twitter.com/jchris) ) , co-fondateur de Couchbase, le malaise est confirmé : on ne parlera pas ici de Draw Something, mais de Couchbase 2.0 uniquement, le nom Draw Something n'étant là que pour appâter du client potentiel, et ça marche, la salle est comble ... - -Difficile du coup d'être concentré dans cette approche plus que douteuse ... les questions au final seront aussi assez violentes sur le sujet : "pourquoi appâter les gens avec Draw Something, si ça n'est que pour parler de CouchBase ?" La réponse est évasive ... Nous n'avons pas eu le droit d'en parler ... - -Bref, le produit Couchbase a tout de meme l'air très intéressant, et plutôt costaud, avec de très chouettes Dashboard de monitoring temps réels built-in. - -J'en sors quand même avec l'impression très désagréable de m'être fait piéger ... - -Les slides (non dispo) ressemblait fortement à cette autre présentation de J Chris : [https://speakerdeck.com/u/jchris/p/nosql-landscape-speed-scale-and-json](https://speakerdeck.com/u/jchris/p/nosql-landscape-speed-scale-and-json) - - - - - - -### [WebPerf] WebPagetest - Beyond the Basics, par Aaron Peters (Turbobytes), Andy Davies (Asteno) - -Pas mal de conférences parlaient de WebPageTest, mais celle-ci promettait d'aller en profondeur. Le créateur n'a jamais caché son manque de talent pour les interfaces, et WPT regorge de richesses en tout genre cachées dans les méandres de ses pages :-) - -Enormement d'informations et tips sont donc présents dans les slides de cette conférence. - -Pour rappel : instruction d'Andy pour monter une instance privée de WPT : [https://andydavies.me/blog/2012/09/18/how-to-create-an-all-in-one-webpagetest-private-instance/](https://andydavies.me/blog/2012/09/18/how-to-create-an-all-in-one-webpagetest-private-instance/) - -Les slides : [https://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics](https://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics) - - - -![Andy Davies et Aaron Peters (Source : https://royal.pingdom.com/2012/10/05/report-from-velocity-europe-day-3/ )](/images/posts/imgob/0-00-30-83-201210-ob_771b7ad15a983bd9a3c761e9fe264d64_webpagetest-jpg.jpg) - -Andy Davies et Aaron Peters (Source : https://royal.pingdom.com/2012/10/05/report-from-velocity-europe-day-3/ ) - - - - - -### [DevOps] What HTTP/2.0 Will* Do For You, par Mark Nottingham (Akamai) - -L'une des conférences les plus intéressantes de la Vélocity pour ma part avec notamment l'annonce que HTTP/2.0 sera basé sur SPDY déj... - -Mark Nottingham ( [@mnot](https://twitter.com/mnot) ), Chair of the [IETF HTTPbis Working Group](https://trac.tools.ietf.org/wg/httpbis/trac/wiki), excellent conférencier, nous explique donc ce que sera HTTP/2.0 : - -- Aucun changement la sémantique HTTP -- Basé sur Speedy -- Multiplexing (voir slide 22) -- Header Compression, technique très intéressante, pour éviter de ré-envoyer les memes headers pour chaque requête HTTP - -Pas mal de ressources sont disponibles sur son site : [https://www.mnot.net/](https://www.mnot.net/) - -Les slides sont un modèle du genre, simples et efficaces : [https://www.slideshare.net/mnot/what-http20-will-do-for-you](https://www.slideshare.net/mnot/what-http20-will-do-for-you) - - - - - - -### [DevOps] Web & Native Cross-Platform Multiplayer, par Ashraf Samy Hegab (Orange) - -Comment développer une expérience de Gaming multi-plateforme : Web, Android, Iphone ? C'est la question à laquelle Ashraf a essayé de répondre, sur cette dernière conférence avec un humour et une énergie très communicative. - -Pas mal de bonnes ideés applicables au web traditionnel, sur une stack NodeJs/Mongo/Socket.io, pour faire la majorité du travail et communiquer avec les parties natives d'app Android et Ios. - -Nous avons aussi fait une démo live sur le jeu Phone Wars (Disponible sur Appstore et Google Play) d'une éxperience Gaming Multi-plateforme. - -Très rafraîchissant pour finir ces 3 journées marathons ! - - - - -### Conclusion : - -Ça y'est, la Vélocity Europe est finie pour cette année. Les bouchées doubles ont été mises par rapport à la Vélocity Berlin de l'année dernière, et cette conférence reste vraiment la conf incontournable pour tous ceux que la Webperf, les Devops, et les sites fort traffic intéressent ! - -On regrette simplement que seule la grande salle ait été filmée, que la chasse aux slides soit toujours aussi tordue (trop peu renseigné sur le site de la Vélocity). Le reste est juste parfait ! - -A la prochaine, et merci pour vos retours. - -P.s: Merci aussi aux équipes de Pingdom pour leurs Twitt Live et les chouettes photos prises ( [https://royal.pingdom.com/]( https://royal.pingdom.com/) ) - - - -Rappel : les CR des autres jours sont disponible : - -- Day 2 : [https://tech.bedrockstreaming.com/cr-velocity-conference-europe-2012-day-2](/cr-velocity-conference-europe-2012-day-2) -- Day 1 : [https://tech.bedrockstreaming.com/cr-velocity-conference-europe-2012-day-1](/cr-velocity-conference-europe-2012-day-1) diff --git a/_posts/2012-11-23-m6web-au-banquet-de-la-cuisine-du-web.md b/_posts/2012-11-23-m6web-au-banquet-de-la-cuisine-du-web.md deleted file mode 100644 index 6cf217a04..000000000 --- a/_posts/2012-11-23-m6web-au-banquet-de-la-cuisine-du-web.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: post -title: "M6Web au banquet de la cuisine du web" -description: "" -author: o_mansour -category: -tags: [conference,lcdw] -comments: true -permalink: m6web-au-banquet-de-la-cuisine-du-web ---- - -Une partie de l'équipe de M6Web était présente au [banquet de la cuisine du web](https://www.lacuisineduweb.com/la-cuisine-fait-son-banquet.html) avec la fine fleur du web Lyonnais ! - - -![M6Web au banquet de la cuisine du web](h/images/posts/imgob/0-00-30-83-201211-ob_0c745f_74a85c8234e611e294a422000a1f9874-7-1.jpg) - diff --git a/_posts/2012-12-05-organiser-des-conferences-technique-en-interne.md b/_posts/2012-12-05-organiser-des-conferences-technique-en-interne.md deleted file mode 100644 index 319cd83ed..000000000 --- a/_posts/2012-12-05-organiser-des-conferences-technique-en-interne.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -layout: post -title: "Organiser des conférences technique en interne" -description: "" -author: k_dits -category: -tags: [conference,culture,lft] -comments: true -permalink: organiser-des-conferences-technique-en-interne ---- - -![Organiser des conférences technique en interne](/images/posts/imgob/0-00-30-83-201212-ob_0b12e60631696ffc6a43352705db6566_lft.png) - - - -### Les "Last Friday Talk" : Le concept - -Depuis 10 mois désormais, chez M6Web, nous organisons chaque "dernier vendredi" du mois, une manifestation que nous avons nommée "Last Friday Talk". - -Le concept : 2 heures de 13h30 15h30, où 4 sessions "type conférence" de 25 minutes, suivies de 5 minutes de questions, sont présentées par des personnes de la Direction Technique. La participation (orateur ou public) est bien entendue facultative. - -L'idée, est que chacun a quelque chose dire dans le web de nos jours, quelque chose présenter/partager aux autres. Soit un retour d'experience sur une techno, un outil, une méthodologie, soit même une présentation de ses développements ou projets passés. - - - -### Des exemples ? - -Quelques exemples de présentations qui ont été faites : - -- ZéroMq, la bibliothèque réseau -- Présentation du langage Python -- VIM pour les nuls -- Les méthodes agiles -- Doctrine 2 -- La sécurité SQL -- Le déploiement chez Facebook -- La WebPerf avancée -- Présentation de CoffeeScript -- ... - - - -### L'interêt ? - -Les apports pour vos équipes sont nombreux : - -- Toute la direction technique participe et partage une partie de la veille technologique de chacun. -- Les conférenciers améliorent leur communication de "groupe". -- Ils deviennent souvent le référent sur le sujet dans l'entreprise. -- C'est du Team Building, et un rendez-vous mensuel avec vos équipes. -- Et cela donne des idées à tous les autres développeurs pour de futurs projets (perso ou d'entreprise bien sûr), et attise leur curiosité. - -Nous avons donc tous les mois entre 5 et 10 présentations proposées pour n'en choisir que 4, et une trentaine de participants par session au niveau du public, et nous filmons toutes les conférences, et les archivons sur un site interne. - - - -### Les "Karaoké Slideshow" pour plus de fun ! - -Pour combler les mois les plus creux, nous avons aussi tenté une session "Karaoké Slideshow" qui fut hilarante (dans l'esprit des "Ignite Karaoké" pour ceux qui connaissent) ! - Le concept : Entre 5 et 10 volontaires font une présentation tour tour, sur une série de 5 slides qu'ils n'ont jamais vus, dont chaque slide défile toutes les 15 secondes. Le thème est libre et est improvisé en fonction des slides ! - -C'est un bel exercice d'improvisation et le fun est garanti :-) - - - -### Conclusion - -Alors si votre entreprise ou votre univers le permet, nous vous conseillons vraiment de tenter l'aventure. C'est très formateur, instructif, et intéressant pour tout le monde, et cela apporte une vraie culture de la veille dans votre environnement ;-) - - - -![Olivier Mansour nous présente la Programmation Orienté Objet "Canada Dry" !](/images/posts/imgob/0-00-30-83-201212-ob_c94d17c6bcf9b50c3bd95396fb16475f_screenshot.jpg) - -Olivier Mansour nous présente la Programmation Orienté Objet "Canada Dry" ! - - diff --git a/_posts/2013-02-05-m6web-lyon-recherche-un-lead-developpeur-architecte-web-h-f-en-cdi.md b/_posts/2013-02-05-m6web-lyon-recherche-un-lead-developpeur-architecte-web-h-f-en-cdi.md deleted file mode 100644 index 8ffb7cb6b..000000000 --- a/_posts/2013-02-05-m6web-lyon-recherche-un-lead-developpeur-architecte-web-h-f-en-cdi.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: post -title: "M6Web Lyon recherche un Lead Developpeur / Architecte web (H/F) en CDI" -description: "" -author: bedrock -category: -tags: [recrutement] -comments: false -permalink: m6web-lyon-recherche-un-lead-developpeur-architecte-web-h-f-en-cdi ---- - -![M6Web Lyon recherche un Lead Developpeur / Architecte web (H/F) en CDI](/images/posts/imgob/0-00-30-83-201302-ob_e427fc_05646956-photo-galaxie-m6-web-jpg.png) - -Mise jour : Le poste n'est à plus pourvoir. Merci - -M6Web Lyon recrute, en CDI, un Lead Développeur LAMP, avec une très forte expertise sur les technologies PHP 5.4, MySQL, Symfony2, GIT, et capable d'encadrer une petite équipe de développement. - -Nous recherchons quelqu'un de très passionné, enthousiaste, et mordu de veille technologique : un missionnaire de l'open source, un intégriste de la qualité de code, des tests unitaires et fonctionnels, et un architecte de projets aguerri avec une première approche en méthodologie de développement agile, et une expérience de management de développeurs. - -Si, en plus, vous êtes un malade de l'optimisation back-end et front-end, que des technologies comme Node.js vous émoustillent, que, malgré la qualité de MySQL, vous envisagez dans certains cas des solutions NoSQL alternatives (Mongo, Redis…), votre profil nous intéresse ! - -Venez apporter vos compétences aux équipes techniques de M6Web en travaillant sur des sites très forte charge ([m6.fr](https://www.m6.fr), [clubic.com](https://www.clubic.com), [jeuxvideo.fr](https://www.jeuxvideo.fr) …), et partagez-les grâce des conférences internes ou externes et des articles sur notre blog. - -Si vous avez les qualités requises et l'envie de nous rejoindre, allez sur le lien ci-dessous et faites nous part de votre CV, de votre compte github, et d’une lettre attrayante pour nous motiver vous rencontrer. - -Si vous souhaitez postuler ou avoir plus d'infos : [https://www.groupem6.fr/ressources-humaines/offres-emploi/lead-developpeur-architecte-web-h-f-229879.html](https://www.groupem6.fr/ressources-humaines/offres-emploi/lead-developpeur-architecte-web-h-f-229879.html) - - - diff --git a/_posts/2013-03-21-m6web-dev-facts-1.md b/_posts/2013-03-21-m6web-dev-facts-1.md deleted file mode 100644 index 743f99887..000000000 --- a/_posts/2013-03-21-m6web-dev-facts-1.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -layout: post -title: "M6Web Dev Facts #1" -description: "" -author: bedrock -category: -tags: [humour,devfacts] -comments: true -permalink: m6web-dev-facts-1 ---- - -Depuis de nombreuses années, toutes les "phrases chocs" dites par les équipes techniques de M6Web sont archivées, loggées, historisées. Pas moyen de sortir une ânerie sans qu'elle soit gravée dans le marbre. - -Du coup, nous avons décidé de profiter de cette période très calme sur le blog pour vous faire partager une petite sélection en vrac de quelques Dev Facts entendus dans les locaux d'M6Web Lyon : - - -# invalider le cache, nommer les choses ... - -> - On purge le cache infini tous les jours. -> - Non c'est le cache 7 jours qu'on purge tous les jours ! - - -# J'ajoute -2 - -> J'ai réduit de fois 10 - - -# work - not - flow - -> On a des workflows, on a aussi des worknotflows - -# La bonne affaire - -> Pour le même prix, t'as bien moins cher ailleurs ! - - -# Et pour arrêter ? tu cliques sur démarrer ! - -> La vidéo a été mise en erreur avec succès. - - -# Big or what ? - -> Il y a une librairie Rennes, elle est énorme! Tu y rentres, c'est tout petit... ! - - -# Niveau CE2 - -> je fais un mail de réponse avec une explication niveau CE2 - - -# Bref - -> - J'ai demandé Pierre, qui m'a dit qu'il ne savait pas mais que si j'avais l'info, il la voulait bien. Du coup, j'ai demandé Kenny, qui m'a dit de demander a Antony... qui ne savait pas et m'a dit de demander Pierre -> -> - Bref, j'ai posé une question un admin - -# CDP Junior - -> Raa mais chui un cdp junior moi je sais rien faire de mes 10 doigts :( - - - -La suite dans un prochain épisode ;-) - - - diff --git a/_posts/2013-04-09-m6web-dev-facts-2.md b/_posts/2013-04-09-m6web-dev-facts-2.md deleted file mode 100644 index b7e97636b..000000000 --- a/_posts/2013-04-09-m6web-dev-facts-2.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -layout: post -title: "M6Web Dev Facts #2" -description: "" -author: bedrock -category: -tags: [humour,devfacts] -image: - feature: posts/devfacts.jpg - credit: Game Of Thrones - creditlink: -comments: true -permalink: m6web-dev-facts-2 ---- - -On continue la série des Dév Facts, phrases oh combien cultes prononcées par nos chers développeurs lors d'oublis cérébraux :-) - - - -Pour ceux qui avaient raté la première série, c'est ici : [https://tech.bedrockstreaming.com/m6web-dev-facts-1](/m6web-dev-facts-1) - -Enjoy - - -# Captain Obvious - -> Chef de Projet : "Vous avez oublié quelque chose ?" -> -> Développeur : "Le probléme c'est que quand t'oublie, t'y pense pas" - -# Paye ta culture - -> C'est une citation de la bible ... et de Civilisation IV - -# Seigneur non ! - -> - Avant j'encodais les vidéos pour l'émission "Le jour du Seigneur" -> - C'est quoi ? une émission porno ? -> - Ca dépend comment t'écris "seigneur" - -# Les congés du fantastique - -> Le 4, je suis en RPG ... euh RTT - - -# Double compétence ... - -> Je viens de recevoir le CV d'un gars, il a fait une formation "Maîtrise en patisserie" ... il doit maîtriser les cookies non ? :) - -# Incomparable pour ne rien comparer - -> - Ah bon ? C'est les TCL qui font le plus souvent grève en France ? Plus que la SNCF ? -> - Oui, à titre de comparaison, je crois que c'est incomparable ... - - -# Retour vers le futur - -> Donc vous savez que je ne suis pas là la semaine dernière - - -# Trouvé ! - -> Je viens de trouver une découverte ! - - -# La preuve par dix - -> On a doublé la bande passante par dix - - -# Le flegme illustré - -> De toute facon, y'a pas de conséquence : au pire, on meurt. diff --git a/_posts/2013-04-25-cr-real-time-conference-europe-2013-day-1.md b/_posts/2013-04-25-cr-real-time-conference-europe-2013-day-1.md deleted file mode 100644 index 93dfaccb6..000000000 --- a/_posts/2013-04-25-cr-real-time-conference-europe-2013-day-1.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -layout: post -title: "CR Real Time Conférence Europe 2013 - Day 1" -description: "" -author: k_dits -category: -tags: [conference,nodejs,zeromq,rabbitmq,realtime] -image: - feature: - credit: - creditlink: -comments: true -permalink: cr-real-time-conference-europe-2013-day-1 ---- - -Les 22 et 23 Avril 2013, ont eu lieu, la [Real Time Conférence](https://realtimeconf.eu/) en version Européenne. - -Pour cette première édition, les festivités se déroulaient à Lyon, à la Plateforme, une péniche posée sur les quais du Rhône très sympathique. - -Passé l'accueil "la Titanic" avec l'orchestre dans le hall d'entrée, nous descendons au sous-sol pour commencer suivre la première journée de conférence, qui s'annonce déjà très chargée. - - - -![La vue de la salle de conférence (Crédit : https://twitter.com/frescosecco/status/326302218515017729/photo/1 )](/images/posts/imgob/0-00-30-83-201304-ob_007cc5_bidci5bccaakljg-jpg-large.jpeg) - -La vue de la salle de conférence (Crédit : https://twitter.com/frescosecco/status/326302218515017729/photo/1 ) - - - - -### WebSuckets, par Arnout Kazemier - -Première conférence autour des Websockets et des bugs ou difficultés d'implémentation que l'on peut rencontrer. - -On parle notamment de Firefox qui en prend pour son grade : Si l'on appuie sur ESC après que la page soit chargée, toutes les connexions sont fermées ... Firefox ne peut pas se connecter non plus sur une Websocket non sécurisée en HTTPS. - -Coté Safari Mobile, écrire dans une Websocket fermée plante votre téléphone, et cela arrive quand on revient sur un onglet qui utilisait des Websocket, ou lorsque l'on réouvre un safari précédemment réduit. - -Bref, en gros, ca démotive un petit peu sur l'utilisation des Websockets ! - -Arnout ( [@3rdEden](https://twitter.com/3rdEden) ) déconseille aussi l'utilisation des Websocket sur mobile, et indique de ne les utiliser que quand c'est vraiment nécessaire sur desktop. - -Quelques présentations d'outillages : - -- [HA Proxy](https://haproxy.1wt.eu/) -- [HTTP-Proxy](https://github.com/nodejitsu/node-http-proxy) -- [Nginx-devel](https://nginx.org/) - -Vous pouvez retrouver une battle sur les perfs de ces proxys ici : [github.com/observing/balancerbattle](https://github.com/observing/balancerbattle) - -On aborde aussi les problématiques de tirs de charge sur les Websocket avec : - -- [wsbench](https://github.com/pgriess/wsbench) -- [websocketbenchmark](https://npmjs.org/package/websocket-benchmark) - -Les deux étant, d'après Arnout, incomplets ou dépassés ... - -Il a donc développé son propre outil : Thor, "smasher of Websockets" à tester de toute urgence : [https://github.com/observing/thor](https://github.com/observing/thor) - -Les frameworks mentionnés pour en simplifier l'implémentation : - -- [Faye](https://github.com/faye/faye-websocket-node) -- [Signalr](https://github.com/SignalR/SignalR) -- [xsockets](https://xsockets.net/) -- [sockjs](https://github.com/sockjs) -- [socket.io](https://socket.io/) - -Attention aussi aux éléments perturbateurs : firewall, extensions de browsers, antivirus, ou proxy qui peuvent bloquer les ports utilisés par les Websockets. - -Bref, une première entrée en matière très complète et intéressante qui couvre vraiment toute la partie moins glamour des Websockets. - -Je vous invite aussi à consulter son blog si le sujet vous intéresse : [https://blog.3rd-eden.com/](https://blog.3rd-eden.com/) - - - -![(Crédit : https://twitter.com/hintjens/status/326243158109347841/photo/1 )](/images/posts/imgob/0-00-30-83-201304-ob_c1a436_bicmbh4cyaaim30-jpg-large.jpeg) - -(Crédit : https://twitter.com/hintjens/status/326243158109347841/photo/1 ) - - - - - -### SocketStream 0.4, par Owen Barnes - -Voici l'un des frameworks pour l'implémentation des Websockets, où son créateur ( [@socketstream](https://twitter.com/socketstream) ) nous partagé ses idées de la conception et de l'utilisation d'un framework : découplage, simplicité, modularité etc. - -Le framework est "Transport Agnostics" et peut donc utiliser sockJs, Engine.io, ou Websockets native juste en changeant une simple ligne. - -Le FW est basé sur Prism, un module de serveur realtime, lui aussi open-sourcé sur [github.com/socketstream/prism](https://github.com/socketstream/prism). - -La 0.4 présentée est en cours de finalisation, et sera disponible prochainement en version finale sur le github [https://github.com/socketstream/](https://github.com/socketstream) - - - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8672407195/in/set-72157633306379029/ )](/images/posts/imgob/0-00-30-83-201304-ob_d3bd37_8672407195-5377c6db45-c-jpg.jpeg) -(Crédit : https://www.flickr.com/photos/andyet-photos/8672407195/in/set-72157633306379029/ ) - - - - -### XSockets, par Magnus Thor - -Magnus ( [@dathor](https://twitter.com/dathor) ), nous présente son framework [Xsockets](https://xsockets.net/) pour l'utilisation des Websockets avec une démo "live coding" peut-être intéressante, mais tentée "online" et avec une connexion bien foireuse (comme dans toutes les conférences techniques, non ?) ... - -Bref, un peu douloureux à regarder, mais la démo avait l'air d'avoir du potentiel : une application web utilisant WebRPC pour partager en mode Peer To Peer la Webcam de l'utilisateur. - - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8673638532/in/set-72157633306379029/ )](/images/posts/imgob/0-00-30-83-201304-ob_cd0b7a_8673638532-65e165e7d4-c-jpg.jpeg) - -(Crédit : https://www.flickr.com/photos/andyet-photos/8673638532/in/set-72157633306379029/ ) - - - - -### ZeroMQ as scriptable sockets, par Lourens Naudé (Bear Metal) - -Lourens ( [@methodmissing](https://twitter.com/methodmissing)) est l'un des "co-maintainer" de [ZeroMq](https://www.zeromq.org/). - -Il nous présente ZeroMq comme une solution de messagerie instantanée pour les apps. Ca n'est pas un serveur, ni un broker, mais une librairie sur la communication et gestion de la concurrence. - -On parcourt ensuite les différents types de sockets supportés : - -- Req / Rep -- Pub / Sub -- Push / Pull - -Voir la présentation ci dessous : - - - - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8672695927/in/set-72157633306379029/ )](/images/posts/imgob/0-00-30-83-201304-ob_309890_8672695927-d144bacc5c-c-jpg.jpeg) - -(Crédit : https://www.flickr.com/photos/andyet-photos/8672695927/in/set-72157633306379029/ ) - - - - -### WebRTC, par Sam Dutton (Google) - -Sam Dutton, Developper Advocate chez Google ( [@sw12](https://twitter.com/sw12) ), qu'on à déja vu/entendu par le passé à la Vélocity Conf (voir précédent CR) nous parle de WebRPC. - -On parcourt [les différentes API disponible](https://simpl.info/webrtc/), le support des navigateurs (Chrome, Firefox Nightly et IE Chrome Frame ...). - -On découvre ensuite de nombreuses démos très sympa : - -- [Ascii Caméra](https://idevelop.ro/ascii-camera/) -- [GetUserMedia](https://simpl.info/getusermedia/) -- [Webcam Toy](https://webcamtoy.com/fr/) -- [Magic Xylophone](https://www.soundstep.com/blog/experiments/jsdetection/) -- [Screen Capture](https://simpl.info/screencapture/) (nécessite Chrome Canary) -- ... - -Pour débugger plus facilement, utilisez le [chrome://webrtc-internals](chrome://webrtc-internals) - -Libs, apps et frameworks pour XML RPC : - -- [easyRTC](https://github.com/priologic/easyrtc) : full stack -- [conversat.io](https://conversat.io/) built with [SimpleWebRTC](https://github.com/henrikjoreteg/SimpleWebRTC) -- [PeerJS](https://peerjs.com/) : API abstraction -- [webRTC.io](https://github.com/webRTC/webRTC.io) -- [Sharefest](https://github.com/peer5/sharefest) - -Plus d'infos/codes ou démos sur les slides : [https://samdutton.net/realtime2013/](https://samdutton.net/realtime2013/) - - - -> "WebRTC and HTML5 could enable the same transformation for real-time communications that the original browser did for information." Phil Edholm / Nojitter - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8673907134/in/set-72157633306379029 )](/images/posts/imgob/0-00-30-83-201304-ob_28a7e6_8673907134-213bc05531-c-jpg.jpeg) -(Crédit : https://www.flickr.com/photos/andyet-photos/8673907134/in/set-72157633306379029 ) - - - -### Enemy of the state : An introduction to functional reactive programming with Bacon.Js, par Phiilip Roberts (Float) - - - -![CR Real Time Conférence Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201304-ob_dcab2750722555abc22c1e6a49b7fa35_skitch-png.png) - -L'une des présentations les plus intéressantes de la journée par Philip Roberts ( [@philip_roberts](https://twitter.com/philip_roberts) ), CTO et co-founder de [Float](https://floatapp.com/) avec l'introduction Bacon.Js et la "[Functional Reactive Programming](https://stackoverflow.com/questions/1028250/what-is-functional-reactive-programming/1030631#1030631)" en Javascript. Une façon différente de coder pour éviter les "callback hell" notamment. - -Le projet répond aussi à une problématique très courante des dév JS, avec l'exemple du "Check Username Availibility" qui lance une requête Ajax chaque KeyPress et dont l'ordre n'est pas maitrisé. (partir de la slide 38) - -Bacon.Js est dispo sur Github : [https://github.com/raimohanska/bacon.js](https://github.com/raimohanska/bacon.js) - -P.s: la visualisation des streams sur ses slides était très sympa : [https://latentflip.com/bacon-examples/](https://latentflip.com/bacon-examples/) - -Plus d'infos sur les slides : [https://latentflip.com/bacon-talk-realtimeconfeu/](https://latentflip.com/bacon-talk-realtimeconfeu/) - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8673684632/in/set-72157633306379029 )](/images/posts/imgob/0-00-30-83-201304-ob_859c21_8673684632-ce4c774373-c-jpg.jpeg) - -(Crédit : https://www.flickr.com/photos/andyet-photos/8673684632/in/set-72157633306379029 ) - - - - -### Quick Wins with Redis for your website, par Cathering Jung - -Catherine Jung ( [@bufferine](https://twitter.com/bufferine) ) travaille sur des services de paris en ligne. Elle explique les problématiques de temps réel qu'elle doit affronter, et comment [Redis](https://redis.io) lui permet de mieux supporter la charge. - -Au final, on parle un peu plus de Scala que de Redis, mais tout retour d'expérience est toujours bon prendre. - -Retrouvez les slides ici : - -[https://docs.google.com/file/d/0By6ZH5wplIR-MzgyOEJCMEkyWmc/edit?usp=sharing ](https://docs.google.com/file/d/0By6ZH5wplIR-MzgyOEJCMEkyWmc/edit?usp=sharing) - - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8673926016/in/set-72157633306379029/ )](/images/posts/imgob/0-00-30-83-201304-ob_7359c2_8673926016-ae5254c9ba-c-jpg.jpeg) - -(Crédit : https://www.flickr.com/photos/andyet-photos/8673926016/in/set-72157633306379029/ ) - - - - -### Realtime and Go : Leaving the frameworks behind, par Paddy Foran - -Paddy ( [@paddyforan](https://twitter.com/paddyforan) ) nous présente le language Go. - -A la question : "What is Go ?" la réponse est : - - - -> A better C, from the guys that didn’t bring you C++ - -[https://goonaboat.com/](https://goonaboat.com/) - - -Bref, Go c'est : - -- Compiled -- Static typed -- Fast -- Elegant -- Concurrent - -Les slides sont disponibles ici : [https://goonaboat.com/](https://goonaboat.com/) et le code de la présentation : [https://github.com/paddyforan/goonaboat](https://github.com/paddyforan/goonaboat) - -Plus d'infos sur le langage ici : [https://golang.org/](https://golang.org/) avec un "Tour" qui parait très bien fait : [https://tour.golang.org/#1](https://tour.golang.org/#1) - - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8673939104/in/set-72157633306379029 )](/images/posts/imgob/0-00-30-83-201304-ob_3cfbfd_8673939104-3574611f1c-c-jpg.jpeg) - -(Crédit : https://www.flickr.com/photos/andyet-photos/8673939104/in/set-72157633306379029 ) - - - - -### Cloud Messaging with Node.Js and RabbitMQ, par Alvaro Videla - -Alvaro ( [@oldsound](https://twitter.com/old_sound) ) est le co-auteur de "Rabbit Mq In action". - -Il a présenté l'intérêt d'utiliser un rabbitMQ dans un projet qui est un fork d'Instagram, mais Real Time : CloudStagram, sur une stack "Cloud Foundy", Rabbit MQ, Redis, MongoDB et SockJS - -Notamment le concept de tout gérer via événement (slide 54 ci-dessous). - -Bref, pas mal de bonnes idées à retenir et pas mal de projets intéressants sur son github : [https://github.com/videlalvaro](https://github.com/videlalvaro) , comme le [RabbitMqSimulator](https://github.com/RabbitMQSimulator/RabbitMQSimulator) pour présenter clairement le fonctionnement des RabbitMQ - - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8673976982/in/set-72157633306379029/ )](/images/posts/imgob/0-00-30-83-201304-ob_68864d_8673976982-dc366df3d9-c-jpg.jpeg) - -(Crédit : https://www.flickr.com/photos/andyet-photos/8673976982/in/set-72157633306379029/ ) - - - - - - -### Offline first!, par Jan Lehnardt - -Jan ( [@janl](https://twitter.com/janl) ) bosse sur CouchDb. [Apache CouchDB](https://couchdb.apache.org/) est une base de données de type document basée sur le format JSON et utilisant Javascript (notamment pour les MapReduce). - -Il commence sa présentation par un "You are all doing it wrong !". En réexpliquant que le réseau est toujours rapide, mais que c'est la latence qui est problématique. (Voir [l'excellent article de 2010 de @edasfr](https://calendar.perfplanet.com/2010/know-your-enemy-latency/) sur le sujet toujours aussi pertinent ). - -Il faut aujourd'hui travailler Offline First ! (un peu l'équivalent d'un Mobile First coté apps), et prend pas mal d'exemples de bonne ou mauvaise implémentation (de la gestion hors connexion, du passage dans un tunnel, en se moquant de la mauvaise couverture française dans le TGV). - -On aborde ensuite les : - -- [CouchDB](https://couchdb.apache.org/) -- [PouchDB](https://pouchdb.com/) : Javascript database that syncs! -- [TouchDB](https://touchdb.org/) : CouchDB-compatible embeddable database engine for mobile & desktop apps - -et la présentation du framework Hoodie : [https://hood.ie/](https://hood.ie/), basé sur le Offline par défaut. - - - -> "Think of CouchDB as Git for your application data" Jan Lehnardt - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8672884965/in/set-72157633306379029/ )](/images/posts/imgob/0-00-30-83-201304-ob_d8f953_8672884965-fdac5b947d-c-jpg.jpeg) - -(Crédit : https://www.flickr.com/photos/andyet-photos/8672884965/in/set-72157633306379029/ ) - - - - -### Building Realtime HTML5 apps for Android and Firefox OS, par Anthony Ricaud - -Présentation par Anthony Ricaud ( [@rik24d](https://twitter.com/rik24d) ) des fonctionnalités HTML5 implémentées par les équipes de Mozilla, notamment pour connaitre l'état de la batterie, l'orientation, la gestion des apps supportant la sélection de photos par exemple... - -Chaque site peut être une apps, à condition de mettre les lignes nécessaires dans un fichier manifest. Beaucoup de débats aussi autour des systèmes fermés de MarketPlace. - -Plus d'infos dans les slides ci dessous : - - -![(Crédit : https://www.flickr.com/photos/andyet-photos/8672894401/in/set-72157633306379029 )](/images/posts/imgob/0-00-30-83-201304-ob_8fd5d0_8672894401-843661c273-c-jpg.jpeg) - -(Crédit : https://www.flickr.com/photos/andyet-photos/8672894401/in/set-72157633306379029 ) - - - - - - -### NodeCopter + Hackathon - -Je laisse la parole à Olivier Mansour pour la présentation du NodeCopter : - -Romain Huet ( [@romainhuet](https://twitter.com/romainhuet) ) nous a présenté et fait une petite démonstration du pilotage d'un AR Drone avec NodeJs. - - - Issu du projet nodecopter [https://nodecopter.com](https://nodecopter.com)/, un ensemble de librairies Node.js est disponible et rend le pilotage du drone complètement accessible. Mouvements en vol, stream de la caméra, Romain nous a fait une démonstration fun et captivante de l'engin. - -Et faire voler un drone dans un bateau … on avait jamais vu ça ! - - - - - -### Fin de la 1ère journée : - -Une première journée très sympathique, bourrée d'idées et d'outils en tout genre. L'organisation est vraiment au poil, et on repart en voulant refaire le monde techniquement :-) - -Le compte rendu de la deuxième journée est ici : [https://tech.bedrockstreaming.com/cr-real-time-conference-europe-2013-day-2](/cr-real-time-conference-europe-2013-day-2) - -P.s : Merci &Yet pour la plupart des photos présentes ici : [https://www.flickr.com/photos/andyet-photos/sets/72157633306379029/](https://www.flickr.com/photos/andyet-photos/sets/72157633306379029/) - -Pour les plus motivés, la conférence été enregistrée en vidéo : - - - - -Vidéo de la première journée de la RealTime Conf Europe diff --git a/_posts/2013-04-26-cr-real-time-conference-europe-2013-day-2.md b/_posts/2013-04-26-cr-real-time-conference-europe-2013-day-2.md deleted file mode 100644 index 0cf594560..000000000 --- a/_posts/2013-04-26-cr-real-time-conference-europe-2013-day-2.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -layout: post -title: "CR Real Time Conférence Europe 2013 - Day 2" -description: "" -author: o_noel -category: -tags: [conference,nodejs,realtime] -comments: true -permalink: cr-real-time-conference-europe-2013-day-2 ---- - -![Crédit : https://www.flickr.com/photos/andyet-photos/8679275805/in/set-72157633306379029](/images/posts/imgob/0-00-30-83-201304-ob_9cf041_8679275805-4983128ec8-c-jpg.jpeg) - -Crédit : https://www.flickr.com/photos/andyet-photos/8679275805/in/set-72157633306379029 - - -[Après la première journée](/cr-real-time-conference-europe-2013-day-1), on continue avec la deuxième journée de conférence. Toujours sur le format de 20 minutes pour présenter le sujet. - - - -### WOOT, Arial Balkan - - - -![Crédit : https://twitter.com/OriPekelman/status/326600103475425281/photo/1](/images/posts/imgob/0-00-30-83-201304-ob_12f478_bihree-cmaezm5x-jpg-large.jpeg) - -Crédit : https://twitter.com/OriPekelman/status/326600103475425281/photo/1 - - -[@aral](https://twitter.com/vgholkar/status/326602313823318016) a travaillé sur une solution d'édition partagée de contenu, une solution sans transformation opérationnelle ([OT sur Wikipedia](https://en.wikipedia.org/wiki/Operational_transformation)) : WOOT qui signifie Without Operational Transformation. - -Le concept exposé est de ne pas faire de suppression des caractères d'une chaîne, mais plutôt de travailler sur la notion de visible / invisible et de position du caractère au sein de la chaîne. L'objectif étant de garder la convergence et de préserver les intentions des utilisateurs. - -Il nous indique différentes ressources pour approfondir le sujet : - -- une vidéo de Google Tech Talk :[Issues and Experiences in Designing Real-time Collaborative Editing Systems](https://www.youtube.com/watch?v=84zqbXUQIHc) -- une librairie JS : [ShareJS](https://sharejs.org/) -- pour aller plus loin dans la gestion du travail collaboratif, l'[Inria rend disponible différents travaux de recherches](https://hal.inria.fr/inria-00432368/en/) sur le sujet - - - -### Convention-Driven JSON, Steve Klabnik - - - -![Crédit : https://twitter.com/OriPekelman/status/326607298556489728/photo/1](/images/posts/imgob/0-00-30-83-201304-ob_e5031c_bihxm4vccaep4av-jpg-large.jpeg) - -Crédit : https://twitter.com/OriPekelman/status/326607298556489728/photo/1 - - -[@steveklabnik](https://twitter.com/steveklabnik) avait déjà parlé la veille sur un autre sujet. Aujourd'hui, il nous expose la problématique de passer des objets (quelque soit le langage) JSON. Bien souvent, on utilise JSON pour la communication entre différents services (l'un en PHP et l'autre en Python par ex, ou deux services en PHP). - -Pour un site web, on arrive souvent au résultat suivant : - -*Objet -> Template -> HTML* - -Pour éviter certains problèmes lors des échanges de données, il propose par exemple en ruby d'utiliser [active_model_serializers](https://github.com/rails-api/active_model_serializers) ce qui permet d'obtenir le résultat suivant : - -*Objects -> Serializer -> HTML* - -En résumé, il recommande de passer par un outil de serialisation des données afin de ne pas perdre la structure de l'objet et donc d'avoir une plus grande réactivité entre le client et le serveur. - - - -### Realtime vs Real world, Tyler Mac Mullen - -[@tbmcmullen](https://twitter.com/tbmcmullen) travaille pour [Fastly](https://www.fastly.com/). Sa société propose des solutions d'optimisation au sein des infrastructures de type CDN. - - - -![Crédit : https://twitter.com/OriPekelman/status/326613272969228288/photo/1](/images/posts/imgob/0-00-30-83-201304-ob_bf8753_bihdcplcmaabdq-jpg-large.jpeg) - -Crédit : https://twitter.com/OriPekelman/status/326613272969228288/photo/1 - - -Il commence sa présentation en définissant les deux termes : - -- Realtime = réduire la latence -- Realworld = notion d'infrastructure - -Il indique également l'impossibilité de construire des infrastructures en temps-réel. Seul les CDNs ont la possibilité de s'approcher du temps-réel. La notion de purge est également essentielle. - -Tyler présente ensuite 3 possibilités de purge : - -1. Utilisation de Rsyslog : soit via TCP (problème : lenteur), soit via UDP (problème : pas de retour d'erreur). Un noeud notifie tous les autres. -2. Love triangle : pas de serveur central mais notion de peer-to-peer. Chaque noeud interagit avec 2/3 autres noeuds. Problème : il n'y a pas d'état global ni de possibilité de scalabilité avec ce type d'infrastructure -3. Hybride : on met en place des *switchs* au niveau des noeuds. Les switchs interagissent entre eux, puis redistribuent l'information au niveau de ces serveurs. - -La société a déjà fait d'autres sessions lors d'autres conférences tel que Velocity qui pourrait fortement intéressé les adminsys ;-) - - - -### DiscoRank : optimizing discoverability on SoundCloud, par Amélie Anglade - - - -![Crédit : https://www.flickr.com/photos/andyet-photos/8680450402/in/set-72157633306379029](/images/posts/imgob/0-00-30-83-201304-ob_637fb3_8680450402-4048e3b2df-jpg.jpeg) - -Crédit : https://www.flickr.com/photos/andyet-photos/8680450402/in/set-72157633306379029 - - - - -[@utstikkar](https://twitter.com/utstikkar) est une française qui travaille pour Soundcloud en tant que MIR Software Engineer. - -Elle nous a expliqué l'évolution effectuée au sein de leur moteur de recherche : Discorank. Ce système peut être assimilé au PageRank de Google. - -Ils utilisent pour cela : MySQL puis HDFS et enfin tout est re-manipulé dans [ElasticSearch](https://www.elasticsearch.org/) - - - -### BuddyCloud - Rethinking Social, par Simon Tennant - - - -![Crédit : https://twitter.com/OriPekelman/status/326635400175161344/photo/1](/images/posts/imgob/0-00-30-83-201304-ob_e1ca08_bihxknbceae7ckp-jpg-large.jpeg) - -Crédit : https://twitter.com/OriPekelman/status/326635400175161344/photo/1 - - -Simon Tennant est CEO de la société BuddyCloud. Il a tenté de faire passer les informations suivantes : - -- fédérer ou mourir -- travailler sur les protocoles non sur les APIs -- pour construire du social dans un produit, il recommande de se baser sur l'open source, les standards et protocoles ouverts - -L'objectif de sa société est de permettre aux personnes de construire un réseau social fédéré et bien entendu temps-réel. - -N'hésitez pas à fouiller dans leur source sur [Github](https://github.com/buddycloud)) qui fourmille de fonctionnalités. - - - -### Realtime at Microsoft, Pierre Couzy - -Pierre Couzy travaille depuis plus de 10 ans chez Microsoft. Il nous présente un projet réalisé par des développeurs US : [SerialR](https://signalr.net/) ([Github](https://github.com/SignalR)). Le projet utilise les Websockets. - - - -![Crédit : https://www.flickr.com/photos/andyet-photos/8679336549/in/set-72157633306379029](/images/posts/imgob/0-00-30-83-201304-ob_045020_8679336549-cc73704704-jpg.jpeg) - -Crédit : https://www.flickr.com/photos/andyet-photos/8679336549/in/set-72157633306379029 - - -Le projet possède deux dépendances principales : - -- [Json.net](https://james.newtonking.com/projects/json-net.aspx) côté serveur -- [Jquery](https://jquery.com/) côté client - -Il est noter que la négociation exacte entre le client et le serveur dépend du navigateur utilisé. - -A noter que cette présentation est l'une des rares qui n'a pas été réalisée avec un MacBook ;-) - - - -### Learning from Past Mistakes, a new node http layer, par Tim Caswell - -[@creationix](https://twitter.com/creationix) était un des anciens core dev de NodeJS. Il nous expose les différents points cause desquels il a quitté le projet. - - - -![Crédit : https://twitter.com/OriPekelman/status/326670519371980800/photo/1](/images/posts/imgob/0-00-30-83-201304-ob_0617d7_biirg0ocyaacsmb-jpg-large.jpeg) - -Crédit : https://twitter.com/OriPekelman/status/326670519371980800/photo/1 - - -Un des autres problèmes avec NodeJS est que le changement est difficile : - -- utilisé en production par différentes sociétés -- difficulté à modifier les APIs - -Il a donc développé [Luvit](https://github.com/luvit/luvit) basé sur la technologie Lua (légère, rapide et permettant les co-routines). - Cette nouvelle couche HTTP donne la possibilité : - -- de suspendre et de reprendre la fibre actuelle -- lorsque l'on a des fibres on peut faire d'autres choses -- écrire sur les objets stream avec .write(item) -- lire sur les objets stream avec .read() -- de terminer un stream avec false item - -Vous pouvez retrouver l'ensemble des slides sur [Github](https://github.com/creationix/moonslice-node) - - - -### HTTP Proxy, par Nuno Job - - - -![Crédit : https://www.flickr.com/photos/andyet-photos/8680421388/in/set-72157633306379029](/images/posts/imgob/0-00-30-83-201304-ob_05a059_8680421388-75c8b026cc-jpg.jpeg) - -Crédit : https://www.flickr.com/photos/andyet-photos/8680421388/in/set-72157633306379029 - - -[@dscape](https://twitter.com/dscape) nous propose un bon article sur [le load balancing avec nodejs](https://blog.3rd-eden.com/post/47477879421/finding-balance). - Pour le speaker nodejs c'est : **net protocols && libuv && v8 && npm** - -Vous pourrez retrouver l'ensemble des slides sur [Github](https://github.com/dscape/realtimeeu) - - - -### Learning How To Let Go, par Kyle Drake - -[@kyledrake](https://twitter.com/kyledrake) introduit d'autres solutions en remplacement de JSON : basés sur des données en binaire. - - - -![Crédit : https://twitter.com/OriPekelman/status/326684373090963456/photo/1](/images/posts/imgob/0-00-30-83-201304-ob_dbdd43_biidtnxceaasggc-jpg-large.jpeg) - -Crédit : https://twitter.com/OriPekelman/status/326684373090963456/photo/1 - - -Cependant, tout le monde n'utilise pas correctement les échanges binaires. Le speaker nous fait un très bon résumé de la situation pour effectuer des pushs sur la plateforme d'Apple ([Apple Push Notification Service](https://developer.apple.com/library/mac/#documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/Chapters/CommunicatingWIthAPS.html#//apple_ref/doc/uid/TP40008194-CH101-SW1)) et des types de retours effectués par Apple. Ceci résume assez bien la situation. - - - -![Crédit : https://twitter.com/noel_olivier/status/326686457257406464](/images/posts/imgob/0-00-30-83-201304-ob_5c9f0a_biifmh4cmaagumx-jpg-large.jpeg) - -Crédit : https://twitter.com/noel_olivier/status/326686457257406464 - - -JS ne propose pas d'API "native" mais un projet permet de traiter du binaire : [binaryjs](https://binaryjs.com/) (du binaire via websockets). - -Kyle effectue différents benchs sur la taille des contenus envoyés : l'un en JSON, l'autre en Binary JSON et le dernier via MessagePack. Bien entendu, ce sont les contenus en binaire qui sont les plus légers, mais il reste voir l'impact du téléchargement du JS associé et du traitement côté client. - -Un sujet donc à étudier qui rappelle [AMF](https://en.wikipedia.org/wiki/AmfPHP) pour échanger des informations au format binaire entre PHP et Flash. - - - -### Securing socket applications, par James Coglan - -Dans un premier temps, [@jcoglan](https://twitter.com/jcoglan) nous indique que la sécurité c'est difficile et que cela concerne : - -- l'authentification -- la vie privée -- les XSS -- les CSRF - - - -Pour répondre aux différentes problématiques, il nous présente [Faye](https://faye.jcoglan.com/) un système simple de message pub/sub pour le web. [Ses slides sont disponibles](https://slides.jcoglan.com/security-realtime#1). - - - -### Real-time design, par Jan-Christoph Borchardt - - - -![Crédit : https://twitter.com/OriPekelman/status/326711206209527809/photo/1](/images/posts/imgob/0-00-30-83-201304-ob_f74ac1_bii2hg7ciaag4bk-jpg-large.jpeg) - -Crédit : https://twitter.com/OriPekelman/status/326711206209527809/photo/1 - - -[@jancborchardt](https://twitter.com/jancborchardt) n'est pas un développeur, mais il nous rappelle quelques concepts importants : - -- Plus l'utilisateur s'ennuie, plus la confusion augmente -- Sous 0,1 ms, l'utilisateur considère cela comme du temps réel -- Attention aux transitions -- Ne pas tuer la fluidité -- "Interruptification" (exemple flagrant sur l'image ci-dessous) -- Pas de notifications pendant l'utilisation (ex batterie faible 20% sur un mobile) - - - -![CR Real Time Conférence Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201304-ob_b2ee1c90b3554e2214b30ef5e4587667_imag0378.jpg) - -En résumé, l'interface et le design sont importants également pour s'approcher d'une expérience utilisateur temps-réel. - - - -### Fin de la seconde journée - -Pour les plus courageux, le livestream est également disponible. - - - - -Cet événement était très intéressant : - -- par son avance de phase, la majorité des présentations correspondaient des résultats de R&D, voire d'innovation. -- par l'ambiance -- par le networking que l'on pouvait y faire - -On peut en revanche peut être un peu regretter le nombre de français (la fois côté speaker et également côté public). - -Pour terminer, un grand merci Julien Genestoux qui a organisé l'événement. - -Rendez-vous pour la prochaine édition. diff --git a/_posts/2013-05-06-la-poo-canada-dry.md b/_posts/2013-05-06-la-poo-canada-dry.md deleted file mode 100644 index 4c836fd94..000000000 --- a/_posts/2013-05-06-la-poo-canada-dry.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: post -title: "La POO Canada Dry" -description: "" -author: k_dits -category: -tags: [php,poo,lft,video] -comments: true -permalink: la-poo-canada-dry ---- - -Nous vous avions parlé, il y'a quelques mois, de nos conférences interne, [les Last Friday Talk](/organiser-des-conferences-technique-en-interne). - -Voici une première vidéo de l'une de ces sessions sur "la POO Canada Dry". - -La POO (Programmation Orienté Objet) ne consiste pas à mettre du code dans des classes, elle fait appel à des concepts vitaux pour le développeur moderne. [Olivier](https://twitter.com/omansour) nous présente quelques mauvais exemples tirés de code legacy et quelques bonnes pratiques pour faire de la POO (mais en fait c'est surtout du troll). - -Malheureusement, la vidéo n'est plus disponible... diff --git a/_posts/2013-05-20-cr-conference-agora-cms-du-15-mai-2013.md b/_posts/2013-05-20-cr-conference-agora-cms-du-15-mai-2013.md deleted file mode 100644 index d819d8158..000000000 --- a/_posts/2013-05-20-cr-conference-agora-cms-du-15-mai-2013.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -layout: post -title: "CR Conférence Agora Cms du 15 mai 2013" -description: "" -author: d_roussel -category: -tags: [conference,cms] -image: - feature: - credit: - creditlink: -comments: true -permalink: cr-conference-agora-cms-du-15-mai-2013 ---- - -![CR Conférence Agora Cms du 15 mai 2013](/images/posts/imgob/0-00-30-83-201305-ob_32908c407070b79695e36e292abe7a4f_mg-3380-l-jpg.jpeg) - -Le 15 mai 2013 avait lieu à Paris, la première édition de l'AgoraCMS, Conférence axée sur les CMS et la gestion de contenu Web. - -Cette conférence est organisée par des acteurs importants du milieu, de chez Microsoft, Epitech, Oxalide, Cap Gemini ... - - - Au rendez-vous, des sujets sur Drupal, Wordpress, le Responsive, les Réseaux Sociaux d'entreprise, et des retours d'expérience de différents acteurs français sur leurs utilisations de CMS public, "home made" ou propriétaire. - - - - - -### Les CMS - écosystème - état des lieux et tendance, par Marine Soroko (CoreTechs) et Frédéric Bon (Clever Age) - -Première conférence, et bonne introduction en la matière avec une présentation de la typologie des CMS. - -On nous met en garde sur les "éditeurs de contenu" notamment, ou un CMS ne doit pas permettre de générer du contenu dans les pages. Un CMS de nos jours, doit permettre de gérer un référentiel de contenu, que nos pages doivent pouvoir requêter, sinon nous devenons vite confrontés a des problèmes de ré-usabilité. - -Les différents acteurs du marché sont présentés via les fameux "Quadrant magic" qu'on nous annonce finalement très loin de la réalité. - -On finit sur une projection du futur des CMS qui devront répondre aux problématiques suivantes : - -- multi-canal (support tablette / site tiers etc) -- multi-source -- personnalisation -- intégration e-commerce -- Analyses et statistique -- interactions et e-services - - - -![(Source: https://photos.silberman.fr/Other/AgoraCMS/ )](/images/posts/imgob/0-00-30-83-201305-ob_c5fa6866001962d0cba0506a7a467ad3_mg-3357-l-jpg.jpeg) - -(Source: https://photos.silberman.fr/Other/AgoraCMS/ ) - - - - - -### Votre CMS intelligent grâce l'analyse des logs, par Jérome Renard (Belogik) - -Jérome Renard, ancien développeur EzPublish, a monté ces derniers mois une start-up proposant du Log As a Service, avec une solution du nom de Belogik, un peu comparable un [Loggly](https://loggly.com/). - - La conférence présente l'intérêt d'analyser les logs (ici sortant d'un CMS, mais transposable tout site/service web) : - -- Incident de production -- Service de la preuve -- SEO -- Performances -- Gestion applicative -- Sécurité -- Développement - -Mais aussi la difficulté à traiter des logs de formats différents, pas forcément disposition, quand vous ne maitrisez pas ou peu l'hébergement. - - Pour la recherche dans ses logs, on a des solutions comme [SolR](https://lucene.apache.org/solr/) ou les différents produits basés sur Lucene comme [ElasticSearch](https://www.elasticsearch.org/) (je rajouterais aussi le couple [LogStash](https://logstash.net/) + [Kibana](https://kibana.org/) utilisant aussi ElasticSearch) - - Bref, une excellente présentation, dans la veine de celles que nous avions pu présenter [chez m6web au niveau du Monitoring](/monitoring-applicatif-pourquoi-et-comment), un sujet très complémentaire avec le Logging. - - Pour plus d'informations, [belogik.com](https://www.belogik.com/), ou sur leur compte twitter : [@belogikCom](https://twitter.com/belogikCom). - -Sinon vous pouvez consulter les slides sur le lien ci-dessous. - - - -![(Source: https://photos.silberman.fr/Other/AgoraCMS/ )](/images/posts/imgob/0-00-30-83-201305-ob_ed2084816ac5e6202fb949c56a606fa7_mg-3404-l-jpg.jpeg) - -(Source: https://photos.silberman.fr/Other/AgoraCMS/ ) - - -[Votre CMS intelligent grâce l'analyse des logs](https://jrenard.info/talks/agoracms2013/) - - -[https://jrenard.info/talks/agoracms2013/](https://jrenard.info/talks/agoracms2013/) - - - - - -### Tendances du design et nouveaux usages, par Patrick Maruejouls (Think Think) - -Très bonne présentation sur l’importance du design dans le premier sens du terme : un outil pouvant et devant permettre de servir les intérêts stratégiques d’une entreprise. Il en découle qu’il serait bon de placer le design en amont des décisions et non en aval comme c’est souvent le cas. - - - De ses nombreuses expériences, nous pouvons retenir qu’une des plus importantes tendances pour les années venir est l'adaptation du design l’utilisateur. Ainsi, une grande enseigne de prêt-à-porter masculin a inséré une puce RFID dans l’étiquette de ses vêtements pour que l’ambiance des cabines d’essayage s’adapte aux vêtements essayés (ex: une petite musique des îles se déclenche lorsque le client essaye une chemise hawaïenne). - - - De même, cette tendance d’adaptation du design l’utilisateur pourra se voir magnifiée par la TV connectée et le second écran. - - - -![Le second écran chez M6Web](/images/posts/imgob/0-00-30-83-201305-ob_91c66f83c453d3080c673849af781b5f_mg-3440-l-jpg.jpeg) - -![Le second écran chez M6Web](/images/posts/imgob/0-00-30-83-201305-ob_0916d19304f6a7d518f9c986170e5690_photo.JPG) - -Le second écran chez M6Web - - - - - -### Les meilleurs thèmes et modules Drupal, par Dorian Marchan (Kernel 42) et Romain Jarraud (Trained People) - - - - Petite introduction [Drupal](https://drupal.org/), présenté comme un CMS, mais surtout un CMF (Content Management Framework), avec la présentation de quelques modules très intéressants pour des développeurs ou pour réaliser son "Usine à Site". - - - On retiendra [GCC](https://drupal.org/project/gcc) dont une démo très intéressante sera faite, [Drupal Commerce](https://www.drupalcommerce.org/), étant une distribution de Drupal avec un assemblage de modules et personnalisation pour orienter son drupal vers le e-commerce, mais aussi la présentation d'un des thèmes les plus évolués de Drupal : [Omega](https://drupal.org/project/omega), thème ultra complet, Responsive avec un back-office assez puissant. - - -![(Source: https://photos.silberman.fr/Other/AgoraCMS/ )](/images/posts/imgob/0-00-30-83-201305-ob_03ff809fcf2c8c3f844bdd81e5db8e2d_mg-3488-l-jpg.jpeg) - -(Source: https://photos.silberman.fr/Other/AgoraCMS/ ) - - - - - -### Les Réseaux sociaux d'entreprise, par Edouard Ly (Oxalide) et Marine Soroko (Core Techs) - - - Terme la mode depuis ces dernières années, les RSE commencent envahir les entreprises. - Présentation (sans démo ou screenshot malheureusement), des différents acteurs du marché (très peu d'acteurs open source d'ailleurs :( ) : - -- [Jive](https://www.jivesoftware.com/) (leader du marché) -- [BlueKiwi](https://www.bluekiwi-software.com/fr/) -- [Telligent](https://telligent.com/) -- [BuddyPress](https://fr.buddypress.org/) : extension Wordpress -- [Yammer](https://www.yammer.com/) -- [Elgg](https://elgg.org/) -- [Chatter](https://www.chatter.com/fr/) -- [Sharepoint](https://office.microsoft.com/fr-fr/sharepoint/) -- [Liferay](https://www.liferay.com/fr) -- [Drupal commons](https://drupal.org/project/commons) -- … - - - -![(Source: https://photos.silberman.fr/Other/AgoraCMS/ )](/images/posts/imgob/0-00-30-83-201305-ob_edf19ebe9b387189f8846e26c1d339cf_mg-3535-l-jpg.jpeg) - -(Source: https://photos.silberman.fr/Other/AgoraCMS/ ) - - - - - -### Responsive design : un site mobile en moins d'une heure, par Raphael Goetter (AlsaCreations) - - - - Raphael Gotter ( [@goetter](https://twitter.com/goetter)), le créateur [d'AlsaCréations](https://www.alsacreations.com/), est complètement incontournable pour tout ce qui touche l'intégration HTML, ou le RWD (Responsive Web Design) dans la communauté francophone, nous explique les approches à avoir pour réaliser un site RWD. - Notamment que le Mobile First, paraît toujours être la bonne approche, ainsi qu'un rappel sur le fait que le RWD doit être pensé et prévu en amont. - - Raphael nous démontre aussi que son titre, et la réalisation d'un site RWD en moins d'une heure est infaisable. En prenant l'exemple du site d'[Agora CMS](https://www.agoracms.com/), et en nous présentant l'approche pour transformer sa HP en Responsive. - Plus de 15 jours de boulot au final, et des slides très intéressantes découvrir ci-dessous, remplies d'astuces, de checklists, et autres notions à bien comprendre avant de s'intéresser et de se lancer dans le RWD : - -- Comprendre les surfaces d'affichage -- Connaître les Media Queries css 3 -- le Box-sizing -- Halte aux débordements - -Je vous invite à tester sur un mobile [Mobitest.me](https://mobitest.me/) pour bien comprendre la différence entre viewport, largeur en pixel réelle, ... - - Présentation de la propriété hyphens aussi pour [gérer les débordements de texte](https://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html), coupler avec la propriété word-wrap, le framework / css de base [Knacss.com](https://www.knacss.com/), les tailles de typo en "rem". - - Bref, conférence très riche, drôle et a creuser impérativement pour tout ceux qui travaillent de près ou de loin sur ces problématiques. - - Compte rendu par Raphael lui même : [https://blog.goetter.fr/post/50567713227/conference-un-site-responsive-en-une-heure](https://blog.goetter.fr/post/50567713227/conference-un-site-responsive-en-une-heure) avec le résultat voir ici : [https://kiwi.gg/rg/agora/](https://kiwi.gg/rg/agora/) - -Et les slides ci-dessous : - - - - - - -### 20 minutes: gérer le multi-canal, apps, web, devices, par Arnaud Limbourg (20 minutes) - - - - Arnaud ( [@arnaudlimbourg](https://twitter.com/arnaudlimbourg)) a rapidement expliqué la stratégie mise en place par [20minutes](https://www.20minutes.fr/) pour permettre le multi-support : centralisation des données dans un référentiel accessible via une API permettant aux différents devices de se fournir en données, chacun leur manière. - - Il a ensuite donné quelques conseils afin de fournir une bonne API, en précisant qu’il était très difficile d’en réaliser une bonne : - -- architecture REST en HTTP, -- faibles temps de réponse, -- bon monitoring, -- facilité d’apprentissage et d’utilisation, -- concepts simples, -- documentation. - - - Enfin, Arnaud explique qu’il n’y a pas de solution miracle entre l’internalisation ou l’externalisation des développements (l’app Android a été développée en interne alors que le développement de l’app iOS a été externalisée). - De la même manière, le choix entre le HTML5 et le code natif dépends des besoins et des ressources. - - - -![(Source: https://photos.silberman.fr/Other/AgoraCMS/ )](/images/posts/imgob/0-00-30-83-201305-ob_f74390dd1ee07f7ac9c4aa0620f965d7_mg-3568-l-jpg.jpeg) - -(Source: https://photos.silberman.fr/Other/AgoraCMS/ ) - - - - - -### Retour d'expérience : France Télévisions, par Léo Poiroux (France Télévisions) - - - - - Nos confrères de chez France Télévisions nous présentent leur retour d'expérience sur leurs usines site, avec au micro, Léo ( [@Leo_Px](https://twitter.com/Leo_Px)). - - Au départ, sur [Spip](https://www.spip.net/), il nous explique pourquoi ils ont migré (douloureusement au début) sur Drupal, et qu'est ce que cela leur a apporté. - - Une conférence très transparente, drôle, agréable et intéressante. - - L'avenir de leur côté tend vers une transformation de l'usine à site, vers une "usine à interface" notamment pour gérer les multi-écrans, et une ouverture de leurs api/services vers de l'openApi, OpenData. - - FT c'est une très grosse DT (une centaine de personnes), une équipe d'expert transverse surnommée SWAT (composée d'Expert frontend JS/WebPerf, Expert Archi/Varnish, Expert Drupal, et de deux Coach Agile). - - - D'autres excellentes idées comme leurs Dojo et Safari. - Les Dojo sont des sessions d'une heure où les développeurs se relaient toutes les 5 minutes sur un même code, pour avancer un développement.. - Les safaris sont une sorte de "Vis ma vie" avec une journée en immersion dans une autre équipe de développement par exemple ou dans une équipe de journaliste utilisant l'un des sites qu'ils ont développés. - - - -> Pourquoi Drupal ? -> "La maison blanche utilise Drupal" - - -![(Source: https://photos.silberman.fr/Other/AgoraCMS/ )](/images/posts/imgob/0-00-30-83-201305-ob_4a860b2111e11618bc90d3785cadf611_mg-3560-l-jpg.jpeg) - -(Source: https://photos.silberman.fr/Other/AgoraCMS/ ) - - - - - -### Table Ronde. Quel modèle choisir : créer mon propre CMS ? utiliser un CMS existant ? OpenSource / propriétaire ? - - - - La journée se termine sur une table ronde composée de différents responsables techniques : - -- Olivier Grange Labat – [@ogrange](https://twitter.com/ogrange) DT @ Le Monde interactif : Olivier est en charge de la technique de Lemonde.fr. Il a fait le choix de développer son propre outil de gestion de contenu -- Damien Cirotteau – [@cirotix](https://twitter.com/cirotix) : Damien est CTO chez Rue89 qui utilise et est spécialisé en Drupal. -- [Olivier Fouqueau](https://fr.linkedin.com/pub/olivier-fouqueau/38/132/575) – DSI de la mairie d’Aulnay-sous-bois : Olivier est en charge des Systèmes d’informations et de l’innovation la Mairie d’Aulnay-sous-bois. Il fait le choix du CMS Ametys. -- Galdric Pons – [@hebiflux](https://twitter.com/hebiflux) Chef de projet digital @ BNP Paribas : Galdric est Chef de projet digital au pôle innovation de BNP Paribas ou il a mis en place une usine site avec WordPress. - - - - Chacun des participants au cours d'une interview animée par Cyril Pierre de Geyer ( [@cyrilpdg](https://twitter.com/cyrilpdg)) , va expliquer son choix de CMS, les avantages et les inconvénients et donner de précieux conseils aux personnes dans la même situation. - - - -![(Source: https://photos.silberman.fr/Other/AgoraCMS/ )](/images/posts/imgob/0-00-30-83-201305-ob_0c75212e8935dc261453146f39d2000c_mg-3572-l-jpg.jpeg) -(Source: https://photos.silberman.fr/Other/AgoraCMS/ ) - - - - -### Conclusion - - - - Une journée haute en couleur, avec de très bonnes conférences et des retours d'XP toujours aussi intéressants. - On salue une organisation impeccable et le tout pour un prix très accessible (20€). - -Ce CR ne rend-compte finalement que d'une mince partie des conférences (4 conférences en parallèle pour cause), mais vous pouvez retrouver d'autres slides sur le [site officiel de l'évenement](https://www.agoracms.com/). - -N'hésitez pas commenter ce CR si vous avez des remarques ;-) - -P.s: Merci [@nsilberman](https://twitter.com/nsilberman) pour les photos que vous pouvez retrouver en intégralité ici : [https://photos.silberman.fr/Other/AgoraCMS/](https://photos.silberman.fr/Other/AgoraCMS/) diff --git a/_posts/2013-05-22-redis-on-fire.md b/_posts/2013-05-22-redis-on-fire.md deleted file mode 100644 index edcfdcdc3..000000000 --- a/_posts/2013-05-22-redis-on-fire.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -layout: post -title: "Redis on fire !" -description: "" -author: o_mansour -tags: [redis,nosql,lft,video] -permalink: redis-on-fire ---- - -On continue la [diffusion de quelques LFT](/tags/#lft) triés sur le volet. - -Cette fois ci c'est [Kenny Dits](https://twitter.com/kenny_dee) qui s'y colle avec une présentation de Redis et des cas d'utilisation de cette technologie. - -Malheureusement, la vidéo n'est plus disponible... diff --git a/_posts/2013-05-24-m6web-dev-facts-3.md b/_posts/2013-05-24-m6web-dev-facts-3.md deleted file mode 100644 index cf9ac8df6..000000000 --- a/_posts/2013-05-24-m6web-dev-facts-3.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -layout: post -title: "M6Web Dev Facts #3" -description: "" -author: o_mansour -category: -tags: [devfacts,humour] -image: - feature: posts/devfacts.jpg - credit: Game Of Thrones - creditlink: -comments: true -permalink: m6web-dev-facts-3 ---- - -Episode 3 des [devfacts](/tags/#devfacts) ! Parce qu'on ne s'en lasse pas. - - -# Fort Boyaux - -> Cassandra tête de tigre ! - - -# la dev même en prod - -> C'est un environnement de dev même en prod ! - - -# PCF - -> - J'adore le prénom de Staline ! -> - Sylvester ? - - - -# glory and consequences - -> OH PUTAIN j'ai été RT par un participant de la belle & ses princes ! : jour de gloire : - -# l'optimiste - -> C'est moins pire que rien - -# le blagueur - -> T'as trois poussins sur une table ; comment tu fais pour en avoir plus que deux ? ... T'en pousses un. - - -# I can haz root access ! - -> - Tu peux me donner les accès MySQL ? -> - Ils sont en root. -> - Et ils arrivent quand ? - -# le jimmy cliff - -> I can see clearly now, the regex's gone. - -# la honte - -> - j'ai un peu honte de ce que je fais là ... -> - quoi tu fais du javascript ? - -# l'aveuglement - -> Tu peux être valide w3c, l'aveugle, il verra toujours rien ! - - -# le choix dans la date - -> Date de sortie (jj/dd/yyyy) diff --git a/_posts/2013-05-30-firewall-applicatif-php-et-bundle-symfony.md b/_posts/2013-05-30-firewall-applicatif-php-et-bundle-symfony.md deleted file mode 100644 index 7957f1a64..000000000 --- a/_posts/2013-05-30-firewall-applicatif-php-et-bundle-symfony.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -layout: post -title: "Firewall applicatif PHP et bundle Symfony" -description: "" -author: team_cytron -category: -tags: [outil, php, symfony, open-source] -feature-img: "images/posts/cytron/football.png" -thumbnail: "images/posts/cytron/football.png" -comments: true -permalink: firewall-applicatif-php-et-bundle-symfony ---- - -Nous publions aujourd'hui notre firewall applicatif sur notre [compte GitHub](https://github.com/BedrockStreaming). Il se compose : - -- d'un [composant PHP](https://github.com/BedrockStreaming/Firewall) (5.4+) gérant les IPs (V4 et V6), plages, wildcards, white/black lists, etc. -- d'un [bundle Symfony](https://github.com/BedrockStreaming/FirewallBundle) permettant d'utiliser le composant [Firewall](https://github.com/BedrockStreaming/Firewall) dans les controllers à l'aide des annotations et de retourner une réponse HTTP personnalisée. - -Ils utilisent tous les deux [Composer](https://getcomposer.org/) et sont [disponibles sur Packagist](https://packagist.org/packages/m6web/). - -#### Qu’est ce qu’un Firewall applicatif ? - -Un Firewall applicatif permet de restreindre l’accès de certaines IPs à certaines parties d'une application. Vous pouvez par exemple définir la liste des IPs autorisées dans la section d’administration ou au contraire celles que vous souhaitez bloquer dans un forum. - -#### Pourquoi cette implémentation ? - -Nous souhaitions éviter de redéfinir l’ensemble des IPs chaque point de restriction. Nous avons donc cherché centraliser la configuration. Le [FirewallBundle](https://github.com/BedrockStreaming/FirewallBundle) permet de mettre en place des listes hiérarchisées ainsi que des configurations prédéfinies que nous pouvons réutiliser et adapter chaque besoin. - -#### Comment contribuer ? - -Si notre firewall applicatif répond certaines de vos problématiques, mais que vous souhaitez le voir évoluer, n'hésitez pas participer son développement : - -- forkez les projets sur [GitHub](https://github.com/BedrockStreaming/), -- faites une branche par fonctionnalité, -- proposez-nous vos évolutions et optimisations via les [Pull Requests](https://github.com/blog/712-pull-requests-2-0). - -Vous pouvez également nous remonter les problèmes rencontrés lors de son utilisation dans les [issues du composant](https://github.com/BedrockStreaming/Firewall/issues) ou les [issues du bundle](https://github.com/BedrockStreaming/FirewallBundle/issues). - -Enfin, n'hésitez pas utiliser les commentaires de cet article pour nous faire part de vos réactions. diff --git a/_posts/2013-06-14-m6web-dev-facts-4.md b/_posts/2013-06-14-m6web-dev-facts-4.md deleted file mode 100644 index 404203788..000000000 --- a/_posts/2013-06-14-m6web-dev-facts-4.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: post -title: "M6Web Dev Facts #4" -description: "" -author: bedrock -category: -tags: [devfacts,humour] -comments: true -permalink: m6web-dev-facts-4 ---- - -Parceque c'est dredi et que ca nous fait toujours rire de partager les phrases chocs entendues dans nos bureaux, voici les Dev Facts #4. - - -# Captain Obvious - -> - "Vous avez oubliez quelque chose ?" -> - "Le problème, c'est que quand t'oublie, t'y penses pas" - - -# La minute de 30 secondes - -> Si je gagne cette somme, je me prends 6 mois d'année sabatique - - -# $i++ - -> Avec un ticket resto, tu peux manger 2, avec toute ta famille - -# ??? - -> On t'a pas sonné les oreillettes - - -# la mémoire - -> La musique est mémorable, mais je m'en souviens plus - -# Anonymous Proxy Land - -> Pour poster en anonyme, il faut être loggué. - - -# Jésus multipliait les pains - -> On va dédupliquer les clics par quatre - -# Absent coupable! - -> "Dès que je ne suis pas là, j'ai toujours tord ... :(" -> "Bein oui! Les innocents ont toujours tord" - - -# Transgiving - -> 1 mec sur 3 qui regardent des pornos sur Internet sont des femmes - - -# Fatal error *never* die - -> PHP : Fatal error: date() [function.date]: Timezone database is corrupt - this should *never* happen! in /**/**/**/error.php on line 105 - - - diff --git a/_posts/2013-06-26-encodage-packaging-drm-tout-sur-la-video.md b/_posts/2013-06-26-encodage-packaging-drm-tout-sur-la-video.md deleted file mode 100644 index d44d63d35..000000000 --- a/_posts/2013-06-26-encodage-packaging-drm-tout-sur-la-video.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -layout: post -title: "Encodage - packaging - DRM - tout sur la vidéo" -description: "" -author: o_noel -tags: [video,codec,drm,lft] -comments: true -permalink: encodage-packaging-drm-tout-sur-la-vidéo ---- - -![Encodage - packaging - DRM - tout sur la vidéo](/images/posts/imgob/0-00-30-83-201306-ob_249f74_1372237975-243eac44ed956db01c71e248156531e7-jpg.jpeg) - -Une nouvelle vidéo de l'année dernière provenant d'un [Last Friday Talk](/tags/#lft). - -Souvent le monde de vidéo est source d'imprécision, cette vidéo met à plat l'ensemble des termes qui sont utilisés dans le domaine : - -- encodage, transcodage -- packaging (transformation du conteneur vidéo) -- DRM - -Malheureusement, la vidéo n'est plus disponible... diff --git a/_posts/2013-06-27-coke-pour-bien-sniffer-son-code.md b/_posts/2013-06-27-coke-pour-bien-sniffer-son-code.md deleted file mode 100644 index f09fa88da..000000000 --- a/_posts/2013-06-27-coke-pour-bien-sniffer-son-code.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: "Coke, pour bien sniffer son code" -description: "" -author: team_cytron -category: -tags: [outil, qualite, php, open-source] -feature-img: "images/posts/cytron/sniff.jpg" -thumbnail: "images/posts/cytron/sniff.jpg" -comments: true -permalink: coke-pour-bien-sniffer-son-code ---- - -Afin d’uniformiser nos développements, nous avons décidé de suivre des conventions de code. Les projets deviennent ainsi plus homogènes et la revue de code, comme la maintenance, s’en trouvent simplifiées. Comme la majorité de nos services sont en PHP, nous utilisons [PHP CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer). - -#### Le manque - -Cependant, l'éventail des frameworks utilisés en interne (Symfony, ZF, homemade) ne nous permet pas d’employer une seule et même convention. De plus, l’organisation des projets est assez hétérogène (ex: les répertoires de test ne se nomment pas tous de la même manière). Nous avions donc besoin de pouvoir configurer spécifiquement PHP CodeSniffer pour chacun de nos projets. - -#### Le deal - -A la manière de [Travis](https://travis-ci.org/), nous avons opté pour la méthode dite “*du fichier .truc posé à la racine de chaque projet*” (tm). Nous avons donc développé [Coke](https://github.com/BedrockStreaming/Coke), un script de sniff, qui lance PHP CodeSniffer avec la configuration contenu dans le fichier “.coke” la racine du projet : - - - -Ainsi, lorsque le fichier est paramétré et que le [script coke](https://raw.github.com/BedrockStreaming/Coke/master/coke) est correctement installé sur le système, il suffit d'exécuter la commande "coke" depuis la racine du projet sniffer. - -#### Le fix - -Dans l’optique d’[automatiser le plus possible](https://zachholman.com/talk/how-to-build-a-github/) nos processus, nous avons inséré la vérification des coding styles à l’aide de [Coke](https://github.com/BedrockStreaming/Coke), dans un [hook git de pre-commit](https://gist.github.com/JJK801/5867810). - -[Coke](https://github.com/BedrockStreaming/Coke) est disponible en [open-source](https://tom.preston-werner.com/2011/11/22/open-source-everything.html) sur [le compte GitHub de M6Web](https://github.com/BedrockStreaming). - -Enjoy ! diff --git a/_posts/2013-07-02-performances-web-disaster-case-applications-mobile-native.md b/_posts/2013-07-02-performances-web-disaster-case-applications-mobile-native.md deleted file mode 100644 index 049e68d11..000000000 --- a/_posts/2013-07-02-performances-web-disaster-case-applications-mobile-native.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -layout: post -title: "Performances web et \"Disaster case\" sur applications mobile native" -description: "" -author: k_dits -category: -tags: [webperf,mobile] -image: - feature: - credit: - creditlink: -comments: true -permalink: performances-web-disaster-case-applications-mobile-native ---- - -La performance Web (ou grossièrement temps de chargement) est devenue aujourd'hui une problématique majeure dans tout développement Web. - -Les outils pour mesurer / comprendre sont plutôt reconnus désormais et arrivent a une certaine maturité. Il y a toutefois encore un créneau plutôt peu documenté (à mon goût) dans le domaine, celui permettant de mesurer les temps de chargement dans des applications mobiles natives (Android / iOs ...) - -Voici un retour des méthodes que nous utilisons pour mesurer les performances (notamment de chargement) de nos applications natives et générer des Waterfall Charts, mais aussi sur la mise en place de tests "disaster case" en cas d'indisponibilité de services utilisés par l'application. - -Pour les besoins de ce tutoriel, nous allons prendre comme configuration, un Mac, avec une application native sur un iPhone 4 (relié au même réseau Wi-Fi que le Mac), ainsi que la version d'essai du logiciel CharlesProxy installé. (Mais la configuration et procédure est la même sur un autre OS, ou un autre mobile, et fonctionne aussi pour tester des webapps ou sites mobiles) - - - - - -### CharlesProxy - -Nous allons donc utiliser le logiciel payant [CharlesProxy](https://www.charlesproxy.com/), qui est un proxy HTTP ou Reverse Proxy permettant de capturer le traffic HTTP de son ordinateur. Il existe une version d'essai sans limite de 30 jours. Il y a peut être des alternatives libres, mais Charles étant plutôt une référence, c'est l'outil que nous utilisons. - -Commencez donc par aller sur le site et installez CharlesProxy. - -Une fois installé, lancez le, il devrait automatiquement commencer à capturer le trafic réseau. - - - - - -### Connexion Wi-Fi et récupération IP - -La deuxième étape consiste à connecter votre Ordinateur et votre Téléphone sur le même réseau Wi-Fi. - - - -Récupérons ensuite notre adresse Ip via les "Préférences Système", section "Internet et sans fil" et icone "Réseau" sur votre configuration Wi-Fi : - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201306-ob_9f332944f7f96d84b86805a14041a546_recup-ip.png) - - - - -### Configuration du proxy sur son iPhone - -Passons ensuite sur le téléphone, dans vos préférences Wi-Fi. - -Cliquez ensuite sur la flèche bleu à droite du nom de la connexion sur le paramétrage Wi-Fi de notre iPhone, et descendre tout en bas du paramétrage pour configurer manuellement notre proxy HTTP : - -Configurez le proxy de cette connexion pour passer par le Proxy Charles, avec l'adresse IP récupérée plus haut, et le port par défaut de Charles 8888. - - - -Une fois la connexion lancée avec le Proxy activé et Charles bien lancé sur votre Mac, une popup d'activation devrait apparaitre : - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201306-ob_5fdf154fbea7025d99bd2e09dcd8e6cb_autorisation-charles.png) - -Aller ensuite sur un site mobile via Safari pour vérifier que le trafic est bien capturé par votre Proxy. - - - - -A ce stade, tout est prêt pour commencer les mesures. - - - - -### Prise de mesure avec Charles - -Pour prendre une mesure avec Charles, allez dans le menu "Proxy", décochez le "MAC OS X Proxy" afin de ne pas parasiter vos mesures, et nettoyez l'écran de Charles pour commencer une "session" propre. - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201306-ob_689b14b9dc97e42b31a007ecfe7343f1_cleaner-charles.png) - -Vous n'avez ensuite plus qu'a lancer une application pour mesurer la liste des requêtes HTTP nécessaire à son démarrage. - -Dans la partie Structure, un clic sur un domaine vous donnera plus d'infos (nombre de requête, et détails de chacune) ... - -Sélectionnez toutes les requêtes, puis cliquez sur "Chart" sur la droite, pour obtenir un premier Waterfall (made in Charles) - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201306-ob_a5ed4b66cceafe170170112a0c5bc5ae_recording-charles-chart.png) - - - -### Génération de Waterfall (plus complet) - -Toujours sous Charles, avec toutes les structures sélectionnées, Fichier / Export puis selectionner le format Http Archive (.har) - -Nous allons ensuite utiliser l'outil harviewer, pour visualiser le waterfall sous une forme plus complète que dans Charles. - -Rendez vous ici (avec Firefox, plutôt que Chrome dont le rendu est buggé sur cet outil) : [https://www.softwareishard.com/har/viewer/](https://www.softwareishard.com/har/viewer/) - -Décochez la case "Validate data before processing?" pour être moins embêté par des problèmes de compatibilité surement liés à l'export de Charles. - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201306-ob_1ca8d35846fcf94af13302079edba29d_harviewer.png) - -Ensuite, faites un Drag & Drop de votre fichier .har dans le textarea de HarViewer pour obtenir votre waterfall, très proche de l'onglet Réseau de Firebug ou Network de la console de Chrome. - -Vous retrouvez donc pour chaque requête tous les élements classique, avec détail des réponses, code HTTP de retour, taille etc, et le tout sur une timeline très précise. - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201306-ob_592bf871e7372f057e87d3bad159ca0d_waterfall-har-viewer.png) - - - -### Throttling - -Pour le moment, nous avons donc testé notre application sur notre connexion Wi-Fi, cas plutôt idéal. Mais comment simuler une connexion 3g par exemple, peut être plus proche de la réalité des utilisateurs de l'applications ? - -Pour cela, il vous suffit d'aller dans Charles, puis le menu "Proxy" et "Throttle Settings". - -La latence par défaut configurée est un peu élevée (600ms), mais vous pouvez la modifier et affiner vos tests pour se rapprocher de conditions plus réelles. - -Ensuite, toujours dans le menu "Proxy", activé l'option "Throttle" et vous pourrez tester sur une connexion différente. - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201306-ob_e2de8973ef740d2832a1e475cc632226_throttling.png) - - - -### Disaster Case ? - -Comment savoir comment se comporte votre application si vos Webservices sont injoignables ? ou si l'un des services tiers que vous utilisez est down ? Comment trouver les [SPOF](https://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html) (Single Point Of Failure) de vos apps ? - -Toujours dans Charles, Allez dans "Tools", puis "Map Remote". - -Ici, vous allez pouvoir rediriger les domaines de vos choix, vers un domaine de type Blackhole. - -C'est à dire que le domaine choisi réagira comme si votre serveur web était dans un état de mort cérébrale ! Pas celui où il rejette la connexion immédiatement (trop facile), celui où il végète sans arriver à acquitter la réponse (le fameux "en attente de https:// ....") - -Pour ce besoin, nous allons utiliser le Blackhole fourni par [Patrick Meenan](https://twitter.com/patmeenan) pour l'outil de mesure de performance web : [WebPageTest](https://www.webpagetest.org) : https://blackhole.webpagetest.org - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201307-ob_f21590aa8b7234c9f7bc596f31f3d6d3_mapremote.png) - -Vous pouvez ensuite jouer avec les domaines, et regarder comment se comporte votre application dans le cas où l'un d'entre eux est inaccessible. - -Sur notre iPhone 4 de test, on remarque d'ailleurs un timeout sur les requêtes de 75 secondes ! Imaginez le cas, où le développement et l'appel à ce service est synchrone ? 75 secondes de loading dans votre application avant de passer aux requêtes suivantes ... - - - -![Performances web et "Disaster case" sur applications mobile native](/images/posts/imgob/0-00-30-83-201307-ob_08a2d492e28867e560b7a8863c328022_spof.png) - -Voilà, vous avez désormais une solution vous permettant de générer des Waterfall Charts pour vos apps natives, et de tester des conditions de mauvaises connexions, ou d'indisponibilité de service. - -Si vous avez d'autres méthodes, plus simples ou plus complètes, ou tout autre remarque sur cette article, n'hésitez pas à le faire dans les commentaires ci-dessous. - -Merci. - -P.s: pour complément, n'hésitez pas à creuser le blogpost de Steve Souders sur les waterfall mobile, qui utilise une méthode très différente avec tcpdump et pcapperf [https://www.stevesouders.com/blog/2013/03/26/mobile-waterfalls/](https://www.stevesouders.com/blog/2013/03/26/mobile-waterfalls/) - - - diff --git a/_posts/2013-07-05-benchmarking-websockets-avec-nodejs.md b/_posts/2013-07-05-benchmarking-websockets-avec-nodejs.md deleted file mode 100644 index 8ac6dc499..000000000 --- a/_posts/2013-07-05-benchmarking-websockets-avec-nodejs.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -layout: post -title: "Benchmarking WebSockets avec NodeJs" -description: "" -author: bedrock -category: -tags: [nodejs,websockets,benchmark,open-source] -image: - feature: - credit: - creditlink: -comments: true -permalink: benchmarking-websockets-avec-nodejs ---- - -Nous avons récemment eu à repenser une application [Node.js](https://nodejs.org) de timeline temps réel, basée sur les [WebSockets](https://fr.wikipedia.org/wiki/Websocket) afin de tenir une charge plus élevée. - - -L'application timeline ----------------------- - - -Fonctionnellement, l'application timeline est relativement simple: elle consiste à afficher un flux de message publiés par des contributeurs en temps réel pour les internautes présent sur la page. Pour cela l'application se base sur [socket.io](https://socket.io/) pour la partie websocket, et supporte à peu près 15 000 connexions simultanées. - - -Afin d'augmenter la capacité de l'application, nous avons décidé de la rendre scalable horizontalement. C'est dire, répartir la charge sur un nombre X de serveurs communiquant entre eux, par exemple, par le biais de Redis. - - -![Benchmarking WebSockets avec NodeJs](/images/posts/imgob/0-00-30-83-201306-ob_f7b929d0a6fe57963aa5f28c2d48a291_test.png) - -Pour cela socket.io propose un store redis qui permet aux différentes instances de communiquer entre elles. Malheureusement les performances de ce store sont plutôt désastreuses car le store que propose socket.io est beaucoup trop verbeux et écrit absolument tous les évènements que reçoit un serveur sur un seul channel redis. L'application devenait inutilisable autour de 8 000 connexions. Il était donc inenvisageable de l'utiliser en production. - - -Nous avons donc décidé rapidement de passer une autre solution que socket.io. Après pas mal de recherche nous avons fait notre choix sur [Faye](https://faye.jcoglan.com/), une implémentation du protocole de Bayeux, bien documenté et proposant aussi d'utiliser redis comme "store". Après test, cette solution s'est révélée bien plus performante que socket.io. - - - -Tests de charge ---------------- - - -Une des problématiques rapidement rencontrée sur ce projet a été de tester la charge de notre application: comment simuler 15 000 connexions simultanées ? - -En faisant le tour des solutions de benchmark de websocket ([thor](https://github.com/observing/thor), ...) ,nous n'avons pas trouvé la solution qui nous permettait de faire les tests que nous souhaitions. [Siege](https://www.joedog.org/siege-home/), [ab](https://httpd.apache.org/docs/2.2/programs/ab.html) ne le propose pas encore,[Gatling](https://gatling-tool.org/), [Jmeter](https://jmeter.apache.org/), [Tsung](https://tsung.erlang-projects.org/) ont des plugins web-socket mais l'utilisation et le reporting ne sont pas des plus clair. - -La solution ? - - -Websocket-bench ---------------- - - -Nous avons donc décidé de développer notre propre outil de benchmark de websocket ([Socket.io](https://socket.io/) ou [Faye](https://faye.jcoglan.com/)), au nom très original : [websocket-bench](https://github.com/BedrockStreaming/websocket-bench). - -Cet outil se base sur les clients Node que proposent [Faye](https://faye.jcoglan.com/) et [Socket.io](https://socket.io/). Il peut être facilement étendu à l'aide de "generator" (module Node), afin de rajouter la logique de votre application. Par exemple dans le cas de notre application, en se connectant, un client doit envoyer un message au serveur pour valider la connexion. - - -Ci dessous un exemple de générateur qu'on a pu utiliser lors de nos tests de charge. - - - - - -Cet outil, lancé sur des instances Amazon, nous a permis d’exécuter nos tests de charge. - - -Un exemple : la commande ci dessous va lancer 25 000 connexions, à raison de 1000 connexions par seconde en utilisant le generateur "generator.js" : - - - - -![Nombre de clients connectés sur Graphite](/images/posts/imgob/0-00-30-83-201306-ob_d08f10f02fad26d77fa14e6d966584c2_testcharge.png) - -Nombre de clients connectés sur Graphite - - -Au delà de 25 000 connexions, l'instance Amazon (large) qui lançait les tests ne tenait plus. Une solution pour tester un nombre plus élevés de connexions serait d'utiliser plusieurs machine de tests, peut être à l'aide de [bees with machin guns](https://github.com/newsapps/beeswithmachineguns) et ainsi d'utiliser plusieurs instances pour lancer les tirs de charge. - - - -##### **Bonnes pratique de test de charge** - -Lors de votre test de charge (et pour la prod), n'oubliez pas d'augmenter le nombre maximal de descripteurs de fichiers coté client ET coté injecteur (ulimit -n 256000 par exemple dans la conf de supervisor, et dans le terminal avant de lancer le benchmark). - -Surveillez votre [conntrack](https://conntrack-tools.netfilter.org/) (si firewall iptables), augmentez votre plage locale de port, et si vous êtes amenés à tester plus de 25K connexions, utilisez plusieurs machines et/ou plusieurs IP sources différentes. - - - -##### Comment contribuer au projet ? - -N’hésitez pas à remonter d’éventuels bug via les issues ou à contribuer au projet l'aide de pull request github ([https://github.com/BedrockStreaming/websocket-bench](https://github.com/BedrockStreaming/websocket-bench)) - - - diff --git a/_posts/2013-07-12-m6web-dev-facts-5.md b/_posts/2013-07-12-m6web-dev-facts-5.md deleted file mode 100644 index 83172ef55..000000000 --- a/_posts/2013-07-12-m6web-dev-facts-5.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -layout: post -title: "M6Web Dev Facts #5" -description: "" -author: bedrock -category: -tags: [devfacts, humour] -image: - feature: posts/devfacts.jpg - credit: Game Of Thrones - creditlink: -comments: true -permalink: m6web-dev-facts-5 ---- - -On est dredi, et on a encore pas mal de phrases chocs de nos développeurs, entendues dans nos locaux partager. - -En voici une nouvelle sélection avec les Dev Facts #5 - - -# Faille de sécu ? - -> C'est un peu complexe, c'est une back-office front ! - - -# La boucle est bouclée - -> Il finit là où il s'est arrêté - - -# Envoi impossible - -> Mais tu n'étais pas en pièce jointe ! - - -# C'est l'histoire d'une fille - -> C'est un peu comme "Un gars, une fille" mais sans le gars - - - -# La minute de 30 secondes - -> J'ai pris une année sabatique de 6 mois. - - -# L'année des deux mains - -> Ca dépend si c'est une année ambidextre ! - - - -# Les dents de la neige - -> - Vous avez entendu, une championne de snowboard est morte. -> - Elle s'est faite manger par un requin ? - - - -# Le vrai du faux - -> Ils ont trouvé une faille infaillible - - - -# Le roi de la combine - -> - En France, un truc comme ca, t'en as pour 280 euros ! -> - Et tu l'as eu a combien ? -> - 280 euros. - - - -A bientôt pour un prochain épisode - - - diff --git a/_posts/2013-07-15-lache-moi-la-branch.md b/_posts/2013-07-15-lache-moi-la-branch.md deleted file mode 100644 index f3ae502d1..000000000 --- a/_posts/2013-07-15-lache-moi-la-branch.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -layout: post -title: "Lâche moi la branch !" -description: "" -author: team_cytron -category: -tags: [qualite, jenkins, github] -feature-img: "images/posts/cytron/branche.png" -thumbnail: "images/posts/cytron/branche.png" -comments: true -permalink: lache-moi-la-branch ---- - -#### Test continu des Pull Requests - -Maintenant que nous [utilisons GitHub Enterprise](https://twitter.com/kenny_dee/status/352003224506605569) chez M6Web, nous avons la joie de pouvoir utiliser les Pull Requests de façon abusive. Mais leur puissance n'est maximale que lorsqu'elles peuvent être [testées individuellement](https://github.com/blog/1227-commit-status-api) avant d'être mergées sur le *master*. - -![Lâche moi la branch !](/images/posts/imgob/0-00-30-83-201307-ob_b6e0b1_capture-d-e-cran-2013-07-12-a-15-03-58.png) - -Pour ce faire, nous avons utilisé le plugin [GitHub Pull Request Builder](https://wiki.jenkins-ci.org/display/JENKINS/GitHub+pull+request+builder+plugin) de [Jenkins](https://jenkins-ci.org/), qui après une [configuration assez simple](https://buddylindsey.com/jenkins-and-github-pull-requests/), nous a permis de créer un job qui lance automatiquement un build lorsqu'une Pull Request est modifiée. Ce build se positionne sur la branch pointée par la Pull Request et exécute les tests. - - -![Lâche moi la branch !](/images/posts/imgob/0-00-30-83-201307-ob_e753d81cd5875809e61c474bcc6b8609_liste-des-builds.png) - -Il est donc nécessaire de créer un job dédié au test des Pull Requests pour chaque projet dont nous souhaitons voir les Pull Request automatiquement testées. Ça peut paraître évident, mais lorsqu'on a plus de 200 repositories, c'est tout de suite moins trivial. - - -#### Configuration du plugin - -Le fonctionnement par défaut du plugin GitHub Pull Request Builder est assez restrictif. Il nécessite qu'un contributeur ajoute un commentaire sur la Pull Request en demandant un test puis qu'un admin (parmi une liste à configurer) réponde avec un deuxième commentaire acceptant de lancer les tests (le tout avec des phrases types configurables). C'est uniquement ensuite que Jenkins lancera un build. - -Or dans notre contexte d'entreprise, nous souhaitons que l'automatisation soit totale, comme dans [Travis](https://travis-ci.org/) : chaque modification d'une Pull Request lance l'ensemble des tests. Pour arriver ce fonctionnement, il suffit de cocher "*Build every pull request automatically without asking (Dangerous!)*" dans la section "*Avancée*" des options de lancement de build par "*Github pull requests builder*". - - -#### Test continu du master - -Nous essayons tant que possible de suivre le [workflow de déploiement de GitHub](https://github.com/blog/1557-github-flow-in-the-browser) : on développe une fonctionnalité par branch, on fait une Pull Request sur le *master* et on ne merge que lorsque tout le monde est d'accord et que les tests sont passés. Cela nous permet de garder le *master* toujours déployable. - -Nous avons donc, pour chaque projet, un second job qui lance l'ensemble des tests lors de chaque modification du *master*. Cela n'arrive normalement que lors du merge des nouvelles fonctionnalités contenues dans les Pull Requests, qui ont déjà été individuellement testées. Nous sommes donc sereins sur l'intégration croisée de toutes les nouvelles fonctionnalités sur le *master*. - - -#### Déploiement - -Avant de déployer à l'aide de [Capistrano](https://www.capistranorb.com/), nous vérifions que les tests passent (résultat de l'intégration continue + lancement manuel des tests). Le manque d'automatisation concernant ces mises en production fait apparaitre une faille assez large. Pour la résorber, nous pourrions par exemple accepter le déploiement d'un service, uniquement si ses tests sont passés et si aucun autre n'est en cours ou en attente. Même si cela ajoute une dépendance aux serveurs d'intégration continue, cela sécurise les déploiements. diff --git a/_posts/2013-07-19-introduction-a-drupal-par-claire-roubey-clever-age.md b/_posts/2013-07-19-introduction-a-drupal-par-claire-roubey-clever-age.md deleted file mode 100644 index 86dd92003..000000000 --- a/_posts/2013-07-19-introduction-a-drupal-par-claire-roubey-clever-age.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: post -title: "Introduction à Drupal par Claire Roubey (Clever Age)" -description: "" -author: o_mansour -category: -tags: [lft,drupal,video] -image: - feature: - credit: - creditlink: -comments: true -permalink: introduction-à-drupal-par-claire-roubey-clever-age ---- - -Drupal, le CMS très très connu mais que nous on connait pas ! A notre demande [Clever Age](https://fr.clever-age.com/societe/agences/lyon/), par l'intermédiaire de [Claire Roubey](https://twitter.com/kalis1), est venue nous présenter cet outil lors d'un de nos fameux [Last Friday Talk](/tags/#lft). - -Malheureusement, la vidéo est coupée à environ la moitié de sa durée (fort dommage car les questions étaient très intéressantes). Les slides sont toutefois disponibles : [https://fr.slideshare.net/claire_/drupal-m6-web310513](https://fr.slideshare.net/claire_/drupal-m6-web310513). - -Un énorme merci Clever Age et Claire ! - -Malheureusement, la vidéo n'est plus disponible... diff --git a/_posts/2013-08-12-introduction-qualite-logicielle-avec-node-js.md b/_posts/2013-08-12-introduction-qualite-logicielle-avec-node-js.md deleted file mode 100644 index ac4b2b81b..000000000 --- a/_posts/2013-08-12-introduction-qualite-logicielle-avec-node-js.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -layout: post -title: "Introduction à la qualité logicielle avec Node.js" -description: "" -author: bedrock -category: -tags: [nodejs,javascript,qualite] -image: - feature: - credit: - creditlink: -comments: true -permalink: introduction-qualite-logicielle-avec-node-js ---- - -![(Source : https://www.flickr.com/photos/dieselbug2007/414348333/)](/images/posts/imgob/0-00-30-83-201307-ob_0f27a1_414348333-b72ff906de-b-jpg.jpeg) - -(Source : https://www.flickr.com/photos/dieselbug2007/414348333/) - - -Chez M6Web, nous avons récemment réecrit un de nos projets [Node.js](https://nodejs.org/). -Le monde Node.js évolue très rapidement et a fait d'énorme progrès dans le domaine de la qualité logicielle. -Nous avons donc decidé de monter en qualité sur nos projets Node.js en utilisant les derniers outils proposés par la communauté. - - -Pour cela, nous mesurons maintenant différentes métriques sur nos projets Node: - -- la qualité du code (checkstyle) -- des tests unitaires et fonctionnels - -et tout ceci est lancé par notre serveur d'intégration continue: [Jenkins](https://jenkins-ci.org/). - - - -#### Tests unitaires - -Pour tout ce qui est "tests", nous avons choisi le très bon duo : - -- [Mocha](https://visionmedia.github.io/mocha/) -- [Chai](https://chaijs.com/) - - - -![Introduction à la qualité logicielle avec Node.js](/images/posts/imgob/0-00-30-83-201307-ob_d472509f78a8e21ad02b2e74ec9f03a0_15f75683-mocha-logo-png.png) - -[Mocha](https://visionmedia.github.io/mocha/) c'est un "test-runner" javascript qui fonctionne aussi bien sur Node que dans un navigateur web. Plus simplement mocha est l'outil qui va contenir nos tests: il va exécuter les tests et afficher les résultats. - - - -![Introduction à la qualité logicielle avec Node.js](/images/posts/imgob/0-00-30-83-201307-ob_99cf18_636ffadd667e8f9abe354403692aeb73.png) - -[Chai](https://chaijs.com/) est une librairie d'assertion assez complète, permettant plusieurs syntaxe : - -- assert.equal(foo, 'raoul'); -- foo.should.equal('raoul'); -- expect(foo).to.equal('bar'); - -Ces deux outils fonctionnent aussi bien pour tester vos javascripts Node que front. - - - -Ce duo permet une écriture de test simple et très lisible, dont voici un exemple : - - - - -#### Tests fonctionnels - -Pour les tests fonctionnels, nous avons choisi d'utiliser [Supertest](https://github.com/visionmedia/supertest), un package Node.js qui permet de simplifier l'écriture de requête HTTP (*une surcouche au package http disponible dans Node.js)*. - -Ci-dessous, un exemple de tests fonctionnels : - - - - - -#### Checkstyle - -En javascript, on peut aussi écrire du code propre et respecter des conventions de codage. - Afin de vérifier que notre code respecte les standards en vigueur, nous utilisons [JsHint](https://www.jshint.com/). - - - -#### Intégration continue - -Toutes ces métriques sont récoltées grâce à [Jenkins-CI](https://jenkins-ci.org/) à l'aide du fichier Ant suivant : - - - - - -![Le résultat de l'intégration continue dans jenkins.](/images/posts/imgob/0-00-30-83-201306-ob_56a4f738660c069741e43ca3dad5a7d7_jenkins.png) - -Le résultat de l'intégration continue dans jenkins. - - - - -#### Conclusion - -Node.js propose des outils très performants pour la qualité logicielle, et écrire des tests avec le duo "Mocha + Chai" devient vite quelque chose de simple. Et même les développeurs les plus réfractaires aux tests devraient apprécier. - -N’hésitez pas à commenter cet article et à indiquez la solution que vous utilisez pour vos projets Node. - - - diff --git a/_posts/2013-08-13-vigo-le-fleau-des-carpates-la-tristesse-de-moldavie.md b/_posts/2013-08-13-vigo-le-fleau-des-carpates-la-tristesse-de-moldavie.md deleted file mode 100644 index c8d38b204..000000000 --- a/_posts/2013-08-13-vigo-le-fleau-des-carpates-la-tristesse-de-moldavie.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: post -title: "Vigo, le fléau des Carpates" -description: "" -author: team_cytron -category: -tags: [outil, qualite, javascript, tests fonctionnels] -feature-img: "images/posts/cytron/vigo.jpg" -thumbnail: "images/posts/cytron/vigo.jpg" -comments: true -permalink: vigo-le-fleau-des-carpates-la-tristesse-de-moldavie ---- - -[CasperJS](https://casperjs.org/) permet d’écrire des scripts javascript qui vont automatiser des tests fonctionnels de pages web. Il exécute ces tests dans une instance de [PhantomJS](https://phantomjs.org/) qui est un navigateur scriptable et sans interface graphique ("Headless" dit-on dans le milieu). - -Afin de mieux structurer nos tests, de faciliter leur écriture et de pouvoir les lancer avec une commande unique, nous avons créé [VigoJS](https://github.com/BedrockStreaming/VigoJS), une surcouche pour [CasperJS](https://casperjs.org/). - -#### Fonctionnalités - -Toutes les fonctionnalités de base de [CasperJS](https://casperjs.org/) sont accessibles. Nous y avons simplement ajouté un mécanisme de configuration contenant plusieurs paramètres de base dont l’URL de test par défaut, l’authentification HTTP éventuelle ou encore la taille de l’écran virtuel. Il est également possible de spécifier des environnements (dev, preprod, prod...) pour différencier les comportements de certains tests. Ainsi, en fonction de l’environnement demandé dans la ligne de commande, les tests peuvent être joués sur des URL différentes avec la bonne authentification HTTP. - -Quelques fonctions utilitaires sont aussi disponibles pour réaliser rapidement certaines vérifications récurrentes et ainsi faciliter le développement des tests. On peut, par exemple, rechercher aisément la présence d’erreurs ou warnings PHP dans une page. Il est aussi possible de faire un *retry* lorsqu'un test a échoué afin d'être certain que ce n'est pas une erreur du type "MySql server has gone away" qui peut se produire de temps en temps sur les serveurs de tests. Par ailleurs, quand un test échoue, [VigoJS](https://github.com/BedrockStreaming/VigoJS) exporte une capture d’écran qui s'avère très pratique pour comprendre ce qu’il s’est passé ! - -Tous les paramètres ajoutés à la ligne de commande et dans la configuration sont injectés et accessibles dans la classe de test. On garde, de cette manière, une certaine flexibilité. Cela peut permettre, par exemple, de découper les tests avec de la pagination : - - - - - -#### Affichage dans le terminal - -Nous avons aussi amélioré l’affichage des résultats des tests. Il est ainsi possible de préciser pour chaque test : un titre et une description personnalisés afin de rendre les comptes-rendus plus compréhensible pour les utilisateurs. De même des commentaires utilisateurs peuvent être ajoutés plus simplement dans le déroulement des tests. - -![Affichage dans le terminal](/images/posts/imgob/0-00-30-83-201308-ob_a1e6705b03efdc2518ba5e18c284550a_vigo-console-5.png) - -#### Intégration continue - -[CasperJS](https://casperjs.org/) génère nativement des rapports xUnit. [VigoJS](https://github.com/BedrockStreaming/VigoJS) intègre donc cette fonctionnalité pour être utilisé sur une plateforme d’intégration continue comme [Jenkins](https://jenkins-ci.org/). Il est aussi possible de modifier le paramètre *classPath* dans le fichier xUnit pour améliorer la lisibilité des résultats : - -![Affichage des résultats des tests dans Jenkins](/images/posts/imgob/0-00-30-83-201308-ob_5138f3_capture-d-e-cran-2013-08-01-a-15-57-02.png) - -Le chemin dans lequel est généré le rapport est configurable par l’option *--buildPath* (ou dans la configuration) : - - - - -Il suffit ensuite de configurer le job Jenkins pour qu'il récupère le rapport de test dans ce dossier. Sans oublier de [faire un job pour tester les Pull Requests](/lache-moi-la-branch) de votre projet. - -[VigoJS](https://github.com/BedrockStreaming/VigoJS) est disponible en [open-source](https://tom.preston-werner.com/2011/11/22/open-source-everything.html) sur [le compte GitHub de M6Web](https://github.com/BedrockStreaming). - -Enjoy ! diff --git a/_posts/2013-10-08-le-nosql-focus-sur-mongodb-par-cedric-derue-altran.md b/_posts/2013-10-08-le-nosql-focus-sur-mongodb-par-cedric-derue-altran.md deleted file mode 100644 index 617a50d1e..000000000 --- a/_posts/2013-10-08-le-nosql-focus-sur-mongodb-par-cedric-derue-altran.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: post -title: "Le NoSQL, Focus sur MongoDB par Cédric Derue (Altran)" -description: "" -author: bedrock -category: -tags: [lft,nosql,mongodb,video] -image: - feature: - credit: - creditlink: -comments: true -permalink: le-nosql-focus-sur-mongodb-par-cedric-derue-altran ---- - -Porte-étandard des bases de données NoSQL de type document, MongoDB nous a été présenté cet été par Cédric Derue ([@cderue](https://twitter.com/cderue)) , de la société Altran, lors de [nos conférences internes](/organiser-des-conferences-technique-en-interne). - -Dans cette présentation d'environ une heure, il aborde un tour d'horizon des différentes catégories de bases de données NoSQL, pour s'attacher ensuite sur un focus assez complet de MongoDB, agrémenté de quelques démonstrations. - -Merci à Altran et Cédric pour le partage de cette présentation. - -Vous pouvez aussi retrouver d'autres sessions de nos Last Friday Talk : - -- [Introduction Drupal par Claire Roubey (Clever Age)](/introduction-%C3%A0-drupal-par-claire-roubey-clever-age) -- [Redis on Fire](/redis-on-fire) -- [La POO Canada Dry](/la-poo-canada-dry) - -Malheureusement, la vidéo n'est plus disponible... diff --git a/_posts/2013-10-09-distribuez-votre-video-partout-avec-3-euros-en-poche-et-devenez-millionaire-ou-presque.md b/_posts/2013-10-09-distribuez-votre-video-partout-avec-3-euros-en-poche-et-devenez-millionaire-ou-presque.md deleted file mode 100644 index e700c322a..000000000 --- a/_posts/2013-10-09-distribuez-votre-video-partout-avec-3-euros-en-poche-et-devenez-millionaire-ou-presque.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: video -title: "Distribuez votre vidéo partout avec 3 euros en poche et devenez millionaire. Ou presque." -description: "" -author: o_mansour -category: -tags: [lft,video] -image: - feature: - credit: - creditlink: -comments: true -youtubeId: uGTF44yjoPg -permalink: 2013/10/distribuez-votre-video-partout-avec-3-euros-en-poche-et-devenez-millionaire-ou-presque.html ---- - -"Comment gagner des millions, sans sortir de chez vous, en robe de chambre, en distribuant des vidéos de chats sur les internets, grâce à ffmeg, h264, dash, tous pleins de buzz word, justin bieber" (Merci ! Toute l'équipe SEO). - -Une présentation de Ludovic Bostral, notre ex valeureux responsable R&D en charge - jusqu'il y a peu de temps - de la fabrication de toutes nos vidéos et du SI associé. - -Si vous vous posez des questions ce sujet, n'hésitez pas à venir lui [faire un petit coucou virtuel, ou sur Nantes](https://digibos.com/). Ca marche aussi pour discuter zombie ou nanar. Ou mieux, un nanar avec des zombies ! - -Retrouvez Ludovic sur son site : [https://digibos.com](https://digibos.com/). - - - diff --git a/_posts/2013-10-14-tester-fonctionnellement-une-api-rest-symfony-doctrine-atoum.md b/_posts/2013-10-14-tester-fonctionnellement-une-api-rest-symfony-doctrine-atoum.md deleted file mode 100644 index 3af8c4a78..000000000 --- a/_posts/2013-10-14-tester-fonctionnellement-une-api-rest-symfony-doctrine-atoum.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -layout: post -title: "Tester fonctionnellement une API REST" -description: "" -author: team_cytron -category: -tags: [qualite, symfony, atoum, tests fonctionnels] -feature-img: "images/posts/cytron/husky.png" -thumbnail: "images/posts/cytron/husky.png" -comments: true -permalink: 2013/10/tester-fonctionnellement-une-api-rest-symfony-doctrine-atoum ---- - -Un des enjeux des tests fonctionnels est de pouvoir être joués dans un environnement complètement indépendant, dissocié de l'environnement de production, afin de ne pas être tributaires de données versatiles qui pourraient impacter leur résultat. Il faut, cependant, que cet environnement soit techniquement similaire à celui de production pour que les tests aient une réelle validité fonctionnelle. - -Avec la Team Cytron, nous sommes tombés face à cette problématique lorsque nous avons voulu tester fonctionnellement un service agnostique de contenu mettant à disposition une API REST et utilisant [Symfony2](https://symfony.com/), MySQL, Doctrine et [atoum](https://www.atoum.org). - - -#### Monter un serveur de données dédié aux tests - -Dans le cas d’une application utilisant MySQL, on pense alors monter un serveur applicatif de test relié à une base de données de test. Plusieurs problèmes peuvent alors découler d’un tel système : - -- il faut être en mesure de pouvoir mettre en œuvre un serveur MySQL dédié uniquement aux tests, -- mais surtout cette architecture n’est pas exploitable pour exécuter des tests de manière concurrentielle (ce qui pose problème pour l'intégration continue). En effet, des collisions apparaîtraient en base de données et le résultat des tests ne seraient plus exploitables. - - - -#### Mocker Doctrine - -Notre seconde réaction a été de vouloir mocker Doctrine pour devenir indépendant de MySQL. Lourde tâche. - -Tant bien que mal, nous sommes arrivés à un résultat plutôt satisfaisant car notre API réalise des opérations simples : ajout, modification, suppression et consultation avec un filtrage élémentaire. - -La première chose à faire est de s’assurer que notre serveur de test n’accède pas aux données de production dans MySQL en changeant la configuration Doctrine dans le fichier config_test.yml. - - - - - -Ensuite, nous avons créé une [classe abstraite](https://gist.github.com/fdubost/6761079#file-gistfile1-php) dont héritent toutes nos classes de test, et qui permet d’initialiser le mock de Doctrine. - -Autant vous dire que le développement de cette classe a été fastidieux car incrémental : chaque nouveau besoin de manipulation de données dans nos tests, il a fallu modifier le mock pour prendre en compte des méthodes ou des fonctionnalités de méthodes qui n’avaient pas été encore mockées (comme le filtrage par critères dans la fonction findBy). - -Les possibilités de ce mock reste limitées. Nous sommes, par exemple, tombés sur le cas où deux managers de données en relation (des recettes et leurs ingrédients) dépendaient d’un même EntityManager Doctrine : tel que nous l’avons développé, le mock ne sait pas gérer cette situation et engendre des erreurs à l'exécution. Il aurait fallu refactoriser le code pour parvenir à nos fins et passer encore plus de temps sur ce projet… et nous n’en avions pas beaucoup ! - -Autre problème : nous utilisons des fonctionnalités de la librairie Gedmo/DoctrineExtensions pour la gestion automatique des dates de création et de modification. Évidemment, elles ne sont pas opérationnelles avec notre mock et nous aurions encore dû développer pour faire passer nos tests. - - - -#### Utiliser les transactions de Doctrine - -Il a donc fallu nous rendre l’évidence : cette solution ne correspondait pas à nos besoins ! Nous avons alors émis l’hypothèse d’une alternative qui nous permettrait peut-être de nous passer d’une config spécifique MySQL pour nos tests : l’utilisation des transactions via Doctrine. - -Au début de chaque test, nous aurions ouvert une transaction mais qui n’aurait jamais été commitée par la suite, évitant toute interaction avec la base de données de production. Mais avec cette solution, dangereuse à mettre en place et à maintenir, nous aurions couru le risque de modifier des données de production. - - - -#### Remplacer MySQL par un autre SGBD uniquement pour les tests - -Finalement, nous sommes partis sur une autre piste, celle qui fait actuellement tourner nos tests fonctionnels sur ce projet. Nous utilisons [SQLite](https://www.sqlite.org/) dans notre environnement de test la place de MySQL. Ce SGBD est très léger et simple mettre en œuvre : pas besoin d’une installation sur un serveur dédié, il suffit simplement d’activer une extension de PHP. SQLite se base sur des fichiers physiques pour gérer le stockage des données. Ainsi, chaque build de test peut avoir ses propres fichiers de BDD dans son répertoire évitant toute collision dans le cas de tests concurrentiels. - -Nous avons donc configuré Doctrine, pour qu'il utilise SQLite lors de son exécution en environnement de test en modifiant le config_test.yml - - - - - -Comme pour le mock de Doctrine, nous avons mis en place une [classe abstraite](https://gist.github.com/fdubost/6761662#file-gistfile1-php) qui permet de gérer la réinitialisation de la base pour chaque test. - -Nous pouvons donc maintenant tester unitairement et fonctionnellement notre API REST développée en PHP l'aide de Symfony2 et Doctrine. Et nous ne nous en privons pas : notre API est couverte par bientôt 5.000 assertions. - - - -#### Génération des données de test - -Après avoir trouvé une solution pour l'accès à la structure de données en environnement de test, nous nous sommes penchés sur la question du contenu de ces données de tests. Pas longtemps. - -Notre service REST permettant des opérations CRUD, nous partons pour chaque test d'un contenu vide que nous remplissons à l'aide de notre propre service. Cela permet de tester beaucoup plus de cas d'utilisation. Mais surtout cela permet aussi de tester des cas plus réels, plus proches de son utilisation par nos clients. diff --git a/_posts/2013-11-14-velocity-europe-2013-day-1.md b/_posts/2013-11-14-velocity-europe-2013-day-1.md deleted file mode 100644 index 3976155c4..000000000 --- a/_posts/2013-11-14-velocity-europe-2013-day-1.md +++ /dev/null @@ -1,299 +0,0 @@ ---- -layout: post -title: "Velocity Europe 2013 - Day 1" -description: "" -author: - name: Baptiste, Denis Roussel et Kenny Dits - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [conference,velocity,webperf] -image: - feature: - credit: - creditlink: -comments: true -permalink: velocity-europe-2013-day-1.html ---- - -### Introduction : - -![Velocity Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201311-ob_0fc84f_9083212144-c916b6f5e1-jpg.jpeg) - -Nous voici de retour à Londres pour la troisième édition de la Vélocity Europe, qui se déroule, pour la deuxième fois à Londres (la précédente était à Berlin). - -Pour rappel, la Vélocity est la conférence autour de la performance web. Qu'elle soit Front-End, Back-End, Dév ou Ops. C'est l'événement de l'année à ne pas manquer en Europe, ou aux US (ou Chine) pour les plus chanceux - - - Cette première journée (ayant eu lieu le 13 novembre 2013) est axée sur le signe des “Tutorials”. De looongues conférences de 90 minutes dont voici le compte rendu écrit à 6 mains. - - La conférence “classique” commence le 14 et se déroulera sur deux journées. - - - -### Gone in 60 frames per second - -Addy Osmani (Google Chrome) [@addyosmani](https://twitter.com/addyosmani) - -![Velocity Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201311-ob_69d331_10845977003-b429d75241-z-jpg.jpeg) - -[Addy](https://addyosmani.com/blog/) est une figure incontournable du web. Créateur de [TodoMVC](https://todomvc.com/), Lead dév de [Yeoman](https://yeoman.io/) et travail dans la Google Chrome Team sur les outils à destination des développeurs autour du navigateur. - -Après la génération du code html par les serveurs et le transfert de ce code par les réseaux, le rendu graphique de la page par le navigateur est le dernier évènement significatif du chargement de la page lors de la consultation d’un site par un client. - -Voici donc un résumé des bonnes pratiques permettant d’obtenir un meilleur framerate (nombre de rafraîchissement de la page par seconde) et ainsi une meilleure fluidité lors de la navigation : - -- disposer des images à la bonne taille pour éviter les redimenssionnements à la volée, -- limiter les handlers sur l’événement onScroll(), -- limiter tous les éléments ‘fixed’ car cela force le navigateur à recalculer constamment la zone affichée (ou utiliser l’astuce `translateZ(0)`), -- limiter les directives CSS qui nécessites un calcul supplémentaire (lorsque tout est déjà affiché) : - -- les ombres, -- les flous, -- et les dégradés : ([Bootstrap](https://getbootstrap.com/) a supprimé tous les dégradés sur ses boutons : +100% de rapidité l’affichage). - -Ensuite, il reste quelques conseils plus généraux : - -- Il faut se souvenir que les performances des téléphones ne sont pas celles des PC, -- un framerate de 60 fps est parfait (c’est dû au matériel), mais un framerate de 30 fps peut aussi être suffisant pour peu qu’il soit constant, - -Enfin, comme souvent, tous les outils pour comprendre et améliorer le rendu graphique de ses pages web sont disponible dans tous les navigateurs. Dans Chrome, il suffit d’aller dans la section “Frames” de l’onglet “Timeline” des DevTools. - -Les slides sont disponible ici : [https://speakerdeck.com/addyosmani/velocityconf-rendering-performance-case-studies](https://speakerdeck.com/addyosmani/velocityconf-rendering-performance-case-studies) - - - La présentation de la conférence par l’auteur lui-même : [https://addyosmani.com/blog/making-a-site-jank-free/](https://addyosmani.com/blog/making-a-site-jank-free/) - - - - - - - -Vidéo de la même conférence (donnée à la Smashing Conf 2013) - - -### Bring the noise : Making effective use of a quarter million metrics - -Jon Cowie (Etsy) [@jonlives](https://twitter.com/jonlives) - -![Velocity Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201311-ob_83eb3a_10845796864-8dbb9f704e-z-jpg.jpeg) - -Jon est “Ops Engineer” chez [Etsy](https://etsy.com/) (Dont le VP, John Allspaw, co-organise avec Steve Souders, la Vélocity). - -Quelques données sur Etsy : - -- Ils font du déploiement continu -- 1.5 milliards de pages vues -- 250 contributeurs (tout le monde déploie du code, [même les chiens](https://fr.slideshare.net/chaddickerson/optimizing-for-developer-happiness)) -- ils utilisent Deployinator pour déployer leur code avec un unique “bouton”, et schemanator pour les migrations SQL -- 60 déploiements par jour / 8 commit par deploiement -- ¼ millions de métriques ! - - - -> "We optimize for quick recovery by anticipating problems instead of fearing human error" John Cowie - - -> "Can’t Fix what you don’t measure" W. Edwards Deming - - -Leurs outils pour le monitoring : - -- Not homemade : - -- Ganglia -- Graphite -- Nagios -- Homemade : - -- [StatsD](https://github.com/etsy/statsd) : Simple Daemon for easy stats integration -- [Supergrep](https://github.com/etsy/supergrep) : Real time log streamer -- [Skyline](https://github.com/etsy/skyline) : A real time anomaly detection system -- [Oculus](https://github.com/etsy/oculus) : A metric correlation component - - - -> "Not All things that break throw errors" Oscar Wilde - - -> "If it moves, graph it ! If it doesn’t move, graph it anyway" Jon Cowie - - -La présentation s’axe ensuite plus particulièrement sur la stack “Kale”, qui englobe deux outils que l’on va détailler : Skyline et Oculus. Voir l’article sur le blog technique de Etsy [https://codeascraft.com/2013/06/11/introducing-kale/](https://codeascraft.com/2013/06/11/introducing-kale/) - -L’objectif de Skyline, est de détecter les comportements anormaux (gros pics par exemple), avec pour principal challenge, la récupération des données (via le “relay agent” de Graphite, ils envoient en continue les données dans Redis via redis.append() ), le stockage de 250 000 métriques (dans Redis) au format MessagePack. Oculus quand lui permet de corréler les métriques, en utilisant les données brutes de l’api de Graphite, car il est bien plus efficace de comparer des chiffres, que des images … - -Il n’y a pas un mais huit algorithmes de détections d’anomalies qui sont utilisés dans un vote à majorité, déterminant ainsi si l’anomalie est avérée (parmi ceux ci, OLS, Grubb’s test, l’histogramme bining etc…). La détection se fait sur une fenêtre d’une heure et une seconde de 24 heures. Skyline souffre encore de quelques faiblesses: l’absence de prise en compte de la saisonnalité, les pics qui peuvent en cacher d’autres plus faibles, le postulat pas toujours vrai que les données sont normalement distribuées et les corrélations négatives. - -Ils comparent donc la distance euclidienne (slide 99), en gérant aussi le décalage temporel (dynamic time warping / DTW) (voir slide 100). - -La partie la plus intéressante est la simplification d’une métrique temporelle, en la normalisant sur une courbe échelle réduite (de 0 à 25), et en la transformant en une chaine textuelle comportant cinq valeurs : - -- sharpdecrement -- decrement -- flat -- increment -- sharpincrement - -Et ceci en fonction de la valeur en cours par rapport à la valeur précedente. - -Ils poussent toutes ces métriques normalisées dans [Elastic Search](https://www.elasticsearch.org/) dans un champ non tokenisé en réalisant des recherches de phrases afin de corréler les métriques ayant le même pattern et en scorant via un plugin codé par leurs soins (incluant une version “rapide” du DTW). - -Une fois les métriques corrélées affichées, il est possible de sauvegarder un snapshot de ces dernières et d’inclure des commentaires dans une “collection”. Cela permet notamment de construire une base de données de connaissance sur les incidents ou les comportements anormaux mais explicables. - -Skyline est visible par *tous* dans leur bureaux, sur l’un des 6 écrans de dashboards, devant lesquels on peut notamment lire le nombre de requêtes HTTP par seconde, le top 10 des pages, les temps de générations et d’affichage etc... - -Les slides sont disponible ici : [https://www.slideshare.net/jonlives/bring-the-noise](https://www.slideshare.net/jonlives/bring-the-noise) - - - - - - -### Responsive images Technique and Beyond - -Yoav Weiss (WL Square) [@yoavweiss](https://twitter.com/yoavweiss) - -![Velocity Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201311-ob_f5459e_10845647355-e5150145e4-z-jpg.jpeg) - -Yoav est un spécialiste de la WebPerf et travaille sur les problématiques des images liées au Responsive Web Design. Il est aussi Technical Lead au RICG (Responsive images community Group) - -Le principal problème des images responsive, c’est de charger l’image correctement dimensionnée par rapport à une page, de manière efficace. - -72% des sites RWD servent les mêmes ressources entre les résolutions petites et grandes … - -On peut économiser 72% en taille d’image en compressant correctement (voir [https://timkadlec.com/2013/06/why-we-need-responsive-images/](https://timkadlec.com/2013/06/why-we-need-responsive-images/)). - -Yoav a développé un outil utilisant PhantomJs, permettant de mesurer la différence entre les images chargées, et celle qui seraient correctement dimensionnées : [Sizer Soze](https://www.sizersoze.org) - -On aborde ensuite les deux cas principaux gênant : - -- Servir une dimension différentes de l’image à différents support. (et les Retina uniquement aux devices le supportant) -- et le “Art direction”, avoir une image qui correspond au layout - -Ainsi que l’intérêt du Pre-loader, souvent peu connu. Beaucoup plus d’infos sur cet article d’Andy Davies ([https://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/](https://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/)) - -Yoav parcours ensuite toutes les techniques des images responsive avec avantages/inconvénients et exemple pour chacune, que vous pouvez retrouvez dès la slide 57 de la présentation ci après : [https://yoavweiss.github.io/velocity-eu-13-presentation/#/](https://yoavweiss.github.io/velocity-eu-13-presentation/#/) - -L’étude et les retours sont extrêmement complet, et immanquable, si vous travaillez ou allez travaillez sur le sujet. Il aborde aussi une approche en cours d’étude, qui verra peut être le jour prochainement (Responsive Image Container). - - -### Performance Analysis of JVM components for non-specialists - -Ben Evans (JClarity) [@kittylyst](https://twitter.com/kittylyst) - -![Velocity Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201311-ob_f988cd_10845641605-306fa359cc-z-jpg.jpeg) - -La performance et la complexité des applications qui fonctionnent sur la JVM ont suivi l'évolution de la loi de Moore. Malgré que nous ayons gagné de la puissance et des transistors, notre code s'est complexifié d'année en année et d'autant plus avec le boom d'Internet. - -Le tuning de la JVM est indispensable pour avoir une application performante et doit se faire de façon rigoureuse et scientifique, il faut comprendre, mesurer, tester, vérifier et répéter ce processus jusqu'ce que l'on considère la performance comme bonne. - -Ben a ensuite détaillé l'anatomie de la JVM, les spécificités du langage Java, les "mid 90's decisions design" qui ont été faites, comment est géré l'allocation mémoire, la heap, et le fonctionnement du garbage collector (mark and sweep, stop the world). La durée du "stop the world" est ridicule comparé aux temps de latence réseau, ceux engendrés par l'hyperviseur etc... - -Il a présenté quelques optimisations indispensables selon lui, et a insisté sur le fait que l'optimisation prématurée pouvait être la source de bien des soucis coté code. - - -### Tuning Network Performance to Eleven - -Ilya Grigorik (Google) [@igrigorik](https://twitter.com/igrigorik) - -![Velocity Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201311-ob_0bd89e_10845984653-f790e99456-z-jpg.jpeg) - -AKA comment condenser un livre dans un tutorial d’1H30. Exercice encore plus difficile lorsqu'il faut résumer le résumé d'un livre aussi dense et complet. Ilya en tant que spécialiste de la webperf a examiné les mécanismes de la latence et de la bande passante, le fonctionnement du protocole TCP, la gestion de congestion, les problèmes structurels de HTTP 1.0 et HTTP 1.1, l'impact de TLS (le chiffrement) sur les performances. Il a donné ses recommandations pour optimiser TCP et bien utilisé TLS. - -"bandwidth + latence =~ performance" - - - -> "Video streaming is bandwidth limited, web browsing is latency limited" Ilya Grigorik - - -Il a ensuite expliqué comment fonctionne le réseau radio 2G/3G/4G et les contraintes que ces architectures exercent sur les temps de chargement et la durée de vie des batteries pour les appareils mobiles. - -Le tutorial s'est achevé sur les défauts de HTTP 1.1 et les nouveautés (nombreuses et sexys) d'HTTP 2.0. Ce fut extrêmement plaisant d'assister à cette présentation, tant Ilya est pointu techniquement, précis et didactique dans ses démonstrations. Le livre est un MUST-READ ! - -Il est d’ailleurs disponible gratuitement ici : [https://chimera.labs.oreilly.com/books/1230000000545](https://chimera.labs.oreilly.com/books/1230000000545) - - -[Les slides sont disponible ici](https://docs.google.com/presentation/d/1f2J_HrzMNvVHhsB3f7DKJFPl2N0Q_QR2ZEECWQu6oV8/present#slide=id.p19) - - - -### Be Mean to your code with Gauntlt and the Rugged Way - -James wickett (Mentor Graphics) [@wickett](https://twitter.com/wickett) - -![Velocity Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201311-ob_a85c76_10845714576-42269f839c-z-jpg.jpeg) - -Cette présentation fut le seul et unique vrai “Workshop” du jour, dans le sens où une machine virtuelle (monter avec Vagrant) était fournie pour réaliser l’atelier au fur et mesure de la présentation sur sa machine. - -Gauntlt est un framework autour de la sécurité, qui fournie des hooks pour de nombreux outils d’attaques (Xss, Sql injection etc …). - -Après une introduction un peu longue autour de la place de la “sécurité” aux seins de nos services. - -L’approche de Gauntlt est basée sur le “[Rugged Manifesto](https://www.ruggedsoftware.org/wp-content/uploads/2012/09/Rugged_Software_Development_20100205.pdf)” - -Gauntlt permet donc d’automatiser au sein de son système d’intégration continue, des tests autour de la sécurité de son applicatif et de son infra, basés sur [Cucumber](https://cukes.info/), utilisant le langage Gherkin (que certains connaissent peut être mieux dans le monde php via [Behat](https://behat.org/)), et interfaçant des outils tels que : - -- Garmr -- Nmap -- Arachni -- Sqlmap -- ... - -Si vous voulez tester l’outil, qui à l’air très prometteur, vous pouvez suivre ce tutoriel : [https://bit.ly/gauntlt-demo-instructions](https://bit.ly/gauntlt-demo-instructions) qui vous fourni la Virtual Box, les consignes d’installations, et les exemples ayant été réalisés pendant la conférence, ainsi qu’une application de test en Ruby [Railsgoat](https://github.com/OWASP/railsgoat) pour servir de cible à vos tests. - -[Les slides sont disponible ici](https://www.slideshare.net/wickett/gauntlt-velocity-eu2013) - - - - - - -### Hands-on Web Performance Optimization Workshop - -Andy Davies (Asteno) [@andydavies](https://twitter.com/andydavies) , Tobias Baldauf (Freelancer) [@tbaldauf](https://twitter.com/tbaldauf) - -![Velocity Europe 2013 - Day 1](/images/posts/imgob/0-00-30-83-201311-ob_78440c_10845987613-5d3296cfbd-z-jpg.jpeg) - -Dernière session de la journée, avec Andy et Tobias, sur un workshop axé Performance Web. - -On commence par une présentation général d’un outil qu’on ne devrait plus présenter : [WebPageTest](https://www.webpagetest.org/), l’outil principal pour les problématiques de performances front-end. - -Andy aborde ensuite quelques autres outils : - -- [PhantomJs](https://phantomjs.org/) (un headless browser) -- [Simple Website Speed Test](https://github.com/technopagan/simple-website-speed-test) -- et surtout [Phantomas](https://github.com/macbre/phantomas), un module PhantomJs pour collecter les métriques de Webperf. -- le [wrapper Node.Js pour WebPageTest](https://github.com/marcelduran/webpagetest-api) de Marcel Duran -- [SiteSpeed.io](https://sitespeed.io/ ) pour monitorer toutes les pages de son site, basé notamment sur Yslow -- [HttpArchive](https://httparchive.org/), l’excellent service de Steve Souders qui tracke le web avec une multitude de stats intéressante, que vous pouvez d’ailleurs installer pour une instance privée afin de tracker vos sites : [https://bbinto.wordpress.com/2013/03/25/setup-your-own-http-archive-to-track-and-query-your-site-trends/](https://bbinto.wordpress.com/2013/03/25/setup-your-own-http-archive-to-track-and-query-your-site-trends/) \o/ - -La suite de la conférence consister a analyser en live certains sites dont quelques uns assez hilarant au niveau performance : - -- Dailymail.co.uk avec ces +de 800 requêtes HTTP et 7 mo ! -- Wildbit.com qui consomme un CPU énorme cause de l’animation sur le logo qu’on ne voit quasiment pas :) - -Les slides : - - - - - - -### Conclusion : - -Bonne première journée avec ce format "Tutorials" un peu trop touffu (90 minutes par conférence ...). Déjà des tonnes d'idées qui ressortent, on a hâte de voir la suite. - -Retrouvez les autres CR : - -- [Compte rendu du jour 2 ](/velocity-europe-2013-day-2) -- [Compte rendu du jour 3 ](/velocity-europe-2013-day-3) - -© des photos : [Flickr officiel O'Reilly](https://www.flickr.com/photos/oreillyconf/with/10845987613/) - -CR rédigé par Baptiste, Denis Roussel et Kenny Dits diff --git a/_posts/2013-11-16-velocity-europe-2013-day-2.md b/_posts/2013-11-16-velocity-europe-2013-day-2.md deleted file mode 100644 index d8e44e03c..000000000 --- a/_posts/2013-11-16-velocity-europe-2013-day-2.md +++ /dev/null @@ -1,340 +0,0 @@ ---- -layout: post -title: "Velocity Europe 2013 - Day 2" -description: "" -author: - name: Baptiste, Denis Roussel et Kenny Dits - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [conference,velocity,webperf] -image: - feature: - credit: - creditlink: -comments: true -permalink: velocity-europe-2013-day-2 ---- - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_9ce448_10859879244-aef165bef0-z-jpg.jpeg) - -De retour à l'hôtel Hilton de Londres, afin de commencer cette deuxième journée qui s’annonce très chargée : jusqu’4 tracks en parallèle. Performance, Mobile, Ops, et Sponsors. - - - -### Making Government digital services fast - -Paul Downey [@psd](https://twitter.com/psd) - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_56b889_10859955903-a209ea1ac8-z-jpg.jpeg) - -Paul est un “Technical Architect” pour le gouvernement anglais. Il nous explique comment ils gèrent et priorisent les problématiques de performances pour offrir des services internet centrés sur les besoins des utilisateurs avant ceux du gouvernement. - -Avec notamment une réduction drastique du nombre de pages, ce qui leur a permis d’obtenir plus de visites au final ! - -Le tout est entièrement documenté en ligne, en accès public, et regorge d’informations intéressante que vous pouvez retrouver sur le [Gov.Uk Service Manual.](https://www.gov.uk/service-manual) - - - - - -### Stand down your smartphone testing army - -Mitun zavery (keynote) - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_1fdf80_10859777974-7501eff881-z-jpg.jpeg) - -Mitun travaille chez Keynote, et fait une démonstration de deux de leurs outils : - -Keynote DA Free (DA = Device Anywhere) - -L’outil très intéressant propose un grand nombre d’appareils mobiles qu’on peut acquérir pendant 10 minutes, afin de lancer des tests. Le gros intérêt est qu’on parle ici de vrais appareils, pas de simulateurs. - -Le service est disponible sur : [https://dafree.keynote.com](https://dafree.keynote.com) après vous êtres inscrit gratuitement sur cette url [https://www.keynotedeviceanywhere.com/da-free-register.html](https://www.keynotedeviceanywhere.com/da-free-register.html) - -(Le service ne fonctionne pas sur Chrome mac pour ma part) - -C’est plutôt impressionnant techniquement, on lance les applications que l’on souhaite, rentre du texte, change l’orientation … ! A mémoriser. - -MITE, le deuxième outil qui à l’air très complet permet d’aller beaucoup plus loin, mais avec des simulateurs cette fois : [https://mite.keynote.com/download.php](https://mite.keynote.com/download.php) - -Dommage que l’on oublie les Macs dans l’histoire. - - - - - - -### Testing all the way to production - -Sam adams (lmax exchange) [@LMAX](https://twitter.com/LMAX) - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_4d7e5f_10859672196-d79c68cb41-z-jpg.jpeg) - -Pour ceux qui ne seraient pas encore convaincu de l'intérêt des tests automatisés, Lmax exchange (site sur l’univers boursier gèrant des sommes d’argent assez phénoménales) présente le workflow de développement basé sur les tests pour déployer du code le plus souvent possible en évitant au maximum les régressions. - - - - - - -### Most of the time we measure the performance of others - -klaus enzenhofer (compuware) [@kenzenhofer](https://twitter.com/kenzenhofer) - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_80bd15_10859963953-9809187919-z-jpg.jpeg) - -Courte présentation de Compuware qui édite des solutions de monitoring, et aussi [Dynatrace Ajax](https://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html) avec une étude de cas assez simple sur la détection d’anomalies sur un site (142 domaines de 3rd party chargés !). - -[Le blog de Compuware](https://apmblog.compuware.com/) regorge d’article en tout genre sur la Webperf. - - - - - -### Making performance personal at Ft labs - -Andrew Betts [@triblondon](https://twitter.com/triblondon) - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_1c7575_10859780954-053107c07e-z-jpg.jpeg) - -Les équipes du Financial Times sont très actifs dans le domaine de la webperf, avec notamment l’outil [FastClick](https://github.com/ftlabs/fastclick) qui permet d’enlever le delay du touch sur mobile (entre 100 et 300 ms!). Ils developpent aussi une webapp html5 très riche, et expliquent comment rendre la problématique de performance importante aux yeux du “produit”. On apprend pas mal d’astuces pour mesurer la performance, gérer le appcache, éviter les sprites etc … - -Vous pouvez retrouvez les slides ici : [https://triblondon.github.io/talk-makingperfpersonal/#/](https://triblondon.github.io/talk-makingperfpersonal/#/) - - - - - -### Lightning demo : Global web page performance - -James Smith (Devopsguys) [@thedevmgr](https://twitter.com/thedevmgr) - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_b73fac_10859783724-8228a62e39-z-jpg.jpeg) - -James est venu présenter lors d’une lightning démo : [worldwidepagetest.com](https://worldwidepagetest.com/) - -Un outil permettant de tester partout dans le monde les performances de son site, basé sur [Webpagetest](https://www.webpagetest.org/), et les locations et browsers disponible. - - - En plus de l’échec total de la démo (bug/plantage … “worst demo ever” d’après le speaker lui même), l’outil qui parait intéressant sur le papier me semble une fausse bonne idée et le risque de saturer les instances de WPT mondial à cause de ce type d’outil me parait bien plus gênant que les avantages qu’il apporte. - - - -### Lightning demo: HTTP Archive, BigQuery, and you! - -Ilya Grigorik [@igrigorik](https://twitter.com/igrigorik) - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_13d430_10859782544-d28ccd39a8-z-jpg.jpeg) - -L’impressionnante quantité de données agrégées par [HTTP Archive](https://httparchive.org ) est maintenant disponible dans [Google BigQuery](https://bigquery.cloud.google.com) : toutes les données statistiques sur les requêtes et réponses HTTP de plusieurs centaines de milliers de site différents sont donc simplement requêtables et disponibles la vitesse de la lumière (c’est une expression à la mode en ce moment par ici). - -Un article d’Ilya explique la marche suivre pour utiliser les données de HTTP Archive stockées sur BigQueries : [https://www.igvita.com/2013/06/20/http-archive-bigquery-web-performance-answers/](https://www.igvita.com/2013/06/20/http-archive-bigquery-web-performance-answers/) - -Nous pouvons ainsi aisément effectuer quelques comparaisons avec nos “concurrents” et néanmoins amis présents la conférence :-) : [https://denisroussel.fr/httparchive-bigquery-french-test.html](https://denisroussel.fr/httparchive-bigquery-french-test.html) - -Ilya présente aussi le site communautaire [BigQueri.es](https://bigqueri.es/) (Powered by [Discourse](https://www.discourse.org/)), permettant de partager les réponses des questions statistiques sur les bases présentes dans BigQuery (notamment celle de HTTP Archive) - - - - - - - -### Gimme More! Enabling User Growth in a Performant and Efficient Fashion - -Arun Kejariwal (Twitter) [@arun_kejariwal](https://twitter.com/arun_kejariwal), Winston Lee (Twitter Inc.) [@winstl](https://twitter.com/winstl) - -La planification de la capacité ("capacity planning") chez Twitter passe par l'utilisation de modèles statistiques et la prédiction sur des données temporelles. C'est absolument nécessaire pour le dimensionnement des plateformes techniques. - -L'utilisation d'une simple régression linéaire capture la tendance globale, mais ne prends pas en compte la saisonnalité ni les pics de trafic (positifs ou négatifs). Un modèle "smooth splines" correctement paramétré, de part son design, ne le permet pas non plus. Idem pour le Holt Winters (que vous pouvez tester avec graphite). Ils utilisent donc le modèle ARIMA (Autoregressive integrated moving average), qui permet d'effectuer des prédictions partir de données temporelles non stationaires (c'est dire que la moyenne et la variance change = pics de trafic). Le nettoyage des données et la vérification du modèle représente la majorité du travail. Les données journalières permettent de prédire jusqu'90 jours, et les données la minute un trimestre. Les prédictions sur 1 mois des métriques systèmes (cpu, ram) sont considérées comme fiables alors que les métriques business (nombre d'utilisateurs, nombres de photos ou vidéos stockées) le sont pour 3 ou 4 mois. Pour les évènements exceptionnels (superbowl, nouvelle année) ces prédictions ne sont pas assez fiables, ils se basent donc simplement sur les années précédentes. - - - - - -### When dynamic becomes static: the next step in web caching techniques - -Wim Godden (Cu.Be Solutions) - -Le monsieur effectue d’abord un récapitulatif des pratiques de cache dans le web depuis son commencement : sans cache, avec du cache applicatif, avec du reverse proxy cache et enfin avec beaucoup trop de systèmes de cache qui rende l’architecture très complexe (tiens tiens). - -Puis apparaissent les ESI, c’est en gros du reverse proxy cache par bloc (en réalité, ils sont parmi nous depuis bien longtemps). Mais une limitation conceptuelle évidente borne leur utilisation : les sites sont très souvent personnalisés en fonction de l’utilisateur (affichage du nom de l’utilisateur connecté par exemple). Et du coup, les blocs personnalisés, même simples, ne peuvent bénéficier du reverse proxy cache. Ce qui défie un peu le concept. - -Pour pallier à ce problème, Wim et son équipe ont développé un langage spécifique dans Nginx (qui est aussi un reverse proxy en plus d’être un serveur http) permettant au serveur web de gérer des variables directement dans le reverse proxy afin que celui-ci les stock dans son propre memcache et puisse y accéder pour retourner la page au client sans faire un appel supplémentaire au serveur web : SCL. - - - Alors oui. C’est pas forcément l’idéal de commencer poser des variables dans le reverse proxy. Mais n’ayons crainte, ce n’est pas pour tout de suite : la release publique ne devrait pas arriver avant mi-2014 :-) - -[Les slides](https://cdn.oreillystatic.com/en/assets/1/event/101/When%20dynamic%20becomes%20static_%20the%20next%20step%20in%20web%20caching%20techniques%20Presentation.odp) - - - - - -### Developer-Friendly Web Performance Testing in Continuous Integration - -Michael Klepikov (Google, Inc) - -Intégrer les mesures/tests de régressions de performance dans nos outils d’intégrations continues et une tâche très compliqué. Michael présente une approche assez maligne consistant utiliser les tests fonctionnels déjen place, pour récolter les mesures des outils de R.U.M. déjà présent sur le site (soit parce que les mesures sont présentes dans l’url d’appel de l’outil de R.U.M.), soit en récupérant les valeurs dans les DevTools de Chrome. - -L’outil [TSviewDB](https://github.com/google/tsviewdb) permet d’avoir une interface qui agrège plusieurs time-series sur une seule time-series (plus d’infos dans le Readme du projet). - -Pas mal d’informations à creuser dans les slides, comme [l’envoi de donnée directe WebPageTest](https://gist.github.com/klepikov/5457750) pour utiliser l’UI sur le résultat, ou la façon de [récupérer les infos de la DevTools de Chrome en vidéo](https://www.youtube.com/watch?v=0_kAPWSZNY4&feature=youtu.be) - -Les slides : - - - - - - -### Integrating multiple CDN providers at Etsy - -Marcus Barczak (Etsy), Laurie Denness (Etsy) - -Pour des raisons de haute disponibilité, de résilience et de balance des coûts, Etsy a mis en place depuis 2012 un système qui leur permet d'utiliser de multiples CDN (parmi eux Akamai, Fastly, et EdgeCast). Leur critères d'évaluations sont le hit ratio et la décharge de trafic des serveurs origine, le reporting, le pilotage via des APIs, la personalisation et l'accès aux logs HTTP. Ils ont pour cela dû faire du ménage dans leur codes et dans leurs headers (cache-control, expires, etag, last-modified) - -Ils ont commencé par les images (1% puis 100% du trafic), et se sont servis des CDNs pour effectuer leur tests A/B. L'equilibrage de charge entre les CDNs se fait manuellement via une interface web ou via un outil en ligne de commande qu'ils ont mis disposition de la communauté ([cdncontrol sur leur github](https://github.com/etsy/cdncontrol)). L'inconvénient de cette solution est la multiplication des requetes DNS (puisqu'ils utilisent des CNAME type img1.etsystatic.com => global-ssl.fastly.net par exemple), la non atomicité et le delais des modifications DNS qui engendrent une long tail importante et le debug plus complexe. Les requetes depuis les CDNs vers les origines sont trackés via un header HTTP et sont monitorés dans un graphite surveillé par un nagios selon un seuil déterminé. - - - -> "If you can do it at the origin, do it !". - - - - - -### What is the Velocity of an Unladen Swallow? A quest for the Holy Grail. - -Perry Dyball (Seatwave Ltd) [@perrydyball](https://twitter.com/perrydyball) - -Retour d’XP très utile, plein d’honnêteté et d’humilité, de SeatWave (site permettant d’acheter des tickets concerts/spectacle etc), sur l’effet douloureux de la première pub télé qu’ils ont acheté pour promouvoir leur service. On découvre la façon dont ils ont su optimiser leur application pour supporter les publicités suivantes, grâce un système de queuing avec un décompte en cas de fortes charges, ainsi que les impacts sur une multitude de métriques et le coté financier. - -Le phénomène est presque un running gag chez nous (ou même sur Twitter), quand votre (ou même l’un de nos …) site est présenté dans une pub ou Capital, et que votre application et/ou serveur ne supporte pas la charge. - -Bref, encore un bel exemple de culture d’entreprise, qui démontre que la performance n’est pas un projet ou une feature “one shot”, mais une culture et une mentalité constante. - - - -> "Performance it’s not just for today, it’s for every day" Peter Dyball - - - - - -### Getting 100B metrics to disk - -Jonathan Thurman (New Relic) - -[New relic](https://newrelic.com/) a présenté l'architecture MySQL qui stocke leur 196 milliards de métriques journalières. Elle est basée sur des shards MySQL, propulsée par de puissants serveurs (12 actuellement) équipés de SSD Intel et de shelf de disques Dell. Les shards sont fait (via leur API shardGuard) par numéro de client, et les tables MySQL sont construites sur le modèle numéroClient_year_julianDay_metricResolution. Il y a environ 200.000 tables par databases. Les métriques sont régulierement (toutes les heures), purgées et aggrégées, en utilisant le innodb_lazy_drop_table de percona 5.5 (et surtout par delete from ou drop table). - -Le code initialement en Ruby est passé Java/Jetty. Les inserts se font séquentiellement en batch de 5000 et sont buffurisés en RAM (ils doivent se faire en moins d'une minute, résolution minimale du produit). Ils prévoient d'utilisé de multiples instances MySQL par serveurs et de gonfler leur capacité hardware (SSD 800G, 96G RAM) - - - - - - -### High Velocity Migration - - - Joshua Hoffman (SoundCloud) [@oshu](https://twitter.com/oshu) - -Joshua nous a conté l'histoire d'une startup (fictive mais pas vraiment car c'est celle de Tumblr), qui a commencé en 2006 entre deux amis souhaitant partager des images de parties d'échecs et comment en 2012 elle a dû, en 6H de maintenance, basculer 1200 serveurs et les données de 50M d'utilisateurs. Il nous a détaillé l'évolution année par année de l'infrastructure et du nombre de devs/sysadmins. Les ingrédients pour gérer une croissance comme celle ci sont selon lui : le provisionning automatique (ipxe, kickstart), la gestion de la configuration (puppet/chef/ansible), le monitoring et l'alerting et les outils de déploiement de code. Il précisé qu'il faut accepter l'imperfection de ses outils, ne pas chercher réinventer la roue mais plutôt utiliser l'open source, ne pas hésiter tuer les projets Zombies (ceux qui durent depuis trop longtemps et qui n'ont pas les fonctionnalités attendues !) et surtout respecter le principe KISS (keep it simple and stupid). - -La migration en 2012 de leur plateforme gérée par une société tierce vers leur propre infrastructure a commencé 120 jours plus tôt avec l'installation des serveurs, machines, systèmes de déploiements, l'acquisition de leur numéro d'AS, et l'utilisation en front d'un proxy pour plus tard pouvoir rediriger le trafic de façon transparente vers la nouvelle infrastructure. Le jour J la fenetre de maintenance du site de 6H été suffisante pour synchroniser les données utilisateurs entre les deux infras, tester et mettre en production. - - - - - - - -### Code is Evil - -Dan Rathbone (British Sky Broadcasting) - -Face aux problèmes de performance du site [https://www.skybet.com/](https://www.skybet.com/), qui doit probablement attirer une quantité impressionnante de parieurs tout en devant afficher des données très fraîches (cela fait partie du business model), Dan a remis plat toute la logique de développement du site. - -Lorsque la performance passe seule au premier plan, il est ainsi possible de renverser le paradigme du développement dans son ensemble : alors qu’en général, les données sont stockées structurées puis extraites pour peupler du code métier puis affichées par des templates élaborés, dans ce cas particulier, les données sont directement stockées de manières dénormalisées, directement prêtes être affichées par des templates simplistes. Le code métier est en amont et sert pré-calculé les données qui sont stockées en base. - -Il est ainsi possible de minimiser drastiquement la quantité de code critique. Et cela ouvre beaucoup de portes : peu de code = peu de maintenance, aucun framework nécessaire, aucun cache nécessaire, etc. - -C’était une présentation assez polémique mais particulièrement intéressante (ce qui n’était pas l’avis de l’audience, semblerait-il) et rafraîchissante car elle permet de sortir des cas standards du monde du web. Entre nous, tous ces principes étaient déjen vogue dans le développement des jeux vidéo dans les années 90 : nous devions constamment contourner la limitation du matériel (les optimisations étaient au cycle processeur près). - - -### Breaking 1000ms Mobile Barrier - -Ilya Grigorik (Google) - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_dd9097_10859873934-1ce54696bc-z-jpg.jpeg) - -Comment arriver afficher sa page web sans dépasser la barrière de 1000 ms ! Un dur challenge dont les épreuves sont détaillés par Ilya. - - - -![Velocity Europe 2013 - Day 2](/images/posts/imgob/0-00-30-83-201311-ob_c53a35_breaking-the-1000-ms-mobile-barrier-velocity-goog.png) - -Des problèmatiques de latence sur le “Touch” mobile, sur les communications 3G/4G, du fonctionnement TCP, du critical rendering path au niveau CSS et JS, mod_page_speed et ngx_page_speed, ainsi que des évolutions venir sur Page Speed Insights, c’est un panel ultra complet de la WebPerf qui été couvert sur cette heure ultra dense, mais oh combien indispensable. C’est donc, comment souvent avec Ilya Grigorik, un must read absolu pour ceux que la Performance Front-End et Mobile, ainsi que la latence, passionne. - -Les slides sont ici [https://docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present#slide=id.p19](https://docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present#slide=id.p19) - - - - - -### Live Sketching ! - -Avant de conclure, petit hommage [Natalia Talkowska](https://twitter.com/NatiTal ) [, qui, sur chaque conférence, réalisait un live sketching d’une qualité incroyable](https://twitter.com/NatiTal) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -### Conclusion : - -C'est complètement lessivé que nous sortons de cette journée, avec une quantité d'idées / projets tester incroyable. - -Vous pouvez retrouver [le compte rendu de la première journée](/velocity-europe-2013-day-1) ainsi [que de la dernière](/velocity-europe-2013-day-3) sur notre Blog. - -N'hésites pas donner vos retours (positifs ou négatifs en commentaire). Merci :-) - -© des photos : [Flickr officiel O'Reilly](https://www.flickr.com/photos/oreillyconf/with/10845987613/) - -CR rédigé par Baptiste, Denis Roussel et Kenny Dits diff --git a/_posts/2013-11-19-velocity-europe-2013-day-3.md b/_posts/2013-11-19-velocity-europe-2013-day-3.md deleted file mode 100644 index b003efb4d..000000000 --- a/_posts/2013-11-19-velocity-europe-2013-day-3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -layout: post -title: "Velocity Europe 2013 - Day 3" -description: "" -author: - name: Baptiste, Denis Roussel et Kenny Dits - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [conference,velocity,webperf] -image: - feature: - credit: - creditlink: -comments: true -permalink: velocity-europe-2013-day-3 ---- - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_7a35dd_10859619405-c7d5058073-z-jpg.jpeg) - -Dernière journée de cette Velocity Europe, avec en plus du track Performance et Ops, l'ouverture d'un track Culture. - -Pour rappel, si vous les avez ratés, les CR des journées précédentes sont à retrouver ici : - -- [CR Velocity Europe 2013 - Day 1](/velocity-europe-2013-day-1) -- [CR Velocity Europe 2013 - Day 2](/velocity-europe-2013-day-2) - -Pour ce "Day 3", nous nous retrouvons tous dans la grande salle avec la vidéo "Slow Motion Water Balloon Fight" en guise d'introduction : - - - - - -### Extreme Image Optimisation: WebP & JPEG XR - -Ido Safruti (Akamai) [@safruti](https://twitter.com/safruti) - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_83fbcc_10870287065-71abb508d2-z-jpg.jpeg) - -A ce jour, d’après HTTP Archive, 62% du poids des pages Web correspond aux images sur desktop, 65% sur mobile. - -Nous utilisons toujours des technos vieilles de plus de 15 ans ! Jpg, Png, Gif … - - - -> "Deploying new image formats on the web is HARD (but doable)" Ilya Grigorik - - -La conférence traite de deux formats bien plus récents : - -- WebP (2011) -- JXR : Jpeg eXtended Range (2009) - -qui supportent le lossless et lossy, ainsi que la transparence (en lossless et lossy aussi) - -On retrouve un tableau très intéressant sur une comparaison taille entre les différents formats sur un même niveau de qualité : - - - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_49b545_velocity-europe-conference-2013-ido-safruti-extre.png) - -Attention, certaines fois (quelques %), l’image peut être plus grosse qu’en jpg. Si vous partez du Jpg pour la compression, comparez les tailles et affichez le Jpg s'il est plus petit. - -Le support de ces formats reste toutefois minime : - -- WebP : Chrome >= 23, Opera >= 12, … -- Jpeg XR : IE => 10, … - -JXR, gère notamment le progressive, ce que ne gère pas encore date WebP. [Plus d’infos sur les "progressives Jpeg" sur le blog de Patrick Meenan](https://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html) (Créateur de WebPageTest). - -Une petite anecdote intéressante sur WebP aussi. [Facebook avait mis en place WebP mais est revenu en arrière car les utilisateurs râlaient !](https://news.cnet.com/8301-1023_3-57580664-93/facebook-tries-googles-webp-image-format-users-squawk/) Quand ils enregistraient ou partageait une photo de Chrome (donc en WebP), les utilisateurs IE notamment, ne pouvaient pas la consulter … - -Ido fera un article sur l’incontournable calendrier de l’avant sur le sujet : [Performance Calendar](https://calendar.perfplanet.com/) en décembre 2013 ! - - - - - -### SLOWING DOWN TO GO FASTER: Responsive Web Design And The Problem Of Agility vs Robustness - -Tom Maslen (BBC News) [@tmaslen](https://twitter.com/tmaslen) - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_f3d7fc_10870619623-7206f4978b-z-jpg.jpeg) - -Gros retour d’expérience des équipes de BBC News sur leur approche du “Responsive Web Design”, et sur la manière dont cela a impacté leurs workflows, ainsi que leur culture. - -Le RWD prend du temps, beaucoup plus de temps (3x), sur le Design, le développement, le test. - -Tom parcourt les optimisations “classiques”, ainsi que la manière dont ils enrichissent l'expérience : Ils délivrent une “Core Experience” à tous, et une “Enhanced Experience” aux navigateurs qui le supportent, utilisent Grunt pour certaines automatisations (pour fournir les bonnes images à la bonne taille [https://github.com/BBC-News/Imager.js/](https://github.com/BBC-News/Imager.js/), versionner les assets [https://github.com/kswedberg/grunt-version](https://github.com/kswedberg/grunt-version) …). - -Vous pouvez aussi découvrir [Wraith, leur outil de comparaison de screeshot Responsive](https://github.com/BBC-News/wraith). - -Bref, une excellente conférence avec un très bon speaker (très drôle sur la fin). - - - -> "Don’t do whoopsies on other people things" Tom Maslen - - - - -### An Introduction to Code Club - -John Wards (White October) - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_e392e8_10870291155-f1cf4c71f0-z-jpg.jpeg) - -Code Club est un projet leadé par des bénévoles pour créer des clubs de coding dans les écoles, pour des enfants entre 9 et 11 ans. Plus de 1400 clubs ont déjété créés en Angleterre ! - -Les enfants utilisent le projet [Scratch](https://scratch.mit.edu/), et qui permet via un langage de programmation assez simple, de programmer des jeux. - -Leurs vidéos de présentation sont de plus assez fun, notamment celle ci, qui nous à été montrée, à 6mn50 dans la vidéo ci dessous : - - - - - -### Lightning Demo: Automating WebPagetest with wpt-script - -Jonathan Klein (Etsy) @jonathanklein - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_25cc44_10870324686-efa10b2d4b-z-jpg.jpeg) - -Afin d’automatiser la prise de mesure synthétique à l’aide de WebPageTest (notamment si vous avez installé une instance privée), les gars d’Etsy ont développé un wrapper Php à l’Api de Webpagetest. Le wrapper permet aussi de pousser les résultats dans un Graphite ou un Splunk. - -L'outil est dispo sur Github : [Wpt-Script](https://github.com/etsy/wpt-script) - - - - - -### Lightning Demo: Introducing a New RUM Resource From SOASTA - -Buddy Brewer (SOASTA) - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_2962da_10870434124-fc7186bde4-z-jpg.jpeg) - -SOASTA, société connue notamment pour avoir racheté LogNormal (outil de R.U.M. l’année dernière), propose aujourd’hui un outil de R.U.M. nommé : mPulse. - -Ils ont publié de nombreuses statistiques sur leur site, sur les performances, suivant le navigateur, la localité etc : [https://www.soasta.com/summary/](https://www.soasta.com/summary/) - - - - - -### Lightning Demo: Automating The Removal Of Unused CSS - -Addy Osmani (Google Chrome) [@addyosmani](https://twitter.com/addyosmani) - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_b7cfdc_10870320786-34a7898e71-z-jpg.jpeg) - -L’un des petits problèmes récurrents du développement web est situé dans nos fichiers Css. A force d’ajout de fonctionnalités ou de framework (notamment les fameux frameworks Css, Bootstrap & co), on finit par obtenir des fichiers CSS gigantesques, dans lesquels il devient très compliqué de savoir ce qui est utilisé ou pas sur votre site. - -Addy présente des solutions qu’on peut retrouver : - -- pour un nettoyage mono page, dans la DevTools de Chrome (Onglet Audit puis Run puis “Remove Unused Css Rules”) -- pour un nettoyage d’un site complet, via des outils autour de Grunt, notamment Grunt Uncss [https://github.com/addyosmani/grunt-uncss](https://github.com/addyosmani/grunt-uncss) fait par Addy en personne, basé sur le module Uncss de Giakki - - - - - -### Learning from the Worst of WebPagetest - -Rick Viscomi (Google) - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_1afdd2_10871075694-de275f1bd3-z-jpg.jpeg) - -Rick travaille pour YouTube chez Google, comme WebDéveloppeur Front-end orienté performance. - -Sa passion, se moquer des mauvais résultats sur les historiques du WPT public :-) - -C’est d’ailleurs pour lui, l’une des bonnes sources pour découvrir les “anti-patterns” de la perf, et les choses à ne pas faire. - -Il présente une Pull Request en cours sur WebPageTest avec le Multi Variate Testing, permettant de tester tout un site, sur plusieurs localités. Plus d’infos sur l’article de son blog sur le sujet : [https://jrvis.com/blog/wpt-mvt/](https://jrvis.com/blog/wpt-mvt/) - - - -### Are today’s good practices … tomorrows performance anti-patterns - -Andy Davies [@andydavies​](https://twitter.com/andydavies) - -![Velocity Europe 2013 - Day 3](/images/posts/imgob/0-00-30-83-201311-ob_4a78f0_10845987613-5d3296cfbd-z-jpg.jpeg) - -Avec l’arrivée d’HTTP 2.0, on se demande, si les optimisations WebPerf que nous réalisons aujourd’hui ne seront pas gênantes demain : Les dataURI, le JS inline, le domain sharding, les sprites ... - -Les réponses ne sont pas aussi simples, et nous “développeurs” nous devons de nous poser les questions afin d’avoir les bonnes réponses avant l’arrivée d’HTTP 2.0. Andy à le mérite de lancer le débat, via des protocoles de test pour chacun des cas. en comparant HTTP 1.0 et SPDY. - - - - - - -### Provisioning the Future - Building and Managing High Performance Compute Clusters in the Cloud - -Marc Cohen, Mandy Waite (Google) - -Marc et Mandy nous ont présenté le Google Cloud, alternative AWS. Basé sur du KVM hautement modifié par les équipes de Google, on retrouve grossièrement des services identiques (stockage élastique persistent, SDN pour le réseau, load-balancing, des profils de machines highmem ou highcpu). Toutefois on notera l'absence d'un marketplace pour les images des VMs et seules Debian et Centos sont disponibles. Énorme avantage par rapport AWS: la facturation la minute au bout de 15min ! Mandy nous a fait la démo du lancement de 1000 Vms en 2min15. Google fournit une api complète et un outil en ligne de commande pour piloter absolument tout: [gcutil](https://developers.google.com/compute/docs/gcutil/). - - - - - -### Security Monitoring (With Open Source Penetration Testing Tools) - -Gareth Rushgrove (Government Digital Service) - -Combien d'entre nous testent la sécurité de leur applicatif en continu ? Elle devrait pourtant faire partie de l'assurance qualité du développement d'un logiciel. Gareth propose donc d'ajouter des tests de sécurité via Jenkins et des tests unitaires dans notre pipeline de développement. Parmis la liste d'outils (rkhunter, naxsi, logstash, fail2ban, auditd, la distrib BackTrack, clamav, Arachni) certains sont aisément intégrables au workflow. A tester le très bon [OWASP ZAP](https://code.google.com/p/zaproxy/) (et [https://www.dvwa.co.uk/](https://www.dvwa.co.uk/) pour se faire la main !). - -Les slides : - - - - - - -### Beyond Pretty Charts…. Analytics for the cloud infrastructure - -Toufic Boubez (Metafor Software) [@tboubez](https://twitter.com/tboubez) - -Toufic travaille depuis 20 ans dans la gestion des données des datacenters et la détection d'anomalies. Comme lors de la présentation de Twitter il explique qu'on ne peut pas appliquer ces données temporelles des méthodes statistiques classiques (holt winter forecast, régression linéaire, smooth splines), car elles sont non stationnaires (violant ainsi le principe d'homogénéité) et la plupart du temps elles ne sont pas distribués normalement (principal pré-requis). Il nous a donc présenté le test de Kolmogorov-Smirnov couplé aux techniques de bootstraping qui permet d'avoir des prédictions assez fiables. Comme les modèles ARIMA, il fait partie de la famille des méthodes statistiques non paramétriques, qui ne présupposent pas de la distribution des données) - -Les slides : - - - - - - -### Automated Multi-Platform Golden Image Creation, Unlocking New Potential - -Mitchell Hashimoto (HashiCorp) [@mitchellh](https://twitter.com/mitchellh) - -Avoir un environnement stable, clonable depuis la dev vers la prod est le rêve conjoint des développeurs et sysadmins. L'utilisation des images pour le déploiement de machines et de code peut être fastidieux, au moindre changement de version il faut instancier l'image, faire la modification, recréer l'image etc...Ce qui n'est pas forcement adapté au cloud computing et la virtualisation. A l'inverse n'utiliser que des logiciels de gestion de la configuration (Cfengine, Puppet, Chef) ne certifie pas qu'un serveur vierge aura le même comportement qu'un serveur sur lequel on aura passé 10.000 modifications. Il m’arrive régulièrement d'avoir des erreurs de run puppet cause d'une dépendance non satisfaite (packages) ou de problèmes réseau, (le plus souvent on souffre de la lenteur d'application d'un profil puppet). - -De plus passé du [VMWare](https://www.vmware.com/fr/) du [AWS](https://aws.amazon.com/fr/) ou [Vagrant](https://www.vagrantup.com/) demande d'avoir autant d'images que de plateforme ! Ce saint graal du "serveur immuable" et agnostique de la plateforme est possible en utilisant une méthode intermédiaire : Packer permet de créer des images (Aws, Virtualbox, VMWare) partir d'une source et avec l'aide d'un chef/puppet/cfengine. Le workflow proposé est le suivant: commit dans le repository => build avec [Packer](https://www.packer.io/) => CI (Jenkins) => Image ready ! - -Cela permet de garder la flexibilité d'un Puppet avec l'idempotence des images et leur facilité, rapidité de déploiement. - -L'orchestration peut être réalisée avec Serf, il implémente un protocole Gossip (tout le monde se parle, mais pas en même temps). C'est un agent installé sur le serveur qui gère des messages et des handlers (scripts personnalisés dans le langage de votre choix). Dans l'exemple de déploiement de multiples load balancer, l'image va permettre d'avoir un système fonctionnel rapidement, les utilisateurs, les logiciels et c'est Serf qui récupérera la configuration appliquer au load balancer. - -On peut aller plus loin en déployant les code avec [Docker](https://www.docker.io/), ce qui ajoute une couche d'abstraction supplémentaire extrêmement puissante. - - - - - -### DOM to Pixels: Accelerate Your Rendering Performance - -Paul Lewis (Google - Team Chrome) [@aerotwist](https://twitter.com/aerotwist) - -Paul Lewis explique quelques principes mis en oeuvre lors du rendu graphique dans Chrome tel que la gestion des calques qui permet d'utiliser plus intensément la puissance du GPU mais dont la multiplication peut s'avérer contre productive : la gestion de trop nombreux calques par le CPU contrebalance la performance du rendu par le GPU (évidemment, sinon cela serait trop simple). - -Pour bien appréhender cette présentation, il m'a semblé nécessaire d'avoir un petit background dans la programmation graphique : savoir, par exemple, pourquoi une ombre ou un flou sont couteux pour le rendu (cause des calculs entre les différentes zones de mémoire contenant les informations graphiques superposer). - -Paul présente ensuite en détail l'[outil de debug du rendu](https://www.youtube.com/watch?v=Vp524yo0p44) dans les WebTools : comment enregistrer en temps réel les différentes frames affichées par Chrome et visualiser les différents temps de calculs. - -Cette présentation, bien que très intéressante par son contenu fut aussi mise en valeur par l'interprétation de Paul Lewis : toujours précise mais simple, sérieuse et fun la fois. - Ce fût pour moi, la meilleure présentation (show!) de la Vélocity. - - Et n'oubliez pas : - - - -> "Tools, not rules" Paul Lewis - - - - -### Conclusion : - -Epuisé par trois jours de conférence d'une densité incroyable, La Velocity a encore aisément tenu toute ses promesses. - -Nous espérons que ces comptes-rendus vous auront été utile, autant que les présentations nous l'ont été. - -N'hésitez pas à commenter l'un des CR pour donner votre avis, sur le CR, ou sur certains points couvert par les Talks. - -Merci. - -Vous pouvez retrouver : - -- [quelques vidéos de la conférence sur Youtube](https://www.youtube.com/playlist?list=PL055Epbe6d5bfvFqHGHroAAbzHerXNQC4) -- [les slides sur le site d'Oreilly](https://velocityconf.com/velocityeu2013/public/schedule/proceedings) -- et les photos ici sur Flickr : https://www.flickr.com/photos/oreillyconf/sets/72157637657689424/ diff --git a/_posts/2013-11-20-jenkinslight-mettez-en-lumiere-vos-jobs-jenkins.md b/_posts/2013-11-20-jenkinslight-mettez-en-lumiere-vos-jobs-jenkins.md deleted file mode 100644 index 49673d805..000000000 --- a/_posts/2013-11-20-jenkinslight-mettez-en-lumiere-vos-jobs-jenkins.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: post -title: "JenkinsLight, mettez en lumière vos jobs Jenkins" -description: -author: team_cytron -category: -tags: [outil, jenkins, ci, cytron, open-source] -thumbnail: "images/posts/cytron/jenkinslight.png" -feature-img: "images/posts/cytron/jenkinslight.png" -comments: true -permalink: jenkinslight-mettez-en-lumiere-vos-jobs-jenkins ---- - -L’idée de [JenkinsLight](https://github.com/BedrockStreaming/JenkinsLight) a germé lorsque nous nous sommes fait taper sur les doigts pour la troisième fois (à juste titre) parce que l’on avait désactivé la publicité sur nos sites de chaîne lors d’une mise en production. Or la publicité est un point critique car directement reliée au chiffre d’affaires. Le pire est que nous testions déjà le bon fonctionnement de la publicité en intégration continue sur nos serveurs de preprod, avant la mise en production. Mais une configuration légèrement différente sur les serveurs de prod rendait le nouveau code instable. Cette situation rend donc impossible la détection de certaines anomalies avant la mise en production… - -D’où notre besoin d’avoir un tableau de bord nous permettant de vérifier chaque instant la disponibilité des fonctionnalités névralgiques de nos sites en production afin de réagir au plus vite en cas de problèmes. Et ce, avant même que l’anomalie ne nous soit remontée par les autres secteurs. Nous avions déjà nos tests dans [Jenkins](https://jenkins-ci.org/) que nous avons alors fait pointer vers la prod. Il nous manquait donc juste une sorte de “Panic Board” sur un écran placé au sein de nos bureaux nous remontant rapidement le moindre problème sur nos sites en production. - -Nous avons créé [JenkinsLight](https://github.com/BedrockStreaming/JenkinsLight) qui permet d’afficher distinctement le statut des jobs d’une vue Jenkins en quasi temps réel. Le projet utilise [AngularJS](https://angularjs.org/) et l’API de Jenkins pour récupérer les informations nécessaires. L’installation se fait sur n’importe quel serveur web et requiert uniquement [Bower](https://bower.io/) pour installer les composants. Afin de permettre à l’API d’être appelée en crossdomain (CORS), il est également nécessaire d’installer un [plugin spécifique](https://github.com/jhinrichsen/cors-plugin) sur votre serveur Jenkins. - -L’application propose quelques variables de configuration éditables dans le fichier "app/scripts/config.js" permettant de spécifier : - -- l’url du serveur Jenkins, -- l’identification au serveur (si nécessaire), -- la vue Jenkins par défault, -- les types de jobs affichés, -- une regexp pour exclure certains jobs, -- le nombre maximum de jobs par ligne sur l’écran, -- l’intervalle de rafraîchissement (en millisecondes), -- une image de fond quand il n'y a aucun job à afficher. - -[JenkinsLight](https://github.com/BedrockStreaming/JenkinsLight) est disponible en [open-source](https://tom.preston-werner.com/2011/11/22/open-source-everything.html) sur [le compte GitHub de M6Web](https://github.com/BedrockStreaming). - -Enjoy ! diff --git a/_posts/2013-12-02-composer-installation-without-github.md b/_posts/2013-12-02-composer-installation-without-github.md deleted file mode 100644 index bd32121ea..000000000 --- a/_posts/2013-12-02-composer-installation-without-github.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -layout: post -title: "Composer installation without github.com (nor packagist) dependency - like a boss !" -description: "" -author: o_mansour -category: -tags: [satis,composer,aws,s3,github,packagist, cloud] -feature-img: "images/posts/composer-installation-without-github/cloud.jpg" -thumbnail: "images/posts/composer-installation-without-github/cloud.jpg" -comments: true -permalink: composer-installation-without-github -language: en ---- - -![github is down ! ok carry on](/images/posts/composer-installation-without-github/github_down.png) - -First a thought about [github](https://github.com/), [composer](https://getcomposer.org/doc/), [packagist](https://www.packagist.org) : we like / adore / thanks the contributors, for those great services and all the open source people dropping great software on it. - -That said, picture yourself operating an online PHP service, generating hundreds euros per hour (cool isn’t it ?). - -If you use [Symfony2](https://symfony.com/) and other public packages, like us, you’re probably deploying your application using composer. - -![basic composer usage](/images/posts/composer-installation-without-github/1.png) - -Suddenly the service is dealing with more and more and more traffic (maybe someone talk about on national tv … or Justin Bieber tweet something … maybe :) ). No problem, says the system administrator (yes our sysadmins are cool), lets pop more virtual machines and deploy more instance of the service ! - -And then : - -![github is down](/images/posts/composer-installation-without-github/2.png) - -boum ! =>``composer install`` command can't download distant packages on api.github.com (website is down, or the network connection or whatever). - -Good luck explaining to your boss that you rely on free hosting service to deploy your business critical website ! - -This is our situation. So here how we deal with that. - -# Principles. - -![principles](/images/posts/composer-installation-without-github/3.png) - -We chose to use [Satis](https://getcomposer.org/doc/articles/handling-private-packages-with-satis.md) - a great tool provided by the Composer team. The main idea is, regulary download packages and their informations on our local servers. We (at M6Web) deployed services on our local infrastructure and on S3 servers in Amazon Web Services. - -# How to ? For your local network. - -We set 2 different satis instance. One for our private packages, and another for all the dependencies we use (basically around Symfony2). The first one (satis-private) will build every 5 minutes, the second (satis-public) every half hour. - -for example : - -* satis-private.yourcompany.com -* satis-public.youcompany.com - -Satis for private package configuration (data/satis.json) : - - { - "name": “satis-private", - "homepage": "https://satis-private.yourcompany.com", - "archive": { - "directory": "dist", - "absolute-directory" : "/srv/data/satis-private/dist", - "format": "zip", - "skip-dev": true - }, - "repositories": [ - { "type": "git", "url": "git://git.youcompany.com/great-bundle" }, - { "type": "git", "url": "git://git.youcompany.com/great-component" }, - { "type": "git", "url": "git://git.youcompany.com/awesomelib" }, - { "type": "git", "url": "git://git.youcompany.com/raoul" }, - … - ], - "require-all": true - } - -Satis for public package configuration (data/satis.json) : - - { - "name": “satis-public", - "homepage": "https://satis-public.yourcompany.com", - "archive": { - "directory": "dist", - "format": "zip", - "skip-dev": false, - "absolute-directory" : "/srv/data/satis-public/dist" - }, - "repositories": [ - { "type": "composer", "url": "https://packagist.org" } - ], - "require": { - - "m6web/firewall-bundle" : "*", - "m6web/statsd-bundle" : "*", - - "doctrine/orm" : "~2.3", - "doctrine/common" : "~2.4", - "doctrine/dbal" : "~2.3", - "doctrine/doctrine-bundle" : "~1.2", - - "naderman/composer-aws" : "~0.2.3", - … - }, - "require-dependencies": true - } - -On the crontab, add this command for each satis instance : - - php -d memory_limit=xx bin/satis build data/satis.json web - -(increasing memory_limit was mandatory for us with satis-public). - -Please note the require-dependencies directive. It tell satis to digg on sub-dependencies on the required packages. And yes, it can take a while. You will probably hit the Github API rate limit. To increase it, add a Github key on your composer configuration file on the satis servers. - - $ cat .composer/config.json - { - "config": { - "github-oauth": { - "github.com": “xxxxxx" - } - } - - } - -In your projects, edit the composer.json and replace the repositories entry by - - "repositories": [ - { - "type": "composer", - "url": "https://satis-private.yourcompany.com" - }, - { - "type": "composer", - "url": "https://satis-public.yourcompany.com" - }, - { - "packagist": false - } - ], - -Remove your composer.lock and vendors then run ``composer update`` on the project. -``"packagist": false"`` mean : “do not search missing packages on packagist.com”. If a package is missing during install, you have to add it in satis-public configuration file then try again. - -*that's it :)* - -# How to ? For AWS. - -## Sync our 2 satis servers with an S3 bucket. - -![full system with s3 syncing](/images/posts/composer-installation-without-github/4.jpeg) - -On satis servers, use [s3cmd](https://s3tools.org/s3cmd) to keep in sync the S3 bucket. Let’s say : yourcloud-satis. - -Add some commands after the build script of satis : - - php -d memory_limit=xx bin/satis build data/satis.json web - cd web - sed 's#https://satis-private\.yourcompany\.com#s3://yourcloud-satis/satis-private#' packages.json > packages-cloud.json - s3cmd put index.html s3://yourcloud-satis/satis-private/index.html - s3cmd put packages-cloud.json s3://yourcloud-satis/satis-private/packages.json - cd /srv/data/satis-private/ - s3cmd sync ./dist s3://6cloud-satis/satis-private/ - -(do the same for satis-public). - -## update your projects - -In your projects, edit the composer.json and replace the repositories entry by - - "repositories": [ - { - "type": "composer", - "url": "https://s3-eu-west-1.amazonaws.com/yourcloud-satis/satis-private/" - }, - { - "type": "composer", - "url": "https://s3-eu-west-1.amazonaws.com/yourcloud-satis/satis-public/" - }, - { - "packagist": false - } - ], - - -## Enable the AWS plugin in EC2 servers - -Add our repositories in `~./composer/composer.json` file of the user used to deploy your code. - - "repositories": [ - { - "type": "composer", - "url": "https://s3-eu-west-1.amazonaws.com/yourcloud-satis/satis-private/" - }, - { - "type": "composer", - "url": "https://s3-eu-west-1.amazonaws.com/yourcloud-satis/satis-public/" - }, - { - "packagist": false - } - ], - - -You have to install the [S3 plugin for composer](https://github.com/naderman/composer-aws) on your EC2 instance. - - $ composer global require "naderman/composer-aws:~0.2.5" - - -If you don't use [IAM roles](https://aws.amazon.com/iam/), add the following composer config on your EC2 servers (`~/.composer/config.json`) : - - { - "config": { - "amazon-aws": { - "key": "KEYYYYYY", - "secret": "seeeeecret" - } - } - } - -`composer install --prefer-dist` command will now download all the packages files from S3 ! - - - - - -Thanks to [Pierre](https://twitter.com/peikk00) and [Jeremy](https://twitter.com/JJourdin) for their help. - -Found a typo or bad english langage, just propose a [pull request](https://github.com/BedrockStreaming/tech.bedrockstreaming.com/blob/master/_posts/2013-12-02-composer-installation-without-github.md). diff --git a/_posts/2013-12-11-redismock-qui-a-bouchonne-mon-redis.md b/_posts/2013-12-11-redismock-qui-a-bouchonne-mon-redis.md deleted file mode 100644 index 23f49aba1..000000000 --- a/_posts/2013-12-11-redismock-qui-a-bouchonne-mon-redis.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: "Qui a bouchonné mon Redis ?" -description: "Présentation de la librairie RedisMock, un mock PHP open-source de Redis à utiliser dans vos tests fonctionnels." -author: team_cytron -category: -tags: [qualite, outil, redis, cytron, open-source] -thumbnail: "images/posts/cytron/redismock.jpg" -feature-img: "images/posts/cytron/redismock.jpg" -comments: true -permalink: redismock-qui-a-bouchonne-mon-redis ---- - -Les tests fonctionnels tiennent un rôle majeur dans la réussite et la pérennité d’un projet web, d’autant plus s’il est déployé continuellement. Nous nous étions donc déjà intéressés à cette problématique dans [le cas d’un service proposant une API REST et utilisant MySQL et Doctrine](/2013/10/tester-fonctionnellement-une-api-rest-symfony-doctrine-atoum). Mais nous développons aussi des services du même type utilisant d’autres systèmes de stockage de données comme [Redis](https://redis.io/). - -Afin de tester fonctionnellement ces services, nous avons d’abord eu l’idée d’installer une instance Redis sur nos serveurs de tests. Mais nous allions inéluctablement retomber sur les mêmes obstacles qu’avec MySQL : - -- il n’est pas toujours possible de monter une instance Redis dédiée aux tests, -- mais surtout une telle architecture n’est pas viable dans un système de tests concurrentiels. - -#### La librairie RedisMock - -Nous nous sommes alors penchés sur la possibilité de bouchonner Redis, chose qui parait au premier abord plus aisée que de bouchonner Doctrine : Redis propose une API simple et bien documenté (même si abondante). Nous pensions trouver une librairie PHP déjà existante mais nos recherches sont restées vaines. - -Nous avons donc créé la librairie [RedisMock](https://github.com/BedrockStreaming/RedisMock) qui reprend simplement [les commandes de l’API de Redis](https://redis.io/commands) et simule leur comportement grâce aux fonctions natives de PHP. Évidemment, toutes les commandes Redis n’ont pas encore été implémentées, seules celles qui sont utilisées dans nos tests sont présentes. Vous pouvez nous proposer l’implémentation de nouvelles fonctions Redis, selon vos besoins, via des Pull Requests sur le projet. - -Toutes les commandes exposées par le mock sont testées unitairement via [atoum](https://www.atoum.org/) en reprenant pour chaque cas les spécifications énoncées dans la documentation Redis. - -#### Utiliser RedisMock dans vos tests sur Symfony - -Tout d’abord, il faut rajouter la dépendance à la librairie dans le `composer.json` et mettre à jour les vendors : - - - -L’utilisation du mock reste très simple dans un projet Symfony. Chez M6Web, nous utilisons [notre propre composant Redis](https://github.com/BedrockStreaming/Redis), lui même basé sur [Predis](https://github.com/nrk/predis). Afin que le mock puisse complètement se faire passer pour la librairie Redis lors de l'execution des tests, nous avons implémenté une factory qui crée à la volée un adapteur héritant de la classe à bouchonner. La méthode `getAdpaterClass` permet de récupérer le nom de la classe à instancier. - - - -Pour simplifier la création de l'adapteur et son injection dans l'application via le fichier `config_test.yml`, on peut utiliser la méthode `getAdapter` qui instancie directement l'objet sans paramètre. Il nous suffit alors de modifier la définition du service Redis dans l’environnement de test. - - - -Et voilà, le tour est joué ! Les tests utilisent maintenant le mock à la place du véritable Redis. Attention cependant, si votre librairie utilise des fonctionnalités non implémentées dans RedisMock, vous pourriez faire face à des comportements aléatoires indésirables. - -[RedisMock ](https://github.com/BedrockStreaming/RedisMock) est disponible en [open-source](https://tom.preston-werner.com/2011/11/22/open-source-everything.html) sur [le compte GitHub de M6Web](https://github.com/BedrockStreaming). - -Enjoy ! diff --git a/_posts/2014-01-08-api-a-consommer-avec-moderation.md b/_posts/2014-01-08-api-a-consommer-avec-moderation.md deleted file mode 100644 index 6d1ac7ec4..000000000 --- a/_posts/2014-01-08-api-a-consommer-avec-moderation.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -layout: post -title: "API à consommer avec modération" -description: "Authentification des API par nom de domaine" -author: team_cytron -category: -tags: [outil, api, symfony, doctrine, cytron, open-source] -feature-img: "images/posts/cytron/domainuserbundle.png" -thumbnail: "images/posts/cytron/domainuserbundle.png" -comments: true ---- - -Après avoir travaillé pendant plusieurs mois sur la création et les [tests](/redismock-qui-a-bouchonne-mon-redis) de nos API avec Symfony, le moment de leur publication est enfin arrivé ! - -Or, les clients de nos API sont multiples : il peut s'agir d'applications mobiles, de sites web mais aussi d’un *back office* interne. Chacun de ces clients peut nécessiter des “vues” différentes de l’API. - -Effectivement, alors que le BO devra pouvoir accéder à la totalité des ressources disponibles, l'application mobile ne devra avoir accès qu’aux ressources publiées. De la même manière, la gestion du cache ainsi que la disponibilité des routes doit pouvoir s’adapter facilement aux clients qui consomment l’API. - -Nous avons opté pour l’utilisation d’un sous-domaine par client afin de l’identifier et ainsi de lui appliquer des configurations particulières. Ex : - -* https://bo.api.monservice.fr pour le BO, -* https://mobile.api.monservice.fr pour l'application mobile. - - -#### Authentification - -Nous utilisons le [composant sécurité](https://symfony.com/doc/current/components/security/introduction.html) de Symfony, qui permet de créer un utilisateur authentifié à la volée et de charger la configuration spécifique à celui-ci. - -Nous avons tout d’abord besoin de créer une classe `User` implémentant `Symfony\Component\Security\Core\User\UserInterface`, et contenant les informations de configuration spécifique. - -Les différents `Users` sont ensuite créés à l’aide d’un fournisseur d'utilisateurs implémentant `Symfony\Component\Security\Core\User\UserProviderInterface`. -Dans notre cas, chaque utilisateur possède son propre fichier de configuration yml. Le fournisseur d’utilisateur vérifie donc que l’utilisateur demandé possède un fichier de configuration et instancie un objet `User` avec cette configuration. Ce UserProvider est défini comme service dans notre bundle et configuré dans `security.yml`. - -Il faut ensuite créer notre propre fournisseur d’authentification pour avoir une authentification par nom de domaine. Pour cela nous avons suivi et adapté le [cookbook de Symfony](https://symfony.com/doc/current/cookbook/security/custom_authentication_provider.html). Cette authentification s’articule autour de 2 classes : un FirewallListener et un AuthenticationProvider. Pour que notre FirewallListener puisse facilement récupérer le client associé, nous avons ajouté un paramètre au routing Symfony : - -{% highlight yaml %} -host: {client}.api.monservice.fr -{% endhighlight %} - -Le FirewallListener utilise donc ce paramètre du routing comme nom d’utilisateur et le transmet à notre AuthenticationProvider. Celui-ci récupère le `User` grâce au `UserProvider` et profite de cette phase pour vérifier que l’adresse IP du client est bien autorisée dans sa configuration grâce au [FirewallBundle](https://github.com/BedrockStreaming/FirewallBundle). - -Effectivement, nous avons ajouté un filtrage initial (mais optionnel) sur les IPs pour chaque client, dans le fichiers `app/config/users/{username}.yml` : - -{% highlight yaml %} -firewall: - user_access: - default_state: false - lists: - m6_prod: true - m6_preprod: true - m6_dev: true - m6_lan: true - m6_local: true - m6_public: true -{% endhighlight %} - -Pour plus de précisions, voir la [documentation du FirewallBundle](https://github.com/BedrockStreaming/FirewallBundle#firewall-bundle-). - -#### Autorisation - -Pour gérer les autorisations d’accès des utilisateurs aux différentes routes, nous avons créé un EventListener qui écoute `kernel.request` et qui décide de laisser passer la requête ou non en fonction de la configuration de l’utilisateur. - -{% highlight yaml %} -allow: - default: true - methods: - delete: false - resources: - exam: false - routes: - get_articles: false -{% endhighlight %} - -Dans cet exemple, l’utilisateur a accès par défaut à toutes les routes sauf les méthodes `DELETE`, les routes concernant les `exams` et la route spécifique `get_articles`. - -#### Durée de cache - -Les temps de cache sont différents en fonction de l’utilisation des données. Les données du backoffice ne seront pas cachées, tandis que les données de l’application mobile auront un temps de cache de 300s. -Nous avons là-aussi créé un EventListener qui écoute cette fois `kernel.response` et qui modifie les headers de cache de la réponse en fonction de la configuration utilisateur qui peut contenir une durée par défaut de cache et des durées de cache par route. - -#### Filtrage automatique avec Doctrine - -Nous pouvons offrir une "vue" différente de nos données à chaque client en définissant des critères de filtrage pour Doctrine (ex: date de publication, ressource activée, etc.) dans les fichiers de configuration des clients : - -{% highlight yaml %} -entities: - article: - active: true - publication: false -{% endhighlight %} - -Afin de ne pas modifier le comportement par défaut de Doctrine, nous avons ajouté une méthode [`findWithContext`](https://gist.github.com/oziks/8180382) à nos repositories qui reprend les mêmes paramètres que la méthode `findBy` en injectant le `SecurityContext`. Cette méthode permet donc de récupérer des entités filtrées en fonction des paramètres d'un client : - -{% highlight php %} -get('m6_contents.article.manager') - ->getRepository() - ->findWithContext($this->container->get('security.context'), ['id' => $id]); -{% endhighlight %} - -#### Personnalisation avancée - -Grâce à l'utilisation du Bundle Security de Symfony, toute la configuration spécifique à un sous-domaine est stockée dans l’utilisateur courant. Et dans Symfony, l’utilisateur courant est facilement récupérable à partir du service `security_context`. Il est ainsi possible de personnaliser n’importe quelle brique de l'application en y injectant la dépendance sur ce service. - -#### DomainUserBundle - -Afin d'implémenter facilement ce fonctionnement sur nos API, nous avons développé un bundle dédié. Il peut donc aussi vous permettre de gérer l'authentification et la configuration de vos API par nom de domaine. - -[DomainUserBundle](https://github.com/BedrockStreaming/DomainUserBundle) est disponible en [open-source](https://tom.preston-werner.com/2011/11/22/open-source-everything.html) sur le [compte GitHub de M6Web](https://github.com/BedrockStreaming). - -Enjoy ! diff --git a/_posts/2014-01-18-vagrant-julien-bianchi.md b/_posts/2014-01-18-vagrant-julien-bianchi.md deleted file mode 100644 index 3c55cb265..000000000 --- a/_posts/2014-01-18-vagrant-julien-bianchi.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: post -title: "Vagrant & Cie, du Dév à la Prod avec Julien Bianchi" -description: "Vagrant, Packer, Chef ... Du dév à la prod." -author: o_mansour -category: -tags: [lft,vagrant,video] -feature-img: "images/posts/vagrant/vagrant_header.png" -thumbnail: "images/posts/vagrant/vagrant_header.png" -comments: true ---- - -Un grand merci à Julien Bianchi qui, à notre demande, est venu nous parler un peu de vagrant lors d'un de nos fameux [Last Friday Talk](/tags/#lft). - -Ses slides : [https://speakerdeck.com/jubianchi/vagrant-and-cie-du-dev-a-la-prod](https://speakerdeck.com/jubianchi/vagrant-and-cie-du-dev-a-la-prod). - -Malheureusement, la vidéo n'est plus disponible... diff --git a/_posts/2014-01-20-m6web-dev-facts-6.md b/_posts/2014-01-20-m6web-dev-facts-6.md deleted file mode 100644 index b62418fdb..000000000 --- a/_posts/2014-01-20-m6web-dev-facts-6.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -layout: post -title: "M6Web Dev Facts #6" -description: "Les plus belles phrases de nos équipes technique" -author: - name: M6Web - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [devfacts, humour] -image: - feature: posts/devfacts.jpg - credit: Game Of Thrones - creditlink: -comments: true ---- - -Parce que nous en avons encore une quantité incroyable en stock, voici une nouvelle sélection des meilleures phrases entendues dans nos bureaux ! - - - -# To code or not to code - -> * Je veux faire du code qui marche, et qui sert à quelque chose ! -> * C'est soit l'un, soit l'autre, mec ... - -# Image trompeuse - -Un dév teste une appli sur ipad - -> * Ah mais l'image est toute moche -> * C'est ton reflet que tu vois - -# Une histoire de chocolat - -> * Qui a testé la Kindle HDX ? -> * Moi j'ai pas trop aimé -> * Pourquoi ? -> * Je préfére le Kindle Surprise - -# c'est automatique je te dis - -> Mais je te dis que c'est automatique ... à 90% - -# Une évidence évidente - -> C'est pas toujours simple parce que c'est compliqué - -# Tout tout tout - -> Ca couvre la quasi totalité de tout - -# Vers l'infini et au delà - -> Il faut que le forum soit caché intégralement autant que possible - -# Fichier introuvable - -> Je t'envoie par mail l'url du fichier - -Par mail : - -> file://C:/Users/****/Desktop/Sanstitre-1.html - -# Unknown Notice - -> Les notices c'est tabous, on en viendra tous à bout - -# La minute de 30 secondes - le retour - -> Tu as pris six mois d'année sabatique diff --git a/_posts/2014-01-28-how-we-use-statsd.md b/_posts/2014-01-28-how-we-use-statsd.md deleted file mode 100644 index 4348b9df1..000000000 --- a/_posts/2014-01-28-how-we-use-statsd.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -layout: post -title: "How we use StatsD" -description: "How we use statsd to monitor our applications" -author: o_mansour -category: -tags: [statsd, graphite, php, nodejs, monitoring] -thumbnail: "images/posts/statsd/header_pourri.jpg" -comments: true -language: en ---- - -# What we want - -As developers, we (M6Web) want to keep our eyes open on what is going on in production. - -Our [local CMO](https://twitter.com/kenny_dee) (chief monitoring officier ;) ) did a [nice presentation about this](/monitoring-applicatif-pourquoi-et-comment) (in french). - -As someone very wise (Theo Schlossnagle) said: "*It's not in production unless it's monitored*". Another cool mantra is: "*I am wondering what to monitor ? everything dude !*". Finally "*if you can not measure it, you can not improve it.*" ([Lord Kelvin](https://en.wikipedia.org/wiki/William_Thomson,_1st_Baron_Kelvin)). - -We ship new apps very often, so we have to industrialise this practice. - -# What is it? - -StatsD is a Node.Js daemon allowing you to send metrics (increment values and timers) over UDP. The fire and forget feature of UDP is great for reducing risks of introducing latency or crashes in your application. - -StatsD is [open sourced by etsy](https://github.com/etsy/statsd/). In our configuration, we use several StatsD deamons and aggregate metrics on Graphite - one point per minute. Many servers allows us to scale, because we don't sample the data at all. - -On client side, we use a simple consistent hashing algorithm to dispatch metrics overs StatsD nodes on the same server. - -# Collecting metrics - -## From raw PHP - -We've created a simple PHP lib to dispatch metrics over UDP. Check it out on [Github](https://github.com/BedrockStreaming/Statsd) or [Packagist](https://packagist.org/packages/m6web/statsd). - -The usage is pretty straightforward : - -{% highlight php %} - array('address' => 'udp://200.22.143.12'), - 'serv2' => array('port' => 8125, 'address' => 'udp://200.22.143.12') - ) - ); -// usage -$client->increment('a.graphite.node'); -$client->timing('another.graphite.node', (float) $timing); -{% endhighlight %} - -## From Symfony2 - -As basic Symfony2 fanboys, we've built a [bundle](https://github.com/BedrockStreaming/StatsdBundle) on top of the StatsD component. -It provides these features: - -* manage multiple Symfony services with different configurations -* bind any event to increment nodes and collect timers - -During Symfony 2 execution, metrics are collected and sent only at the kernel shutdown. A nice feature is that you can [easily collect basic metrics based on events](https://github.com/BedrockStreaming/StatsdBundle/blob/master/doc/usage.md#bind-on-events) without touching your code. - -For example, in conjunction with the [M6Web\HttpKernelBundle](https://github.com/BedrockStreaming/HttpKernelBundle), just dropping this in ```config.yml``` is enough: - -{% highlight yaml %} -m6_statsd: - clients: - default: - servers: ['all'] - events: - m6.terminate: - increment: request.yourapp.. - timing: request.yourapp.. - custom_timing: { node: memory.yourapp.., method: getMemory } - m6kernel.exception: - increment: errors..yourapp -{% endhighlight %} - -![example of simple PHP dashboard](/images/posts/statsd/php_metrics.jpg) - -Offering this to the tech team means that I am now pretty sure that almost all new PHP apps pop with those metrics out of the box. - -Please checkout [the bundle documentation on github](https://github.com/BedrockStreaming/StatsdBundle/blob/master/doc/toc.md). - - - -## From anywhere else - -From Flex, mobile app or JS applications we've developed a simple [Node.js app, translating an HTTP call to a StatsD UDP one](https://github.com/BedrockStreaming/HttpToStatsd). Like the PHP implementation, this application shards the metrics over multiple servers. - -Please consider sending metrics asynchronously and add a timeout to this HTTP call. - -# Living with metrics - -About 120K metrics are collected on our platform. That's a lot. - -Graphite dashboards are quite rustic. But surprisingly lots of non-techs people use this tool: SEO experts, advertising managers, contributors, ... - -![SEO](/images/posts/statsd/crawl.png) - -![video](/images/posts/statsd/dash_video.png) - - -For now we keep using Graphite. We try to keep our dashboards organised and well named. - -For alerting purpose, [a tool based on Graphite JSON output has been developed](/images/posts/statsd/mayday.jpg). It sends emails when it reaches some user defined conditions. Honestly, it does the job, but frankly we are still looking for something else, more flexible with more notification systems than emails. - -If you use such a tool, and you're happy with it, please let us know in the comments. - -Found a typo or bad english langage, just propose a [pull request](https://github.com/BedrockStreaming/tech.bedrockstreaming.com/blob/master/_posts/2014-01-28-how-we-use-statsd.md). diff --git a/_posts/2014-02-18-refonte-de-notre-systeme-de-vote.md b/_posts/2014-02-18-refonte-de-notre-systeme-de-vote.md deleted file mode 100644 index 917d9f448..000000000 --- a/_posts/2014-02-18-refonte-de-notre-systeme-de-vote.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -layout: post -title: "Refonte de notre système de vote" -description: "Création d'un nouveau service de vote communiquant avec une API REST" -author: d_roussel -category: -tags: [api, symfony, redis, monitoring, qualite, cytron] -thumbnail: "images/posts/cytron/polls.png" -feature-img: "images/posts/cytron/polls.png" -comments: true ---- - -Notre système de vote est utilisé d'une part pour gérer l'ensemble des questions et des réponses associées utilisées dans nos [quizz](https://www.m6.fr/emission-top_chef/jeux.html) et d'autre part pour récolter le nombre de votes des internautes lors des [jeux concours](https://www.m6.fr/jeux-concours.html). - -Actuellement, le trafic généré par cette fonctionnalité varie entre quelques votes par minute la nuit à quelques dizaines de votes par seconde lors des premières parties de soirée. - -## Historique - -Comme souvent, les besoins ont régulièrement évolué depuis la mise en place initiale du système en 2009, faisant parfois prendre des chemins tortueux à l'implémentation technique. Au fil des demandes, notre système a par exemple dû stocker ses données dans nos forums pour une fonctionnalité qui a ensuite été rapidement abandonnée. - -L'année 2012 a vu l'arrivée du *second écran* : à l'aide de l'application gratuite adéquate, les périphériques mobiles peuvent désormais se synchroniser avec l'émission en cours de visionnage, en direct ou en différé, sur la TV ou sur le web (la synchronisation se fait par la bande son). Cette synchronisation nous permet de *pusher* instantanément sur les périphériques mobiles du contenu adapté à ce que le téléspectateur regarde : le détail de la recette que le cuisinier prépare dans Top Chef ou un sondage concernant la dernière trouvaille linguistique d'un ch'tit face à sa ch'tite. - -Le *second écran* s'annonçait alors comme une source importante de trafic supplémentaire pour notre système de vote. Effectivement, en plus du trafic historique généré par les sites web, nous allions aussi recevoir tous les votes provenant des périphériques mobiles. - -Ce nouveau trafic a une saisonnalité très marquée : il est principalement présent en début de soirée et reste très dépendant du programme diffusé et de la contribution apportée. - -## Problématique - -La principale problématique venait de l'architecture des bases de données MySQL. Étant fortement couplées sur l'ensemble de la plateforme, la moindre défaillance de l'une d'elles, due à une surcharge sur un sondage, risquait de pénaliser les internautes de tous nos autres sites (un sondage du *second écran* pouvait donc impacter l'expérience utilisateur de [Clubic](https://www.clubic.com/)). - -Le code était aussi fortement couplé entre nos différentes applications : l'action PHP d'un vote était exécutée sur la même plateforme que notre BO permettant à tous nos web services de fonctionner ainsi qu'aux contributeurs d'ajouter du contenu. Une surchage sur les votes aurait donc pu entrainer des perturbations sur le fonctionnement global du site [m6.fr](https://www.m6.fr/) et de ses web services, donc de beaucoup de produits par extension. - -Pour résumer, l'imbrication du code et des bases de données dans l'usine logiciel ne permettait pas de calibrer le système de vote pour qu'il puisse recevoir la charge attendue par le *second écran*. - -C'est donc début 2013 que [Kenny Dits](https://twitter.com/kenny_dee) m'a contacté pour que nous trouvions une solution permettant de découpler le système de vote tout en faisant évoluer son architecture interne afin qu'il puisse facilement s'adapter à la charge inconstante du *second écran*. - -## Solution - -Nous avons alors conçu un nouveau service dédié uniquement à la gestion des questions, réponses et votes des utilisateurs. Ce nouveau *service Polls* est autonome, ce qui nous permet de le découpler complètement de notre usine logicielle avec laquelle il communique via une API REST. - -Concernant le stockage des données, nous avons simplement choisi un moteur très performant qui supporterait la charge sur une seule machine bien calibrée. Cela nous évitait alors les problématiques complexes de *clustering*. Mais nous devions tout de même stocker quelques informations relationnelles : il fallait donc avoir accès à quelques primitives nous permettant d'émuler les relations minimum entre nos données. [Redis](https://redis.io/) s'est donc imposé comme la [solution adéquate](https://stackoverflow.com/questions/10558465/memcache-vs-redis). Cela reste malgré tout une solution théoriquement insatisfaisante, car non réellement scalable. Mais en pratique, les très bonnes performances de Redis permettent de répondre à (bien plus que) nos attentes. - -Le code se trouve, pour sa part, complètement isolé sur son propre serveur. -Comme ce service est complètement [stateless](https://en.wikipedia.org/wiki/Stateless_protocol) et que notre base de donnée est centralisée et suffisamment performante, nous pouvons donc facilement ajouter ou supprimer des serveurs web selon la charge attendue : on peut dire qu'en pratique le service Polls est [scalable horizontalement](https://fr.wikipedia.org/wiki/Exigences_d'architecture_technique#Scalabilit.C3.A9). - -Lorsque l'architecture mise en place permet de répartir la charge sur un nombre variable de machines, le contrat est rempli : ce n'est plus qu'une question d'argent pour supporter n'importe quelle charge. Et comme tout le monde le sait : l'argent n'est pas un problème, c'est une solution. - -## Développement - -Le service Polls a été développé en PHP avec [Symfony](https://symfony.com/) et le [FOSRestBundle](https://github.com/FriendsOfSymfony/FOSRestBundle#fosrestbundle). Nous avons d'abord suivi certaines [références](https://williamdurand.fr/2012/08/02/rest-apis-with-symfony2-the-right-way/), puis nous avons ensuite développé un micro ORM maison pour faire persister nos données dans Redis et enfin [nous avons monitoré](/2014/01/28/how-we-use-statsd) tous ce que l'on pouvait à l'aide de notre [bundle dédié](https://github.com/BedrockStreaming/StatsdBundle). - -Une attention toute particulière a été portée à la qualité avec des tests unitaires couvrant un maximum de code et des [tests fonctionnels](/redismock-qui-a-bouchonne-mon-redis) couvrant la plupart des cas d'utilisation des clients. Les nombreuses mises en production journalières pendant la phase d'optimisation ont ainsi été grandement facilitées, notamment grâce à la sérénité apportée par l'intégration continue. - -## Mise en production - -L'intégration de ce nouveau service Polls a cependant été bien plus longue que son développement. Nous l'avons d'abord mis en production en doublon de l'ancien système : toutes les écritures étaient faites sur les deux systèmes, mais l'ancien était encore la référence lors de la lecture des résultats par les clients. - -Puis après deux semaines, lorsque nous avons validé l'exacte corrélation entre les deux courbes du nombre de votes par minute à l'aide de [Graphite](https://graphite.wikidot.com/), nous avons alors changé les clients pour qu'ils viennent lire les résultats sur le service Polls. - -Encore deux semaines plus tard, lorsque tout était validé et que nous avions développé et exécuté un script d'import de l'historique, nous avons débranché l'ancien système. - -L'intégration a donc été au moins trois fois plus longue, et donc couteuse, que le développement du service en lui-même. - -## Optimisation - -La première optimisation est simplement conceptuelle : nous avons concentré la criticité sur une seule route, celle qui est utilisée par chaque client pour voter. Il est ainsi plus simple de mesurer et donc d'améliorer les performances du service Polls. Cette route est critique parce qu'elle est utilisée par tous les clients, qu'elle ne peut pas être cachée et qu'il faut écrire des données en base lors de chaque appel. - -Il existait plusieurs pistes d'optimisation connues (système de queue, node.js, etc.) mais dans une optique [KISS](https://fr.wikipedia.org/wiki/Principe_KISS), nous avons d'abord opté pour l'utilisation des technologies en place pour ensuite interpréter les résultats récupérés lors des tests de charge et s'adapter si besoin. - -Dans un premier temps, nous avons légèrement ajusté notre modèle de données pour limiter le nombre d'action à réaliser sur la base de données : nous avons seulement deux instructions Redis de [complexité constante O(1)](https://fr.wikipedia.org/wiki/Analyse_de_la_complexit%C3%A9_des_algorithmes#Complexit.C3.A9.2C_comparatif) à réaliser pour chaque vote. Puis nous avons utilisé les transactions pour grouper ces deux instructions et éviter la latence d'une connexion supplémentaire vers notre serveur Redis. - -Nous avons enfin supprimé la vérification de deux contraintes d'intégrité sans importance. Le code retour en cas d'erreur est juste un peu moins cohérent (`400` au lieu de `422`) mais cela n'impacte ni l'intégrité des votes ni la sécurité du service. - -![Suppression de la première contrainte](/images/posts/cytron/polls/contrainte1.png) - -![Suppression de la deuxieme contrainte et transaction Redis](/images/posts/cytron/polls/contrainte2-transaction.png) - -Afin de savoir si nous n'avions pas complètement pris une mauvaise direction dans notre utilisation de Symfony, nous avons alors fait appel à [Alexandre Salomé](https://twitter.com/alexandresalome), consultant SensioLabs, pour auditer notre code. - -Lors de cette journée, durant laquelle nous avons beaucoup appris, nous avons simplement désactivé tous les bundles que nous n'utilisions pas réellement en production : principalement Twig. Cela a occasionné une légère modification de notre code car le FOSRestBundle nécessite Twig pour afficher les erreurs même lorsque celles-ci sont en JSON. - -Une fois cette modification apportée, nous avons gagné les ultimes millisecondes nous permettant de passer sous la barre symbolique des 10ms de temps de réponse sur notre route critique. - -![Suppression des bundles superflus](/images/posts/cytron/polls/bundles.png) - -Vous remarquerez que nous avons d'abord déployé le système en production avant de chercher à l'optimiser : nous pouvions ainsi mesurer en temps réel l'impact de nos développements sur une multitude d'indicateurs dont le temps de réponse. - -## Mise en pratique - -Le service Polls a facilement tenu la charge pour la première émission mettant en avant le *second écran* : un épisode de Hawaï 5-0 durant lequel les internautes pouvaient [choisir le coupable](https://www.programme-tv.net/news/series-tv/39233-hawaii-5-0-m6-ce-soir-vous-decidez-fin-episode/) avec un sondage (sur leur téléphone, tablette ou PC). - -![Nombre de votes pour Hawai 5-0](/images/posts/cytron/polls/hawai50.png) - -Plus précisément, nous sommes montés à 150 requêtes par secondes (ce qui est évidemment bien moins que nos tests de charge), mais nous savons que nous pourrons maintenant nous adapter très simplement à une charge beaucoup plus forte en ajoutant des serveurs web. Notamment lors d'émissions faisant grandement appel au *second écran*. - -Dans le pire des cas, si le service Polls devient indisponible, aucune autre partie de notre infrastructure ne sera compromise. - -## Leçons - -Au cours du développement, de la mise en production et de la maintenance de ce service, j'ai appris plusieurs choses que j'essaierai de ne pas oublier trop vite : - -* Yes we can! Il est possible de combler petit à petit [la dette technique](https://blog.octo.com/maitriser-sa-dette-technique), mais uniquement si c'est [la volonté des décideurs](https://twitter.com/mbohlende/status/431446680874258433), -* la sérénité apportée par les tests automatisés est sans égale pour le confort de développement, -* Redis est très performant. - -Ha ? Attendez ! On me dit dans l'oreillette que certains doutaient encore qu'il était possible de faire du code performant avec un framework *full stack* comme Symfony. - -Pas moi :-) diff --git a/_posts/2014-03-04-utilisation-du-statsdbundle-avec-la-console.md b/_posts/2014-03-04-utilisation-du-statsdbundle-avec-la-console.md deleted file mode 100644 index 0a35b5b5e..000000000 --- a/_posts/2014-03-04-utilisation-du-statsdbundle-avec-la-console.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -layout: post -title: "Utilisation du StatsdBundle avec le composant Console" -description: "Adaptation du StatsdBundle pour le composant Console de Symfony" -author: team_cytron -category: -tags: [statsd, php, symfony, console, monitoring, cytron] -feature-img: "images/posts/cytron/console.png" -thumbnail: "images/posts/cytron/console.png" -comments: true ---- -## Le StatsdBundle - -Chez M6Web, nous [utilisons StatsD]({% post_url 2014-01-28-how-we-use-statsd %}) et nous avons créé un [bundle](https://github.com/BedrockStreaming/StatsdBundle) pour cela. -Ce bundle permet d'ajouter facilement des incréments et des timings dans StatsD sur des événements Symfony2. - -## De la Request à la console - -Or pour des raisons de performances, lors des événements Symfony, les incréments et timings sont seulement stockés dans une variable et ne sont envoyés réellement à StatsD que pendant le `kernel.terminate` qui se déroule après l'envoi de la réponse HTTP au client. -Ceci pose un problème pour les événements lancés depuis une commande Symfony puisque en console, il n'y pas de `Request` et donc pas de `kernel.terminate`. -Nous avons envisagé d'utiliser l'événement `console.terminate` pour palier à cela, mais cela pose deux problèmes : - -* pour une commande qui est censée tourner indéfiniment (par exemple un *consumer*), on ne veut pas attendre la fin de la commande pour envoyer les données, -* dans le cas d'une exception pendant la commande, l'événement `console.terminate` est lancé avant `console.exception`. - -La première solution était donc d'appeler manuellement `$container->get('m6_statsd')->send()` dans la commande ou dans un `ConsoleExceptionListener` mais cela nous fait perdre le principal intérêt du StatsdBundle à savoir le découplage entre la commande et le client StatsD. - -La seconde solution a donc été de modifier le StatsdBundle et d'ajouter une configuration au niveau de l'événement pour forcer l'envoi instantané des données. - -Ainsi, avec la configuration suivante : - -{% highlight yaml %} -clients: - event: - console.exception: - increment: mysite.command..exception - immediate_send: true - m6kernel.exception: - increment: mysite.errors. -{% endhighlight %} - -L'incrément `mysite.command..exception` sera envoyé en temps réel, alors que les autres comme `mysite.errors.` continueront à être envoyés pendant `kernel.terminate`. diff --git a/_posts/2014-04-10-SfLive2014-symfony-a-la-tele.md b/_posts/2014-04-10-SfLive2014-symfony-a-la-tele.md deleted file mode 100644 index 41aeb1956..000000000 --- a/_posts/2014-04-10-SfLive2014-symfony-a-la-tele.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: post -title: "Conférence au Symfony Live 2014 : Symfony à la télé" -description: "M6Web était présent au Symfony Live 2014" -author: o_mansour -category: -tags: [symfony, conference] -thumbnail: "images/posts/sflive2014/header_sflive2014.jpg" -comments: true ---- - -Invité par [SensioLabs](https://www.sensiolabs.com) au [Symfony Live 2014](paris2014.live.symfony.com), j'ai pu présenter le travail des équipes de M6Web, et de nos partenaires, autour de [Symfony 2](https://symfony.com). - -Voici les slides de la conférence : - - - - -L'enregistrement audio (avec les slides) est disponible ici : - - - -Je tiens à remercier toutes les personnes avec qui j'ai pu échanger autour des thématiques de la conférence. J'ai eu beaucoup de plaisir à m'apercevoir que de nombreux conférenciers citaient le travail de M6Web pendant leur talk ! - -Rendez vous au [phptour](https://www.phptour.org) à Lyon pour les prochaines conférences techniques M6Web. diff --git a/_posts/2014-04-11-m6web-lyon-recherche-un-lead-developpeur-architecte-web-h-f-en-cdi.md b/_posts/2014-04-11-m6web-lyon-recherche-un-lead-developpeur-architecte-web-h-f-en-cdi.md deleted file mode 100644 index 594c8118c..000000000 --- a/_posts/2014-04-11-m6web-lyon-recherche-un-lead-developpeur-architecte-web-h-f-en-cdi.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: "M6Web Lyon recherche un Lead Developpeur / Architecte web (H/F) en CDI" -description: "" -author: - name: M6Web - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [recrutement] -image: - feature: - credit: - creditlink: -comments: false ---- - -![M6Web Lyon recherche un Lead Developpeur / Architecte web (H/F) en CDI](/images/posts/imgob/0-00-30-83-201302-ob_e427fc_05646956-photo-galaxie-m6-web-jpg.png) - - -M6Web Lyon recrute, en CDI, un Lead Développeur LAMP, avec une très forte expertise sur les technologies PHP 5.5, MySQL, Symfony2, GIT, et capable d'encadrer une petite équipe de développement. - -Nous recherchons quelqu'un de très passionné, enthousiaste, et mordu de veille technologique : un missionnaire de l'open source, un intégriste de la qualité de code, des tests unitaires et fonctionnels, et un architecte de projets aguerri avec une première approche en méthodologie de développement agile, et une expérience de management de développeurs. - -Si, en plus, vous êtes un malade de l'optimisation back-end et front-end, que des technologies comme Node.js vous émoustillent, que, malgré la qualité de MySQL, vous envisagez dans certains cas des solutions NoSQL alternatives (Mongo, Redis…), votre profil nous intéresse ! - -Venez apporter vos compétences aux équipes techniques de M6Web en travaillant sur des sites à très forte charge ([6Play](https://www.6play.fr), [m6.fr](https://www.m6.fr), [clubic.com](https://www.clubic.com), [jeuxvideo.fr](https://www.jeuxvideo.fr) …), et partagez-les grâce à des conférences internes ou externes et des articles sur notre blog. - -Si vous avez les qualités requises et l'envie de nous rejoindre, allez sur le lien ci-dessous et faites nous part de votre CV, de votre compte github, et d’une lettre attrayante pour nous motiver à vous rencontrer. - -Si vous souhaitez postuler ou avoir plus d'infos : [https://www.groupem6.fr/ressources-humaines/offres-emploi/lead-developpeur-architecte-web-h-f-229879.html](https://www.groupem6.fr/ressources-humaines/offres-emploi/lead-developpeur-architecte-web-h-f-229879.html) diff --git a/_posts/2014-04-23-babitch-the-story-behind-our-table-soccer-web-application.md b/_posts/2014-04-23-babitch-the-story-behind-our-table-soccer-web-application.md deleted file mode 100644 index ef9febf20..000000000 --- a/_posts/2014-04-23-babitch-the-story-behind-our-table-soccer-web-application.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -layout: post -title: "Babitch, the story behind our table soccer web application" -description: "Babitch, the story behind our table soccer/foosball web application" -author: - name: M6Web - avatar: - email: - twitter: Bedrock_Stream - facebook: - github: BedrockStreaming -category: -tags: [opensource, babyfoot, angularjs, d3js, symfony] -feature-img: "images/posts/babitch/tablesoccer.jpg" -thumbnail: "images/posts/babitch/tablesoccer.jpg" -comments: true -language: en ---- - -At M6Web, we love playing foosball! -We have one old (incredibly strong) soccer table in our « fun room », and at lunch time, a part of us enjoy playing it. - -The soccer table in enterprise is awesome for a lot of things: - -* Team building between each players, -* Don’t think about work (almost) when we are playing, -* Fun! a lot of! -* [Attract good people](/m6web-lyon-recherche-un-lead-developpeur-architecte-web-h-f-en-cdi) … - -Our rules are simple : Doubles (4 players) only, and the first team at ten win. - -So, as programmers, we tend to have software ideas for each questions in our life ! and the questions we had with foosball were: - -* Who is the best player? -* How many goals did I score ? -* Who won the most games? -* … - -So, we begin to talk several months ago about a foosball app, allowing us to record each games, and each goals, to compute lot of stats about our games. -Everyone had good ideas about it, but someone had many more than us. Even more that it ruined all motivation of the other folks wanting to do work on this webapp, because the first steps to begin the app with all the features we had in mind was too big for all of us … - -So before having started the project, it was over ! - -Few months later, an undercover part of the team began the development of a more simple and stupid foosball application : it just allowed to select 4 players, and to register matches by telling who scored and what kind of goal it was (normal or own goal). -This was ugly as possible, but it worked ! And it was an awesome start for improving it and giving back all the motivation developpers had lost before ! - -Babitch was born :) - -# Architecture - -At the beggining, there was only one project, with the server API, and the client part. -This was bad. It was a good way to start fast, but a bad way to allow each project to evolve on its own side. -So we decided to divide the Babitch Project into two parts, Babitch, the server API, and BabitchClient, a client to consume Babitch Api data. - -# Babitch, the API - -The [Babitch API](https://github.com/BedrockStreaming/Babitch) is a simple PHP/MySQL project, based on Symfony2, Doctrine, [FosRestBundle](https://github.com/FriendsOfSymfony/FOSRest), and [NelmioApiDocBundle](https://github.com/nelmio/NelmioApiDocBundle). -The documentation generated by the NelmioApiDocBundle is available at /api/doc and allows to view each Route of the API, and to send requests on them with the Sandbox menu. -The API is functionnaly tested by [Behat](https://behat.org/). -A [Vagrant](https://www.vagrantup.com/) file is available if you want to try it easily. (More information in the [Readme.md](https://github.com/BedrockStreaming/Babitch)) - -# Babitch, the Client - -The [Babitch Client](https://github.com/BedrockStreaming/BabitchClient), is the "official" client for the API. -The client side doesn't require any webserver, it's just an [Angular.js](https://angularjs.org/) app, doing REST queries to the Babitch API thanks to Restangular. - -We used [Yeoman](https://yeoman.io/) to bootstrap the project because it helps in many ways: - -* adds grunt configuration and support for serving, building and testing the project, -* have generators for controllers, service, etc ... - -For development on this client, we are heavily using [Grunt](https://gruntjs.com/), [Karma](https://karma-runner.github.io/0.10/index.html) for Unit Testing, and the new [Protactor](https://github.com/angular/protractor) for E2E testing. - - -The client is divided into four major parts: - -## New Game - -![Main View](/images/posts/babitch/mainview.png) - -This is the main feature, it allows to begin a new game, choose 4 players, and assign each goals to the right players. -The game is saved only when the last goal is made. -Each player is represented by his [Gravatar](https://fr.gravatar.com/) for a nicer UI :) - -## Live - -![Live View](/images/posts/babitch/liveview.png) - -The table soccer is not at the same floor than we are, so we are using our monitoring screen to show at lunch time the live state of the table score ! - -With a screen on this feature, we could see: - -* if a game is played right now, -* who's playing, -* the live score, -* for each goal, in live, who scored, and on which side :) - -The live part use a [Faye](https://faye.jcoglan.com/) server, which you can host freely on [Heroku](https://www.heroku.com/) (more information on Readme.md). You configure a channel name, and all actions done on the new game view are forwarded to the Faye server, forwarded back to the client listening on the Live view. It just rocks ! - -## Stats - -![Stats View](/images/posts/babitch/statsview.png) - -All of this would be useless if you don't have any way to compare your ... stats to others competitors, right ? -So stats section is here for that purpose. -It shows you : - -* the last played match, -* a sortable table by each stat of each player, -* data visualization on each type of stats, -* an individual card by player, -* a sortable table by each stat of each team. - -And for each player and team, you have access to a lot of stats: - -* Elo Ranking (According to the [Bonzini Usa Player Ranking/Rating System](https://www.bonziniusa.com/foosball/tournament/TournamentRankingSystem.html)), -* Percentage of goals per ball played, -* Percentage of victory/loose per game, -* Number of games played, -* Team Goalaverage, -* ... - -There was some long debate about how stats have to be computed : on the server side ? (not really the goal of a REST Api ...), or on the client side ? -After some successfull tries, we decided to compute stats on the client side, in an Angular.Js Service. -The service loads the last 300 games, and computes team and player stats fastly. -We also use the awesome [D3.Js](https://d3js.org/) framework for data visualization. - -## Admin - -Probably the first screen you will need, for a simple way to add, modify, or delete players. - -# Conclusion - -Working on our free (or lunch) time on a side-project like this is awesome! -It allows us to use several technologies or tools we don't use often, to improve our knowledge on tons of other things, to view the project on the product owner side and to mix teams who don't work a lot together. - -One other thing interesting to remember about that project: Keep things as simple and small as possible (according to KISS principles) ! And only when your simple project is done, iterate by adding more and more features. - -# Try and contribute? - -So, if like us, you love foosball and play at work, give it a try, and give us feedback if you use it :) - -Also, it's open-source, so you're welcome to contribute on [BabitchClient](https://github.com/BedrockStreaming/BabitchClient) and [BabitchService](https://github.com/BedrockStreaming/Babitch), by posting/reading/commenting issue and PR. - -Thanks ! :) diff --git a/_posts/2014-05-15-m6web-sera-present-au-phptour-lyon-2014.md b/_posts/2014-05-15-m6web-sera-present-au-phptour-lyon-2014.md deleted file mode 100644 index b69fd1209..000000000 --- a/_posts/2014-05-15-m6web-sera-present-au-phptour-lyon-2014.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: post -title: "M6Web sera présent au PHPTour Lyon 2014" -description: "M6Web sera présent au PHPTour Lyon 2014 organisé par l'AFUP" -author: - name: M6Web - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [afup, phptour] -thumbnail: "images/posts/phptour/PHPTourLyon2014_megaban.jpg" -comments: true ---- - - -M6Web sera bien représenté au [PHPTour 2014](https://www.phptour.org) organisé par l'[AFUP](https://www.afup.org) et est très heureux de soutenir l'évènement en étant sponsor Argent. - -![M6Web sponsor argent du PHPTour](/images/posts/phptour/PHPTourLyon2014_banner.png) - -Venez nombreux [augmenter votre pilosité faciale](https://www.afup.org/pages/phptourlyon2014/sessions.php#1036), tel un vrai sysadmin. - -Faites le plein d'anecdotes croustillantes et découvrez [l'histoire de M6Web Lyon](https://www.afup.org/pages/phptourlyon2014/sessions.php#1030) avec [Kenny Dits](https://twitter.com/kenny_dee). diff --git a/_posts/2014-06-25-m6web-etait-au-phptour-lyon-2014.md b/_posts/2014-06-25-m6web-etait-au-phptour-lyon-2014.md deleted file mode 100644 index 8be96d795..000000000 --- a/_posts/2014-06-25-m6web-etait-au-phptour-lyon-2014.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -layout: post -title: "M6Web était présent au PHPTour Lyon 2014" -description: "M6Web était présent au PHPTour Lyon 2014 organisé par l'AFUP" -author: - name: M6Web - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [afup, phptour, conference, video] -feature-img: "images/posts/phptour2014/elephant.jpg" -thumbnail: "images/posts/phptour2014/elephant.jpg" -comments: true ---- - -Le Lundi 23 et Mardi 24 juin a eu lieu l'événement PHP de l'année à Lyon : le PHPTour Lyon. -À cette occasion, les équipes d'M6Web ont présenté un talk, dont voici les slides et vidéos : - -#Nouveau socle pour une nouvelle vie, chez M6Web (par Kenny Dits) - -La seconde conférence de [@techM6Web](https://twitter.com/TechM6Web) a été tenue par Kenny Dits ([@kenny_dee](https://twitter.com/kenny_dee)) : "Nouveau socle pour une nouvelle vie, chez M6Web". - - - - - -[Voir les commentaires sur Joind.in](https://joind.in/talk/view/11223) - -Nous avons aussi retrouvé une bonne partie des développeurs de l'équipe (anciens ou actuels) qui ont joué le jeu de la borne photo Pixiway mise à disposition : - -![M6Web @PHPTour 2014](https://cdn.pixiway.com/p/h/p/ltm/7a9d9fe51bd81cdbe396e46740f53a3ede204e47.gif) - -#Conclusion - -L'Afup a encore réalisé un boulot considérable cette année, pour accoucher sans aucun doute, du meilleur PHP Tour jamais fait. -Bravo à toute la team pour l'organisation sans faille, et aux autres speakers pour la qualité de leurs talks. diff --git a/_posts/2014-08-05-verifier-la-coherence-du-code-d-un-projet-symfony2-avec-coke.md b/_posts/2014-08-05-verifier-la-coherence-du-code-d-un-projet-symfony2-avec-coke.md deleted file mode 100644 index f4dca2cc8..000000000 --- a/_posts/2014-08-05-verifier-la-coherence-du-code-d-un-projet-symfony2-avec-coke.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: post -title: "Contrôlez facilement votre cohérence de code sur votre projet Symfony2 avec coke" -description: "Voici comment facilement et rapidement mettre en place un système de contrôle de la cohérence du code d'un projet Symfony2 avec coke" -author: m_randy -category: -tags: [code sniffing, coke, Symfony2] -feature-img: "images/posts/coke-et-symfony2/feature.png" -thumbnail: "images/posts/coke-et-symfony2/feature.png" -comments: true ---- - -Pour qu'un projet persiste dans le temps, il est important que le style de codage soit le même. Et quand vous vous reposez sur des outils, autant faire en sorte que le style de codage retenu soit proche, si ce n'est le même, que les briques que vous utilisez. Et dans le cas où vous utilisez un framework, c'est d'autant plus important. - -Avec Symfony2, c'est d'autant plus facile que l'architecture des bundles est très marquée, et qu'un coding guide est publié. - -Ça, c'est pour la théorie, mais en pratique, si ce n'est pas super simple, automatique, une somme de toutes petites erreurs apparaissent et le sentiment d'abandon s'installe rapidement. - -## Coke - -Il y a un peu plus d'un an, chez M6Web, nous avons développé [coke](/coke-pour-bien-sniffer-son-code) pour configurer simplement l'exécution de PHP_CodeSniffer. - -Depuis quelques mois, il est possible [d'installer coke via Composer](https://github.com/BedrockStreaming/Coke/pull/4) : - -{% highlight json %} -{ - "require": { - "m6web/coke": "~1.2" - } -} -{% endhighlight %} - -L'avantage de passer par Composer, c'est que coke va lui-même installer PHP_CodeSniffer en tant que dépendance Composer (dans le dossier `vendor`), permettant de ne pas avoir à suivre la [fastidieuse procédure d'installation via PEAR](https://pear.php.net/manual/en/guide.users.commandline.installing.php). - -## Installer un coding standard via Composer - -Lorsque nous voulons utiliser un coding standard qui n'est pas inclus par défaut avec PHP_CodeSniffer, il est possible de l'installer en utilisant Composer - -## Symfony2-coding-standard - -Chez M6Web, nous maintenons le standard [Symfony2-coding-standard](https://github.com/BedrockStreaming/Symfony2-coding-standard) qui permet de valider que le code d'un projet respecte les [coding standard de Symfony2](https://symfony.com/doc/current/contributing/code/standards.html). - -Pour rendre à César ce qui appartient à César, nous avons récupéré la base du standard telle que créé par [opensky](https://github.com/opensky). - -Si nous avons décidé de le forker, c'est que la structure ne correspondait pas à ce qui est nécessaire pour une installation de ce standard via Composer - -## Procédure complète, pas-à-pas - -Créer le fichier `composer.json` suivant : - -{% highlight json %} -{ - "require-dev": { - "m6web/coke" : "~1.2", - "m6web/symfony2-coding-standard" : "~1.1", - } -} -{% endhighlight %} - -Installer les dépendances Composer : - -{% highlight bash %} -composer install -{% endhighlight %} - -Créer le fichier `.coke` suivant : - -{% highlight bash %} -# Standard used by PHP CodeSniffer (required) -standard=vendor/m6web/symfony2-coding-standard/Symfony2 -{% endhighlight %} - -Il est désormais possible d'appeler la commande suivante pour valider le style de codage de votre projet - -{% highlight bash %} -./vendor/bin/coke -{% endhighlight %} - -## Conclusion - -Avec cette technique, il est très simple de valider le style de codage d'un projet. Du coup, plus d'excuse pour ne pas le faire ;) - -## Bonus - -L'idéal, pour ne jamais commiter un code ne respectant pas les conventions de codage, est d'utiliser les [hooks de commit](https://git-scm.com/book/en/Customizing-Git-Git-Hooks) pour que cette vérification soit faite automatiquement. - -La manière la plus simple de le faire est d'ajouter la ligne `./vendor/bin/coke` dans le fichier `.git/hooks/pre-commit`, mais cette méthode a le défaut de vérifier tout le projet, et pas uniquement le code modifié et à commiter. - -Pour aller plus loin, vous pouvez vous inspirer du [script suivant](https://gist.github.com/JJK801/5867810) qui ne lance coke que sur les fichiers dans le "staging" de Git (les fichiers à commiter). - - diff --git a/_posts/2014-09-24-tests-e2e-application-angularjs-protractor.md b/_posts/2014-09-24-tests-e2e-application-angularjs-protractor.md deleted file mode 100644 index 02976b030..000000000 --- a/_posts/2014-09-24-tests-e2e-application-angularjs-protractor.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -layout: post -title: "Tests E2E sur son application AngularJS avec Protractor" -description: "Comment mettre en place des tests E2E sur son application AngularJS : outils et problématiques." -author: team_cytron -category: -tags: [qualite, tests, javascript, angular, protractor, cytron] -feature-img: "images/posts/cytron/protractor.jpg" -thumbnail: "images/posts/cytron/protractor.jpg" -comments: true -permalink: tests-e2e-application-angularjs-protractor.html ---- - -Familier des tests fonctionnels avec Behat et Atoum pour des applications majoritairement PHP, nous l’étions beaucoup moins avec les tests end-to-end pour des applications pures Javascript, qui plus est, sous [AngularJS](https://angularjs.org/). Les tests end-to-end ou tests e2e ne sont autres que des tests fonctionnels dans la domaine du Javascript. L’objectif de cet article est de montrer le cheminement que nous avons emprunté pour mettre en place ces tests sur une de nos applications et pour gérer les difficultés qui en ont découlé. - -### Le contexte - -Il s’agit d’une application web présentant des écrans différents à l’utilisateur en fonction des données contenues dans un fichier distant requêté à intervalle régulier court (quelques secondes). L’utilisateur est invité ou non à agir avec les vues, principalement en appuyant sur des boutons, qui changent l’état interne de l’application et peut, a posteriori, influer sur les écrans suivants. - -### Mettre en place Protractor - -La première étape consiste à installer [Protractor](https://angular.github.io/protractor/#/), framework de tests e2e dédié à AngularJS et utilisant Node.js. Si vous utilisez Grunt pour gérer les tâches de build de votre projet, il suffit d'exécuter la commande : -{% highlight bash %} -npm install grunt-protractor-runner --save-dev -{% endhighlight %} - -Puis on crée le fichier de configuration dans le projet : -{% highlight js %} -/* protractor-local.conf.js */ -exports.config = { - specs: ['app/**/*.e2e.js'], - baseUrl: 'https://localhost:9000/' -}; -{% endhighlight %} - -Tous les tests e2e de notre application sont écrits dans des fichiers javascript dont le nom est suffixé par `.e2e.js`. Nous avons en effet fait le choix d'une architecture modulaire se retrouvant dans l'organisation des dossiers de notre projet : les fichiers de tests e2e se trouvent dans les mêmes répertoires que les controllers auxquels ils sont rattachés [^1]. - -### Un navigateur pour mes tests - -Pour exécuter ses tests dans les conditions réelles de son application, il faut un navigateur. Nous développons sur un serveur distant en SSH. Le seul navigateur utilisable est donc un browser headless, le plus connu et utilisé étant [PhantomJS](https://phantomjs.org/). Cependant, combiné à Protractor, ce dernier est particulièrement instable pour le moment et il n'est pas recommandé de l'utiliser. Nous optons donc pour Chrome (via le plugin chromedriver). Nécessitant une interface graphique, nous ne pourrons donc pas lancer nos tests sur le serveur de développement mais nous devrons le faire en local sur nos machines. - -{% highlight js %} -/* protractor-local.conf.js */ -exports.config = { - specs: ['app/**/*.e2e.js'], - baseUrl: 'https://localhost:9000/', - maxSessions: 1, - multiCapabilities: [ - { browserName: 'chrome' } - ] -}; -{% endhighlight %} -On installe les binaires nécessaires au lancement de Chrome via Protractor : - -{% highlight bash %} -./node_modules/grunt-protractor-runner/node_modules/.bin/webdriver-manager update -{% endhighlight %} - -Puis on ajoute les tâches Grunt : -{% highlight js %} -/* Gruntfile.js */ -grunt.initConfig({ - connect: { - dist: { - options: { - port: 9000, - hostname: 'localhost', - base: 'dist' - } - } - }, - protractor: { - local: { - options: { - configFile: "protractor-local.conf.js" - } - } - } -}); - -grunt.registerTask('test', [ - 'build', - 'connect:dist', - 'protractor:local' -]); -{% endhighlight %} - -### Intégration continue - -L'ensemble de nos projets joue automatiquement leurs tests sur un serveur Jenkins commun qui ne dispose pas de navigateurs graphiques. Nous aurions pu mettre en place au sein de notre infrastructure un serveur Selenium pour répondre à cette problèmatique. Mais les contraintes du projet ne nous autorisaient pas à y consacrer le temps nécessaire. Nous avons donc opté pour une solution tiers plus rapide à mettre en œuvre : [SauceLabs](https://saucelabs.com/), plateforme de tests hébergée dans le “cloud”. - -Une fois enregistré sur le site, on crée un nouveau fichier de configuration Protractor : - -{% highlight js %} -/* protractor-saucelabs.conf.js */ -exports.config = { - specs: ['app/**/*.e2e.js'], - baseUrl: 'https://localhost:9000/', - allScriptsTimeout: 30000, - jasmineNodeOpts: { - defaultTimeoutInterval: 60000 - }, - maxSessions: 1, - sauceUser: 'mySauceUser', - sauceKey: 'mySauceKey', - multiCapabilities: [ - { - browserName: 'chrome', - platform: 'Linux' - }, - { - browserName: 'firefox', - platform: 'Linux' - }, - { - browserName: 'safari', - platform: 'OS X 10.9' - }, - { - browserName: 'chrome', - platform: 'Windows 8.1' - } - ] -}; -{% endhighlight %} - -Notons que l'on peut lancer ses tests sur autant de couples OS/navigateurs que l'on souhaite en remplissant le tableau `multiCapabilities`. Le fichier de configuartion Grunt doit être adapté pour lancer *SauceConnect*, l’interface entre SauceLabs et l’application, avant le démarrage des tests : - -{% highlight js %} -/* Gruntfile.js */ -grunt.initConfig({ - connect: { - dist: { - options: { - port: 9000, - hostname: 'localhost', - base: 'dist' - } - } - }, - protractor: { - local: { - options: { - configFile: 'protractor-local.conf.js' - } - }, - saucelabs: { - options: { - configFile: 'protractor-saucelabs.conf.js' - } - } - }, - run: { - installsc: { - options: { - wait: true - }, - cmd: 'bash', - args: [ - '-c', - 'test -d sc-4.2-linux || (wget https://saucelabs.com/downloads/sc-4.2-linux.tar.gz && tar xvf sc-4.2-linux.tar.gz)' - ] - }, - sauceconnect: { - options: { - wait: false, - quiet: true, - ready: /Sauce Connect is up/ - }, - cmd: './sc-4.2-linux/bin/sc', - args: [ - '-u', - 'mySauceUser', - '-k', - 'mySauceKey' - ] - } - } -}); - - -grunt.registerTask('test-e2e', function (target) { - var tasks = [ - 'build', - 'connect:dist' - ]; - - if (target === 'local') { - tasks.push('protractor:local'); - } else { - tasks.push('run:installsc'); - tasks.push('run:sauceconnect'); - tasks.push('protractor:saucelabs'); - tasks.push('stop:sauceconnect'); - } - - grunt.task.run(tasks); -}); -{% endhighlight %} - -Avec cette configuration, nous lançons les tests en local sur notre machine avec la commande `grunt test-e2e:local` ou à distance sur SauceLabs avec `grunt test-e2e`. - -### Notre premier test - -Le premier test que nous avons écrit pour valider l’architecture est plutôt basique : - -{% highlight js %} -describe('Controller: MainCtrl', function () { - it('should work', function () { - browser.get(browser.baseUrl); - expect(true).toBe(true); - }) -}); -{% endhighlight %} - -On remarque que l’écriture d’un test e2e utilise, comme les tests unitaires, la syntaxe du framework [Jasmine](https://jasmine.github.io/) : un bloc `describe` regroupe une suite de tests définis dans des blocs `it`. Les variables de configuration définies dans les fichiers de configuration Protractor sont utilisables via la variable globale `browser`, variable qui nous permettra d’entretenir le lien entre nos tests et le code exécuté dans le navigateur. Pour mieux appréhender les étapes du processus et les erreurs qui se produisent, il est en effet très important de bien comprendre la séparation entre le code Javascript exécuté dans Node.js via Protractor, qui correspond au déroulement des tests, et le code Javascript de notre application qui lui est exécuté dans le browser et avec lequel on ne peut interagir depuis les tests que par certaines fonctions du framework (`element`, `executeScript`, `addMockModule`, etc.)[^2]. Ce sont deux univers d'exécution bien distincts. - -### Débugger avec Protractor - -Lorsque vous lancerez les tests en local, vous remarquerez que Chrome est réellement exécuté mais vous ne verrez pas grand chose car l’affichage est bien trop rapide. Il est possible de mettre des points d’arrêt dans ses tests pour y voir plus clair et pour, par exemple, consulter la console Javascript du navigateur. Pour cela, il faut utiliser la fonction `browser.debugger()` comme point d’arrêt et ajouter l’option `debug` dans la configuration Grunt : - -{% highlight js %} -/* Gruntfile.js */ -protractor: { - local: { - options: { - configFile: 'protractor-local.conf.js', - debug: true - } - } -} -{% endhighlight %} - -Pour passer d’un point d’arrêt à l’autre, on saisit `c` comme *continue*. Notez que cela ne fonctionnera pas si vous avez plus d'un navigateur dans le tableau `multiCapabilities` de votre configuration. - -On peut également ajouter l’option `--debug` à la commande `grunt test-e2e:local` pour afficher l’ensemble des requêtes lancées par l’application. - -### Mocker sa config - -Comme souvent dans les projets AngularJS, nous utilisons un module pour définir nos variables de configuration : - -{% highlight js %} -angular.module("config", []) - .constant("config", { - 'ma_variable': 'une_valeur' - }); -{% endhighlight %} - -Dans les tests e2e, on veut tout tester, en particulier les comportements qui diffèrent en fonction des valeurs de configuration. Comment faire puisque ce module est chargé une fois pour toute au lancement de l’application ? Protractor introduit la fonction `addMockModule` qui permet de bouchonner à la volée un module Angular. - -{% highlight js %} -it('comportement avec une autre valeur', function () { - browser.addMockModule('config', function () { - angular.module('config', []).constant('config', { - 'ma_variable': 'une_autre_valeur' - }); - }); - - // mon test - - browser.removeMockModule('config'); -}); -{% endhighlight %} - -### Mocker le service `$http` - -Dans notre application, un fichier externe est requêté régulièrement via le service Angular `$http`. AngularJS fournit déjà un mock complet de ce service nommé [`$httpBackend`](https://docs.angularjs.org/api/ngMock/service/$httpBackend). Pour y avoir accès, il faut ajouter la dépendance `angular-mocks` en `devDependencies` dans son fichier `bower.json` et inclure le fichier `bower_components/angular-mocks/angular-mocks.js` dans l’application en développement. `$httpBackend` permet de définir quels appels HTTP doivent être interceptés et quelles réponses doivent être renvoyées. - - -La difficulté dans notre cas réside dans le fait de pouvoir simuler le changement d’état du fichier distant dans un même test pour pouvoir vérifier les changements de vue qui en découlent. Il est possible de le faire directement via `$httpBackend` moyennant quelques acrobaties, mais la librairie [HttpBackend](https://github.com/nchaulet/httpbackend) simplifie grandement son utilisation pour ce type de tests [^3]. - -{% highlight js %} -var HttpBackend = require('httpbackend'); -var backend; - -describe('Test workflow', function() { - beforeEach(function() { - backend = new HttpBackend(browser); - }); - - afterEach(function() { - backend.clear(); - }); - - it('should display result when status is changed to RESULT', function(done) { - backend.whenJSONP(/status.json/).respond({status: 'initial'}); - - browser.get('/'); - - var result = element(by.binding('result')); - expect(result.getText()).toEqual('no result'); - - backend.whenJSONP(/status.json/).respond({status: 'result', percentage: 70}); - - browser.wait(function () { - return browser.getLocationAbsUrl().then(function (currentUrl) { - return currentUrl === 'https://localhost:9000/#/result'; - }); - }, 5000).then(function () { - expect(result.getText()).toEqual('70 %'); - done(); - }); - }); -}); -{% endhighlight %} - -### Oui, mais... -Protractor nous a été indispensable pour implémenter les tests fonctionnels sur notre application car son intégration avec AngularJS offre des possibilités que les autres frameworks de tests fonctionnels n'ont pas. On pense principalement à la synchronisation qui est mise en œuvre entre les tests et l'initialisation d'Angular dans la page ("wait for angular"). Cependant, avec le recul que l'on peut avoir sur notre projet : - -* il faut l'avouer, Protractor n'est pas aussi simple à mettre en place que [Behat](https://docs.behat.org/) par exemple, -* le debuggage est assez pénible car les messages d'erreur sont souvent peu verbeux et, c'est l'inconvénénient de tester du javascript avec du javascript, on ne sait pas toujours où se situe l'erreur (dans les tests ou dans le code applicatif ?), -* Protractor est parfois instable avec les webdrivers utilisés, ce qui nous oblige à relancer les tests manuellement, -* nos tests dans SauceLabs sont (très) lents, ce qui nous a contraint à la longue à réduire le nombre de navigateurs testés (améliorant par la même occasion la stabilité des tests). - -[^1]: [Scalable code organization in AngularJS](https://medium.com/opinionated-angularjs/scalable-code-organization-in-angularjs-9f01b594bf06) -[^2]: [Protractor API](https://angular.github.io/protractor/#/api) -[^3]: [Angular e2e tests, Mock your backend](https://blog.nchaulet.fr/test-angularjs-app-mock-backend/). diff --git a/_posts/2014-09-30-ameliorer-la-webperf-de-son-application-js-avec-gruntjs.md b/_posts/2014-09-30-ameliorer-la-webperf-de-son-application-js-avec-gruntjs.md deleted file mode 100644 index 4fed96d05..000000000 --- a/_posts/2014-09-30-ameliorer-la-webperf-de-son-application-js-avec-gruntjs.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -layout: post -title: "Améliorer la webperf de son application JS avec GruntJs" -description: "Comment automatiser les optimisations WebPerf sur son application AngularJS avec Grunt.Js" -author: k_dits -category: -tags: [webperf, angular, grunt, performance] -thumbnail: "images/posts/webperf.jpg" -feature-img: "images/posts/webperf.jpg" -comments: true ---- - -L’un des principaux problèmes que nous rencontrons sur nos développement chez M6Web est la tenue en charge. -Quand elles sont liées à des sites à fort trafic ou à une émission télé ([#effetcapital](https://twitter.com/search?q=effetcapital&src=typd)), nos applications doivent être conçues pour supporter des pics de charge plus ou moins importants. - -C’est une problématique qu’on croit souvent liée uniquement aux backends (scripts serveurs, bases de données etc), en oubliant souvent que le front-end est aussi, voir tout autant concerné. - -C’est notamment le cas pour une "[Single Page Application](https://fr.wikipedia.org/wiki/Application_web_monopage)" [Angular.Js](https://angularjs.org/) que nous développons en ce moment. - -L’objectif ici est d’avoir une application qui exécutera le moins de requêtes possible pour s’afficher, et qui ensuite sera quasiment autonome en ne faisant que le minimum de requêtes HTTP. Ceci afin de garantir, que lorsque quelqu’un charge l’application, l’expérience est quasi parfaite, même si entre temps, le CDN ou l'hébergement connaît une surcharge temporaire. - -L’autre avantage de diminuer le nombre d’appels HTTP, c’est aussi de limiter l’impact de la latence réseau, encore plus imposante dans notre cas, car notre cible est majoritairement mobile. - -Pour les applications "Client-Side", nous utilisons [Grunt.Js](https://gruntjs.com/) pour automatiser toutes les tâches de développement, build, déploiement … (Nul doute que la même chose existe avec [Gulp](https://gulpjs.com/) pour les plus Hipsters d’entre vous). Grunt regorge de plugins en tout genre pour automatiser énormément de choses coté WebPerf, commençons par le plus évident et le plus simple. - -P.S : Je passe volontairement l’[installation/initialisation de Grunt](https://gruntjs.com/getting-started) ainsi que de ses plugins. Le web regorgeant de ressources là dessus. - -### Minification HTML - -Afin de gagner quelques octets, nous allons minifier (suppression des espaces, retours charriot, et commentaires HTML) notre code HTML généré. -Pour ceci, nous utilisons le plugin [grunt-contrib-htmlmin](https://github.com/gruntjs/grunt-contrib-htmlmin). - -{% highlight js %} -options: { - collapseWhitespace: true, - collapseBooleanAttributes: true, - removeCommentsFromCDATA: true, - removeOptionalTags: true, - removeComments: true - } -{% endhighlight %} - -### Minification CSS - -Même chose au niveau des feuilles de styles avec [grunt-contrib-cssmin](https://github.com/gruntjs/grunt-contrib-cssmin). - -### Compression des images - -Afin d’éviter d’avoir des images « brutes » de taille trop importante, on utilise [grunt-contrib-imagemin](https://github.com/gruntjs/grunt-contrib-imagemin) pour compresser au build nos différentes images, afin de gagner quelques ko toujours précieux. - -### Inlining des images d’interface - -Dans notre cas, où nous souhaitons réduire le nombre de requêtes HTTP superflues, nous avons opté pour l’inlining des images dites d’interface (boutons d’actions, picto etc). - -Nous utilisons aussi le pré-compilateur CSS [Less](https://lesscss.org/), par simplicité et pour éviter le [DRY](https://fr.wikipedia.org/wiki/Ne_vous_r%C3%A9p%C3%A9tez_pas) CSS. -Nous avons donc un premier fichier `.less` qui va contenir toutes les images d’interface sous cette forme : -`@facelessImg: url('images/faceless.jpg’);` - -Le plugin Grunt [grunt-css-url-embed](https://github.com/mihhail-lapushkin/grunt-css-url-embed) sera configuré pour remplacer les urls présentes dans ce fichier par la version data-uri (=source de l’image encodée en base64). -Il est important de se concentrer uniquement sur les images « d’interface », car le poids des images sera ici augmenté d’environ 30% (à cause du base64). - -Dans notre CSS principale, on pourra ensuite mettre cette image en background d’une classe CSS : - -{% highlight css %} -.faceless { - background-image: @facelessImg; -} -{% endhighlight %} - -Et dans notre code HTML, on pourra placer l’image de la manière suivante : -`` - -Grâce à cet ajout, nous économiserons une requête HTTP pour chacune des images. - -### Versionning des assets - -Une autre bonne pratique est de versionner les assets en production. Cela signifie, donner un nom unique à chaque fichier statique (JS, CSS, image), ne changeant pas, tant que le fichier en question n’aura pas subi de modification, dans le but de pouvoir mettre un cache navigateur (Expire) et un cache CDN/Proxy Cache le plus long possible (Cache-control). -Nous passerons de `/images/info.jpg` à `/images/a21992d7.info.jpg` par exemple. - -Nous utilisons ici le plugin [grunt-rev](https://github.com/cbas/grunt-rev) (en combinaison avec [grunt-usemin](https://github.com/yeoman/grunt-usemin)), qui va d’abord versionner les assets ayant changés, et ensuite, mettre à jour les références vers les fichiers en question dans tous vos fichiers HTML, CSS, JS. - -### Concaténation des fichiers JS - -Directement dans le code HTML, toujours avec le plugin [grunt-usemin](https://github.com/yeoman/grunt-usemin), vous allez pouvoir mettre des commentaires HTML pour définir quels ensembles de fichiers devront être concaténés. -La bonne pratique est d’avoir un fichier app.js avec son code maison, un fichier vendor.js avec les librairies tierces, et potentiellement un fichier de config.js -Etant donné que dans notre cas, 99% du poids Js est concentré dans "Vendor", nous avons décidé de concaténer l’ensemble dans un seul fichier. - -{% highlight html %} - - - - - -…. - - - - - - - - - - - - -``` - -And automatically check your `composer.lock` againts vulnerabilities. Your build will fail if something wrong is detected. - -For example, with the recent [Guzzle](https://security.sensiolabs.org/database?package=guzzlehttp/guzzle) one : - -![guzzle](/images/posts/sf2-checker/checker.jpg) - -You can contribute to the [vulnerabilities database](https://github.com/FriendsOfPHP/security-advisories) and the [checker](https://github.com/sensiolabs/security-checker) via Github.com. diff --git a/_posts/2016-10-12-velocity-nyc-2016.md b/_posts/2016-10-12-velocity-nyc-2016.md deleted file mode 100644 index eac7d85ca..000000000 --- a/_posts/2016-10-12-velocity-nyc-2016.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -layout: post -title: "Retour sur la Velocity New York Conference 2016" -description: "Velocity New York 2016 - Performance, Scalabilité, Devops" -author: - name: Kenny Dits et Fabien de Saint pern - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [conference,velocity,webperf,devops] -image: - feature: posts/velocity2016/velocity_banner.jpg - credit: oreillyconf - creditlink: https://www.flickr.com/photos/oreillyconf/sets/72157670842287154/ -comments: true ---- - -Nous étions cette année à New York, à quelques blocs de Time Square, pour suivre l’édition New Yorkaise de la Velocity Conference 2016. -C’est une conférence que nous apprécions particulièrement et à laquelle nous nous rendons quasiment chaque année, soit dans son édition européenne (Berlin, Londres, Barcelone, et Amsterdam cette année en novembre), soit aux U.S. (précédemment Santa Clara, New York cette année, et San José l’année prochaine). -C’est l’occasion de suivre une conf de très haute qualité composée de 4 ou 5 tracks en parallèle, dédiée aux problématiques de performance et de scalabilité. -On remarque que d’année en année la conférence s’est réorientée autour du mouvement DevOps, alors qu’elle était précédemment beaucoup plus centrée sur la WebPerf (desktop et mobile). - -La conférence commence par l’Ignite (sorte de mini conférence dans la conférence), basée sur un format court (type Lightning Talk) de 5 minutes pour une présentation de 5 slides défilant automatiquement. On retiendra de cette première partie des talks intéressants exposant les tristes chiffres de la diversité dans la tech aux US, mais aussi une conférence très drôle de [@beldhalpern](https://twitter.com/bendhalpern) de [@ThePracticalDev](https://twitter.com/ThePracticalDev) sur des parodies des livres OReilly (voir le [O RLY Cover Generator](https://dev.to/rly)) : - - - - -L’ignite s’est fini sur le célèbre Ignite Karaoké où 16 volontaires se sont prêtés au jeu de cet exercice hilarant mais tellement difficile, consistant à improviser une conférence sur le sujet de son choix sur 5 slides inconnues de l’orateur et qui défilent automatiquement au bout de quelques secondes 😃. Ce qu’on fait aussi chez M6Web de temps en temps nommé [Karaoké Slideshow](/organiser-des-conferences-technique-en-interne) et que Kenny avait animé lors d’un Forum PHP ([voir la vidéo](https://www.youtube.com/watch?v=Ln12meWM1pE)). - -![O'Reilly Conferences sur Flickr](https://c8.staticflickr.com/9/8046/29856652295_153795f039_z.jpg) -[Crédit : Flickr](https://flic.kr/p/Muk9xa) - -Nous avons ensuite suivi deux jours de conférences dont les thèmes majeurs étaient : - -* Les Service Workers -* Les microservices -* Le monitoring -* HTTP2 -* La sécurité des apps -* Les détections d'anomalie -* Les ChatOps -* Le WebMobile, AMP et les PWA - -# ChatOps - -Un des sujets assez récurrent, notamment dans la mouvance DevOps est l’utilisation des ChatOps, sujet popularisé par Github (via [Hubot](https://hubot.github.com/)). -Cela consiste généralement en un bot ou une IA posée sur un outil de Chat type Slack, Flowdock ou Hipchat, permettant de simplifier la communication entre différentes équipes et les différents outils (ticketing, alerting, monitoring, état d’une machine, etc). Une démo de l’IA de Dynatrace à reconnaissance vocale à été faite, montrant comment par la voix, on pouvait recevoir dans l’outil de Chat les infos sur les incidents de la veille, créer les tickets de support etc. [Voir ici](https://dynatrace.com/meet-davis). Un peu gadget, mais rigolo. - -L’un des points à retenir, c’est que même si ces outils font partie de la « culture » DevOps, ce n’est pas l’ajout d’un de ces outils qui fera apparaître cette culture dans votre entreprise si vous ne l’avez pas. - -> Tools will not fix a broken culture - -![O'Reilly Conferences sur Flickr](https://c1.staticflickr.com/9/8053/29842348056_a46d176931_z.jpg) -[Crédit : Flickr](https://flic.kr/p/Mt4Qom) - -# Le WebMobile, AMP, et les PWA - -Plusieurs conférences avaient pour but de comparer ce que l’on pouvait obtenir de nos jours via du WebMobile versus ce que l’on a sur les apps natives. Le fossé s’est énormément rétréci et les WebApps ont désormais accès à la plupart des fonctionnalités présentes côté natif : - -* Notifications -* Ajout sur le Home Screen de l'icone -* Full Screen -* Orientation -* Gestion hors ligne -* ... - -Ce qui nous amène aux Progressive Web Apps : PWA - -Pete Lepage [@petele](https://twitter.com/petele) de chez Google nous a notamment présenté des projets open-source de Google pour mettre en place différentes politiques de cache via les « serviceWorkers » (voir https://developers.google.com/web/tools/service-worker-libraries/), ainsi que les futures api : Web Payments, Credential Management ... - -* Les [slides](goo.gl/0QcNQf). -* Exemple de la [PWA du Washington Post](https://wapo.com/pwa) - -Toujours sur la partie mobile, Malte Ubl ([@cramforce](https://twitter.com/cramforce)), core développeur de AMP, nous a présenté le futur de ce protocole de Google pour offrir des pages plus rapides pour la consultation de site média sur mobile. - -> AMP is a web component library, validator and caching layer for reliably fast web content at scale - -En commençant par un bilan d’AMP, 3000 PR + 200 contributeurs (au bout d’un an seulement !), Malte nous a expliqué qu’un site mobile très optimisé pouvait logiquement être plus performant qu’AMP. - -Arriveront prochainement sur AMP, le support des formulaires, des optimisations avancées d’images via le Google AMP Cache, des Service Workers pour AMP pour ne jamais télécharger AMP dans le « chemin critique » du chargement de la page. - -Un petit focus a aussi été fait sur les PWA et AMP avec `amp-install-serviceworker` qui est un Service Worker permettant d’installer la PWA après chargement de AMP, pour faire une upgrade transparente de AMP vers une PWA (Voir une démo ici [choumx.github.io/amp-pwa](https://choumx.github.io/amp-pwa)) - -> AMP : « Start Fast, Stay Fast » - -Nous avons aussi vu une conférence sur l’optimisation de la consommation des webApps en terme de CPU / temps de réponse, notamment via l’étude des capacités JS de chacun des devices/OS avec le benchmark JetStream Javascript. - -On découvre notamment que l’iPhone 7 a des capacités assez impressionnantes, contrairement à l'iPhone 5C, que le mode « économie d’énergie » ou encore une bonne insolation rendent les devices beaucoup moins performants. D’excellentes slides à voir ici : [hearne.me/2hot](https://hearne.me/2hot) - -# WebPerf - -Côté WebPerf, peu de grosses nouveautés, on retiendra [@nparashuram](https://twitter.com/nparashuram) qui nous a montré comment automatiser le “profiling” des ChromeDevTools dans Node.js via ChromeDriver ! - -Plus d’infos ici : [https://blog.nparashuram.com/2016/09/rise-of-web-workers-nationjs.html](https://blog.nparashuram.com/2016/09/rise-of-web-workers-nationjs.html) - -Tammy Everts ([@tameverts](https://twitter.com/tameverts) de Soasta) et Pat Meenan ([@patmeenan](https://twitter.com/patmeenan) de Google et créateur de WebPageTest) nous ont fait un gros retour basé sur toutes les métriques récoltées par Soasta mPulse (outils de Real User Monitoring en SAAS) afin de déterminer des corrélations entre les temps de chargement et d’autres métriques (taux de rebond, conversion, etc.) grâce à l’application de concept propre au Machine Learning sur une quantité énorme de data. Toujours intéressant. - -Slides ici : [https://conferences.oreilly.com/velocity/devops-web-performance-ny/public/schedule/detail/51082](https://conferences.oreilly.com/velocity/devops-web-performance-ny/public/schedule/detail/51082) - -![O'Reilly Conferences sur Flickr](https://c8.staticflickr.com/9/8322/29824346471_b189d1b8ab_z.jpg) -[Crédit : Flickr](https://flic.kr/p/Mrtz9c) - -Côté Single Page App, le Server Side Rendering est revenu à plusieurs reprises afin d’avoir des SPA performantes dont le premier rendu est généré côté serveur, ce que permet nativement React, et désormais Ember et Angular 2. Voir [notre article sur l’isomorphisme](/2014/12/04/isomorphic-single-page-app-parfaite-react-flux). - -Coté HTTP, on retiendra Hooman Beheshti qui nous a fait un retour d’expérience sur HTTP2. Après une explication des nouveautés du protocole (binary, single, long-lasting TCP connection, streams encapsulation, frames, bi-directional…), une comparaison avec HTTP 1 nous a été exposée. En conclusion, HTTP2 est complexe et la migration n'est pas une simple modification de paramètre. Bien que cette nouvelle version est légèrement plus rapide, en particulier sur un réseau lent (<1Mbps), le protocole supporte très mal les pertes de paquets ou les fortes congestions à cause de l’unique connexion (TCP slow start). La recommandation est de tester sur chaque site et d’optimiser ses pages selon la version d’HTTP utilisée. Une piste serait HTTP2 over UDP. - -Les [slides](https://www.slideshare.net/Fastly/http2-what-no-one-is-telling-you) - -# DevOps - -De nombreuses conférences avaient pour objectif d’aborder les bienfaits du DevOps et plus largement les bonnes pratiques liées au mouvement afin de gagner en qualité et fiabilité. - -On retiendra notamment la conférence de Cornelia Davis (DevOps: Who does what?) explicitant les différents rôles dans un SDLC (Software Development Life-Cycle) et leur répartition en équipe dans l’organisation. - -## Les rôles dans le SDLC : - -* **Architecte** : Ent Archi, Biz Analyst, Portfolio Mgmt -* **SCO** : Info sec -* **Infra** : Srv Build, Cap Plan, Network, Ops -* **Middleware/AppDev** : Middleware Eng, SW Arch, SW Dev, Client SW Dev, Svc Govern -* **Data** : Data Arch, DBA -* **Biz** : Prod Mgmt -* **Ent Apps** : DCTM (Documentum) Eng. - -## La répartition en équipe proposée : - -**Platform** (unique / transverse) : - -* **Middleware/AppDev** : Middleware Eng, Svc Govern -* **Infra** : Srv Build, Cap Plan, Network, Ops -* **SCO** : Info sec -* **Data** : DBA - -**Customer Facing App** (de 1 à n équipes) - -* **Middleware/AppDev** : SW Arch, SW Dev, Client SW Dev -* **Data** : Data Arch -* **Infra** : Cap Plan, Ops -* **Biz** : Prod Mgmt -* **Architecte** : Biz Analyst - -**Enablement** (unique / transverse) : - -* **Architecte** : Ent Archi, Portfolio Mgmt - -**DCTM** - Documentum (Enterprise Content Management Platform) (unique / transverse) : - -* **Infra** : Ops, Cap Plan -* **Ent Apps** : DCTM (Documentum) Eng. - -On notera notamment la présence d’Ops dans les équipes Customer Facing App et inversement de Middleware Eng dans l’équipe Platform. - -De même, la présence d’architectes transverses (enablement) permet de garder une architecture cohérente. (Pas de slides disponibles pour cette conférence) - -![O'Reilly Conferences sur Flickr](https://c8.staticflickr.com/9/8242/29281257423_6e74baae8e_z.jpg) -[Crédit : Flickr](https://flic.kr/p/LBu6FV) - -# Microservices - -La conférence de [@susanthesquark](https://twitter.com/susanthesquark), axée sur les microservices, rappelait quelques bonnes pratiques : - -* Architecture sans SPOF -* Ne pas laisser la dette technique s’accumuler -* Déploiement continu -* Travail en équipe entre Dev / PM / SRE -* Monitoring -* Procédures standard de gestion des incidents -* Post-mortem pour apprendre de ses erreurs… - -Les [slides](https://cdn.oreillystatic.com/en/assets/1/event/159/Mitigating%20sprawl%20with%20microservices%20and%20containerization%20Presentation.pdf) - -Concernant le monitoring des microservices, la conférence de Reshmi Krishna [@reshmi9k](https://twitter.com/reshmi9k) s’intéressait à l’analyse de la latence, inhérente à ce type d’architecture. La principale technique proposée est celle du suivi d’une requête de bout en bout, grâce notamment à l’outil Zipkin. De même, une gestion des timeouts globale (pour chaque requête pour tous les microservices) et dynamique (selon le contexte) permet de maîtriser les problèmes en cas de ralentissement d’un service en particulier. - -Les [slides](https://cdn.oreillystatic.com/en/assets/1/event/159/Distributed%20tracing_%20How%20to%20do%20latency%20analysis%20for%20microservices-based%20applications%20Presentation.ppt) - -# Sécurité - -Concernant la sécurité, la conférence de Kelly Lum [@aloria](https://twitter.com/aloria), passait en revue le minimun vital : - -* La sécurité doit être pensée dès la conception -* Permettre aux utilisateurs de reporter facilement des problèmes de sécurité et être à l’écoute des réseaux sociaux -* Toujours remercier les utilisateurs signalant les failles -* Avoir une équipe testant régulièrement la sécurité (Crack Team). -* En cas de failles de sécurité, après correction, toujours analyser les causes et apprendre de ses erreurs. - -Les [slides](https://cdn.oreillystatic.com/en/assets/1/event/159/Security%20at%20the%20speed%20of%20innovation_%20Defensive%20development%20for%20a%20fast-paced%20world%20Presentation.pdf) - -# Conclusion - -Vous pouvez retrouver la plupart des slides [ici](https://conferences.oreilly.com/velocity/devops-web-performance-ny/public/schedule/speakers). -et voir les vidéos de certaines conférences [ici](https://www.youtube.com/playlist?list=PL055Epbe6d5Zl1yShG26D2r2TzwDDoDfK). -ou [ici](https://www.oreilly.com/ideas/keynotes-from-velocity-new-york-2016). - -Les photos officielles de la conf sont [ici](https://www.flickr.com/photos/oreillyconf/albums/72157670842287154). diff --git a/_posts/2016-11-03-blendwebmix-6play-conference.md b/_posts/2016-11-03-blendwebmix-6play-conference.md deleted file mode 100644 index 2f6f536ea..000000000 --- a/_posts/2016-11-03-blendwebmix-6play-conference.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: post -title: "Enquête exclusive au coeur de la technique de 6play. Les slides." -description: "Plus d'un milliard de vidéos vues par an sur 6play - Enquête exclusive au coeur de la technique" -author: - name: Kenny Dits, Olivier Mansour, François Jomier - avatar: - email: - twitter: techM6Web - facebook: - github: -category: -tags: [conference] -feature-img: "images/posts/blend2016.jpg" -comments: true ---- - -Voici les slides de la conférence "Plus d'un milliard de vidéos vues par an sur 6play - Enquête exclusive au coeur de la technique" que nous avons donné le 2 novembre 2016 lors de la conférence Blend Web Mix à Lyon. - -[https://docs.google.com/presentation/d/1BZGvoiubQsIzVjH9Px22wQyYmkboXZjpiubX2UtkMA4/edit?usp=sharing](https://docs.google.com/presentation/d/1BZGvoiubQsIzVjH9Px22wQyYmkboXZjpiubX2UtkMA4/edit?usp=sharing) - -Nous étions ravis d'être sponsor de cet évenement. Merci encore à toute l'organisation. diff --git a/_posts/2016-11-24-une-donnee-presque-parfaite.md b/_posts/2016-11-24-une-donnee-presque-parfaite.md deleted file mode 100644 index 1c7a7f266..000000000 --- a/_posts/2016-11-24-une-donnee-presque-parfaite.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: conference - -title: "Une donnée presque parfaite sur 6play" -description: "La gestion de la mise à disposition des données sur 6play" -author: o_mansour -eventName: ForumPHP 2016 -eventUrl: https://event.afup.org/forum-php-2016/home-forum-php-2016/ -youtubeId: kSlYXpezjIQ - -category: -tags: [lyon, conference, elasticsearch, video] -thumbnail: "images/posts/conf-afup-viguier/6play.jpg" -color: rgb(42, 153, 213) -comments: true ---- - -[Benoit Viguier](https://twitter.com/b_viguier), prestataire de la société [Elao](https://www.elao.com) pour M6Web, a fait un retour d'expérience au Forum PHP de l'[AFUP](https://www.afup.org) sur l'architecture technique mise en place autour de la mise à disposition des données nécessaires à 6play. - - - -Les slides sont également [disponibles en PDF](https://b-viguier.github.io/downloads/talks/ForumPhp-Une-Donne%CC%81e-Presque-Parfaite.pdf). diff --git a/_posts/2017-01-31-get-brownfield-react-native-app-built-on-demand.md b/_posts/2017-01-31-get-brownfield-react-native-app-built-on-demand.md deleted file mode 100644 index a67323be5..000000000 --- a/_posts/2017-01-31-get-brownfield-react-native-app-built-on-demand.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -layout: post -title: "Get your brownfield React Native app built on demand" -description: "Get your brownfield React Native app built on demand" -author: k_dits -category: -tags: [mobile, github, ci, react-native] -feature-img: "images/posts/rn-brownfield/feature.jpg" -thumbnail: "images/posts/rn-brownfield/feature.jpg" -comments: true -language: en ---- -As you may know, at M6Web we decided to embrace [React Native](https://facebook.github.io/react-native/) a few months ago. -It’s a really exciting piece of software that adds a lot of value in the mobile development ecosystem. - -We already use it for a side project on a standalone app (not public yet, stay tuned!) to record table soccer games, that’s why, we (mostly [@ncuillery](https://twitter.com/ncuillery) 😏) decided to improve the upgrade process for apps made with the embedded generator. See Nicolas’ blog post on it: [Easier Upgrades with React Native](https://facebook.github.io/react-native/blog/2016/12/05/easier-upgrades.html). - -As a result, we wanted to start using React Native for our most popular app: 6Play ([6play iOS](https://itunes.apple.com/app/6play/id369692259?mt=8), [6play Android](https://play.google.com/store/apps/details?id=fr.m6.m6replay)). -So they would become what [Leland Richardson from Airbnb calls "brownfield" apps](https://facebook.github.io/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html#bridging-the-gap-using-react-native-in-existing-codebases). -6play is the [catchup TV](https://en.wikipedia.org/wiki/Video_on_demand#Catch-up_TV) platform for the French TV group M6. It offers live-streaming and full episodes for web, mobile and set-top box. Since the apps launched in 2016, there have been over 1.5 billion videos streamed. Our iOS (mostly Swift) and Android native applications, both important parts of the 6play platform, were exclusively developed externally until now. - -We wanted to use React Native to develop this project in-house and to take advantage of the benefits this hybrid technology could bring into our native apps. Here are just some of the benefits we found when using React Native: - -* **JavaScript development for mobile**. We have a lot of awesome JavaScript developers internally who develop the [6play website](https://www.6play.fr/) using React. We love React & Redux and want to mutualize this piece of technology we use on most of the frontends of the 6play platform. -* **Hot fixing with [CodePush](https://microsoft.github.io/code-push/)**. For our mobile apps, we want to accomplish the same continuous delivery process we have for the website. CodePush helps us to keep the same flexibility by allowing us to make deployments on a weekly or even daily basis. -* **Knowledge sharing**. We would like to be closer to the external development of our mobile apps, which was difficult without native knowledge and without any Android or Swift internal developers. React Native allows us to be part of that, we started working closely with the native team, sharing all developments between the two teams and bringing the best of both worlds (native and web) into the same project. -* **Code Sharing**. We also want to share major parts of the mobile code base between apps (Android & iOS). Today, the code bases for each app are completely separate and are managed by two separate teams. With React Native, we could have one common code base while being able to implement specificities for a particular platform if needed. We have also imagined some ways to share code with the 6play website. - -As we mentioned in a previous [blog post](/2016/06/20/preview-android-ios-react-native-on-github-pull-request), we use Github pull requests extensively in our development process, especially for testing (automatically and manually) each new commits before merging them into the `master` branch. - -In the past, we tried to use [Appetize](https://appetize.io/) to preview our apps in the browser. It was a first shot, but the functionality was quite limited: animations felt janky, some features wouldn’t work (in-app purchase, video with DRM, …), user identification was painful. We needed a better solution, and as a result we decided to rethink the way we develop the 6play apps. - -For the second iteration of our development process, we had a few simple requirements: - -* Test each pull request in conditions as close to the reality as possible, -* Use the same testing workflow for both iOS and Android apps. - -This post outlines our new mobile development process for the 6play apps. We’ll walk through how we manage the environment of a brownfield React Native app, our Git repository structure, our build and release workflows, and how we’ve created a CI environment that mirrors our production environment. - -# Mono Repository / Multi Repositories? - -The first thing we had to do, was to decide how we wanted to organize our Git repositories. - -For this, we looked into how [the AirBnb team work with their brownfield app](https://youtu.be/tUfgQtmG3R0?t=109). - -We soon realized we had two options here: - -**Multi-repositories**: - -* the iOS one -* the Android one -* and one for React Native code - -**Mono-repository**: - -* One giant repository that has iOS, Android, and React Native folders inside. - -Let’s take a look at the pros and cons of both solutions. - -## The Mono Repository - -``` -├── app-6play/ -│ ├── app-android/ -│ ├── app-ios/ -│ ├── react-native-views/ -``` - -At first glance, this solution seems like the Holy Grail: - -* (+) Everything is in the same place -* (+) If a modification needs both native & React Native developments, changes can be contained in a unique pull request. -* (-) Code, Documentation, Setup, are more difficult at the beginning (For example, how can we keep Git history of each existing repository?). -* (-) For our workflow, we need to have everyone working the same way, with the same git workflow, and the same review process. Remember that our native team is an external team (in Belgium), the Android & iOS teams are two different teams (located in the same place) and the React Native one is an internal team (in France). If we succeed, we’ll have synchronous development between teams, this is a really positive point, but it may be difficult to reach. -* (-) Android, iOS and Javascript CI environments are very different (different tools, different needs), so it is really complex to setup. - -Ultimately, the initial cost of setup and maintenance outweighed the benefits of a mono-repository. - -## The Multi Repositories - -``` -├── app-android/ -├── app-ios/ -├── react-native-views/ -``` - -* (+) Each team could have its own Git workflow, branching model, review process, -* (+) Each platform has its own CI, code conventions, -* (-) Building the native apps including the React Native bundle is complicated, -* (-) Three pull requests (one on each repository) are needed if the functionality includes a native bridge and React Native development. - -Neither approach was perfect. So we decided to choose the safest one, and create multiple repositories. Also, this choice doesn’t forbid any change of direction toward the mono repository in the future... The reverse seems much more complicated. - -# Development workflow - -Each native developer is now forced to have the `react-native-views` to be able to work on the native app. -You need to know that the native apps need `node_modules` dependencies of the React Native project, because they also contain the native part of React Native, and maybe some native code for React Native 3rd party you use. -So, we will need to clone the native app and the React Native repository. - -## For Android - -{% highlight bash %} -git clone app-android -git clone react-native-views -{% endhighlight %} - -So we will have two sibling folders: - -``` -├── app-android/ -├── react-native-views/ -``` - -We decided to use symlink to have a cleaner structure (and that will make the CI configuration easy later, see Continuous Integration), so the setup for the Android project will look like this: - -{% highlight bash %} -cd app-android -ln -s ../react-native-views ./react-native-views -cd ../react-native-views -npm install -{% endhighlight %} - -``` -├── app-android/ -│ ├── react-native-views -> ../react-native-views -├── react-native-views/ -│ ├── node_modules/ -│ ├── package.json -``` - -## For iOS - -Similar steps to the Android process, but it seems that Xcode has difficulty following package with a symlink … so we have to be a little smarter: - -{% highlight bash %} -git clone app-ios -git clone react-native-views - -cd app-ios -mkdir -p react-native-views/node_modules -cd ../react-native-views -ln -s ../app-ios/react-native-views/node_modules ./node_modules -npm install -{% endhighlight %} - -With this method, the `node_modules` files will be written in the symlink. So those files will be located in the source of the symlink, the `app-ios/react-native-views/node_modules` directory (This is pretty twisted, we had to admit). - -``` -├── app-ios/ -│ ├── react-native-views/ -│ │ ├── node_modules/ -├── react-native-views/ -│ ├── node_modules -> ../app-ios/react-native-views/node_modules -│ ├── package.json -``` - -## React Native - -Now we can choose: JavaScript developers are able to develop on any native app with the React Native `packager` (`npm start` in the `react-native-views` directory) and native developers can develop either with the `packager` started or with a pre-built React Native bundle (if their developments don’t concern React Native) by switching a Scheme (iOS) or a flavour (Android). - -# Continuous integration - -The next step was to find a way to improve the mobile development workflow. -During our research, we found a SAAS tool named [buddybuild](https://www.buddybuild.com) that’s able to build the iOS & Android apps on each pull request. The setup for the native apps (before the React Native integration) or the React Native side project was really straightforward. It just magically works! - -With the 3 Git repositories of our brownfield apps, it’s a bit more complicated than that. For this, buddybuild provides two useful hooks during the CI process. We just have to add a shell file in the repository: - -* `buddybuild_postclone.sh`: This is the hook that happens just after the cloning of the current repository by buddybuild -* `buddybuild_prebuild.sh`: This hook is called after postclone and after buddybuild gets all dependencies (npm, Pod, Gradle …), but just before the build starts - -To allow our Product Owners to test the app’s functionality, whether it's related to React Native or not, we’d need: - -* An iOS build on each pull request on the iOS repository -* An Android build on each pull request on the Android repository -* An iOS & Android build on each pull request on the React Native repository - -To meet the specific needs of our app development, we required: - -* For iOS & Android, we need a way to include the React Native code which lies in another repository. -* For the React Native repository, we need a way to build the iOS & Android apps which lie in other repositories as well, and including the React Native code in it. -* Our iOS and Android apps up-to-date with both the master branch of the native app, and the master branch of the React Native repository. -* If a feature needs modifications on both the native code and the React Native code (multiple pull requests, one on each concerned repositories), we want an app synchronized with all repositories. - -So let’s dig in these 4 points. - -## Build the iOS & Android apps including the React Native bundle - -The key here is to clone the React Native repository in the `postclone` buddybuild hook and reproduce the directory structure we have in development mode. - -### for iOS - -buddybuild_postclone.sh: - -{% highlight bash %} -git clone react-native-views - -# Create the symbolic link of the package.json at the root to make buddybuild triggering the `npm install` -ln -s react-native-views/package.json package.json -# Make Xcode able to access to the node dependencies -ln -s react-native-views/node_modules node_modules -{% endhighlight %} - -buddybuild_prebuild.sh: - -{% highlight bash %} -# export React Native bundle: -node_modules/.bin/react-native bundle --platform ios --entry-file index.ios.js --bundle-output ..//main.ios.jsbundle --dev false -{% endhighlight %} - -``` -├── buddybuild workspace/ (app-ios inside) -│ ├── react-native-views/ -│ │ ├── package.json -│ │ ├── node_modules/ -│ ├── package.json -> react-native-views/package.json -│ ├── node_modules -> react-native-views/node_modules -``` - -### for Android - -buddybuild_postclone.sh: - -{% highlight bash %} -git clone react-native-views - -# Create the symbolic link of the package.json at the root to make buddybuild triggering the `npm install` -ln -s react-native-views/package.json package.json -# When buddybuild will run `npm install`, the node dependencies will be at the right place -ln -s react-native-views/node_modules node_modules -{% endhighlight %} - -buddybuild_prebuild.sh: - -{% highlight bash %} -# export React Native bundle: -node_modules/.bin/react-native bundle --platform android --entry-file index.android.js --bundle-output ..//main.android.jsbundle --dev false -{% endhighlight %} - -``` -├── buddybuild workspace/ (app-android inside) -│ ├── react-native-views/ -│ │ ├── package.json -│ │ ├── node_modules/ -│ ├── package.json -> react-native-views/package.json -│ ├── node_modules -> react-native-views/node_modules -``` - -The only thing you have to do in the buddybuild dashboard is to create the app for each platform and activate the build on pull request only (see screenshot below). Buddybuild will automatically trigger an iOS & Android build on each pull request for the native repositories. - -![buddybuild branch configuration](/images/posts/rn-brownfield/buddybuild-branch.png) - -## Build the iOS & Android apps on each pull request from the React Native repository - -Now, we’d like to easily test each `react-native-views` pull request on both iOS and Android apps. - -For that purpose, we used the buddybuild hook again. Here is the `buddybuild_postclone.sh`: - -{% highlight bash %} -# Create a react-native-views folder -mkdir react-native-views -# Move everything in it -mv * react-native-views - -# The postclone hook is ran by buddybuild for both iOS and Android builds. We distinguish the platform here, thanks to the env variable BUDDYBUILD_APP_ID (set by buddybuild).. -if [ "$BUDDYBUILD_APP_ID" = "" ]; then -git clone app-android -cd app-android -else -git clone app-ios -cd app-ios -fi - -# Move the native app to the root of the workspace -mv * .. -cd .. - -# Create the future node_modules location folder -mkdir -p react-native-views/node_modules -# Create the symbolic link for the app to be able to found the node_modules at the good place -ln -s react-native-views/node_modules node_modules -# Create the symbolic link of the package.json at the root to make buddybuild triggering the `npm install` -ln -s react-native-views/package.json package.json -{% endhighlight %} - -For iOS, you’ll have: - -``` -├── buddybuild workspace/ (app-ios inside) -│ ├── react-native-views/ -│ │ ├── package.json -│ │ ├── node_modules/ -│ ├── package.json -> react-native-views/package.json -│ ├── node_modules -> react-native-views/node_modules -``` - -For Android, you’ll have: - -``` -├── buddybuild workspace/ (app-android inside) -│ ├── react-native-views/ -│ │ ├── package.json -│ │ ├── node_modules/ -│ ├── package.json -> react-native-views/package.json -│ ├── node_modules -> react-native-views/node_modules -``` - -By doing that, buddybuild will automatically install the npm dependencies, then launch the same `prebuild` hook as the native repository to build the React Native bundle. - -Using buddybuild, you can create the app for each platform, and trigger new builds only when pull requests are opened, or when commits are added to existing pull requests. Buddybuild also builds both apps when React Native pull requests are opened as well. - -## When master of React Native change, update the master iOS & Android apps - -Buddybuild makes it very easy to trigger a build programmatically via the API. We also use Jenkins for unit tests and lint, so we have a job triggered every time a push is made on the `master` branch of `react-native-views`. We have reused this job and append the following: - -{% highlight bash %} -# Our credentials -ACCESS_TOKEN_BB= -APP_ID_BB_IOS= -APP_ID_BB_ANDROID= - -# Build iOS -curl -X POST -H 'Authorization: Bearer '$ACCESS_TOKEN_BB” -d 'branch=master’ 'https://api.buddybuild.com/v1/apps/'$APP_ID_BB_IOS'/build' - -# Build Android -curl -X POST -H 'Authorization: Bearer '$ACCESS_TOKEN_BB” -d 'branch=master’ 'https://api.buddybuild.com/v1/apps/'$APP_ID_BB_ANDROID'/build' -{% endhighlight %} - -Now, you can activate the `master` build on the native iOS & Android buddybuild build, and you’ll have those apps up-to-date with the master branch. - -![buddybuild master configuration](/images/posts/rn-brownfield/buddybuild-master.png) - -## Cross platform feature (both native & React Native) - -At this point, this is not enough, because if you develop a feature that needs native and React Native modifications, you will not have the corresponding app before merging everything. - -We have decided here to add a rule: for a “cross platform feature” (like a bridge for a native component for example), we have to define the same name for the branches in each repositories. - -A bridge for a native component (the authentication bridge as an example) would have three Git branches with the same name, and three pull requests (one on each repository). - -By following this convention, we only have to checkout that branch when we clone the external repository in our `postclone` hooks: - -{% highlight bash %} -{ - # Detect with the env variable BUDDYBUILD_BRANCH (given by buddybuild) the branch we are on. - echo "Git checkout branch: $BUDDYBUILD_BRANCH" - git checkout $BUDDYBUILD_BRANCH -} || { - echo "Git default branch: master" - git checkout master # if master is the name of your default branch -} -{% endhighlight %} - -We do that branch name checking on the three repositories. This way, the four buddybuild projects (app-ios, app-android, react-native-views-ios, and react-native-views-android) can build native applications with modification on both sides. - -# Conclusion - -Thanks to React Native and buddybuild, we now have a complete workflow as powerful as we have on the website. Being able to review either React Native or native code, and testing a real app before the code lands on the `master` branch is a big improvement for code quality and a huge step forward towards more agility. - -Big up to [Tapptic Team](https://tapptic.com/), M6Web React Native team for this work, to the buddybuild support team for the help when needed. - -Special thanks to Nicolas Cuillery and Alysha for their proofreading! diff --git a/_posts/2017-02-20-retour-de-paris-video-tech.md b/_posts/2017-02-20-retour-de-paris-video-tech.md deleted file mode 100644 index 310f58a15..000000000 --- a/_posts/2017-02-20-retour-de-paris-video-tech.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: post -title: "L'équipe Player de 6play.fr au Paris Video Tech" -description: "Paris Video Tech : La plus grande rencontre des ingénieurs de la vidéo à Paris" -author: f_vieudrin -category: -tags: [video, ott, react, dash, hls, mse, cmaf, 6play, html5] -feature-img: "images/posts/retour-de-paris-video-tech/banner-paris-video-tech.jpg" -comments: true -language: fr ---- - -![Logo Paris Video Tech](/images/posts/retour-de-paris-video-tech/logo-paris-video-tech.png) - -# Présentation du Paris Video Tech -Mercredi 1er février avait lieu la [troisième édition du Paris Video Tech](https://parisvideotech.com/pvt-3-a-react-based-mse-player-cmaf-demystified-and-roland-garros-360/), un meetup orienté autour de tous les sujets techniques de la vidéo : players HTML5, formats, encodage, distribution, publicité, ... - -L'équipe Player de M6 Web (Frédéric Vieudrin, Nicolas Afresne, Malik Baba Aïssa et Vincent Valot) présentait le nouveau player HTML5 de 6play.fr : un player MSE multi-formats, développé entièrement en React, le framework JS qu'on ne présente plus et qui fait le succès du nouveau 6play.fr depuis 2015. - -La rencontre se déroulait dans les locaux de France Télévision à Paris et proposait trois talks : - -* **6play : un player MSE en React** *par l'équipe Player de M6Web* -* **CMAF Démystifié** *par [Cyril Concolato](https://twitter.com/cconcolato)* -* **Retour d'Expérience de Roland Garros 360** *par l'équipe innovation de France Télévision* - - -![Logo Team Tube](/images/posts/retour-de-paris-video-tech/logo-team-tube.png) - -# 6play : un player MSE en React - - -### Présentation de 6play.fr -Dans la première partie, nous avons présenté le contexte technique de [6play.fr](https://www.6play.fr), autour de [React](https://facebook.github.io/react/), ainsi que les chiffres clés du site. - -Après un rappel de l'historique des players du site de Replay des [chaînes du Groupe M6](https://www.groupem6.fr/le-groupe/activites/antenne/), nous avons présenté les enjeux de la refonte de notre précédent player et évoqué nos contraintes. - -![Slide Historique Techno Player](/images/posts/retour-de-paris-video-tech/slide-techno-player.png) - - - -### Architecture du player en React / Redux - -![Logo React](/images/posts/retour-de-paris-video-tech/logo-react.png) -![Logo Redux](/images/posts/retour-de-paris-video-tech/logo-redux.png) - -En octobre 2015 sortait [le nouveau 6play.fr](https://www.6play.fr), une [Single Page App développée en React-Redux et Isomorphique](/isomorphic-single-page-app-parfaite-react-flux/). Le succès de cette refonte nous a poussé à étudier le refonte du player 6play sur la même stack technique, historiquement en Video.js. - -En complément de l'approche composant proposée par React, [Redux](https://redux.js.org/) nous a apporté la solution à la gestion de l'état du player dans le temps. En effet, son fonctionnement par événements et actions était parfaitement adapté aux événements de la balise `