1 / 40

First Indico Workshop

First Indico Workshop. Front-end. 27-29 May 2013 CERN. Alejandro Avilés. Indico Front-End. The timeline. Indico Stone Age. Indico Modern Ages. Indico Space Age. 2002. 2007. 2013. 201X. Stone Age. Indico 0.1. The path of the Spartan. HTML. Indico zero day.

noel
Download Presentation

First Indico Workshop

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. First Indico Workshop Front-end 27-29 May 2013 CERN Alejandro Avilés

  2. Indico Front-End The timeline Indico Stone Age Indico Modern Ages Indico Space Age 2002 2007 2013 201X

  3. Stone Age

  4. Indico 0.1 The path of the Spartan • HTML

  5. Indico zero day HTML is cool but not alone • The pains: • > Style, layout and content altogether! • > No client-side scripting • > No Asynchronous queries These parties tend to end up very badly Sluggishness and lack of flexibility

  6. A bit latter…

  7. Indico later – Javascript Before jQuerywas cool… • Prototype.js framework • > Extends the DOM and Javascript core • > Supports AJAX and classes • Presentation.js • > Adds some Javascript bindings: $E, $D, $L… • > VERY hard to debug • You can still find remnants of this in the current source code

  8. Modern Ages

  9. Indico NOW Since 2007, the core of Indico has been improved LevelUP

  10. Indico NOW – Styling Styling more and better with CSS3 • More beautiful styling: • > Round borders • > Shadows • > Gradients • > …

  11. Indico NOW – Styling Round borders with CSS3

  12. Indico NOW – Styling Gradients with CSS3 • background-color: #1a82f7; • background: url(images/linear_bg_2.png); • background-repeat: repeat-x; • background: -moz-linear-gradient(top, #2F2727, #1a82f7); • background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  13. Indico NOW – Styling Icomoon.io Ultimate • Font-based icons • > Vectorized icons • > Light-weight • Tons of icons available (1000+) • > Free & premium icon packages

  14. Indico NOW – Styling And also organizing CSS files • A single CSS file is no good! • > Default.css(~9000 LOC) • Per topic CSS files: • > buttons.css • > toolbars.css • > tables.css • > …

  15. Indico Now – Javascript Javascript? Piece of cake!

  16. Indico Now – Javascript So, why jQuery? • Makes working with Javascript a breeze: • > DOM traversal and manipulation • > Event handling • > Ajax • > Animations • It’s VERY easy to extend!

  17. Indico Now – Javascript Showing off jQuery sweetness • .html • .js <button class=“continue”></button> $("button.continue”).html(“Next Step...”)

  18. Indico Now – Javascript Showing off jQuery sweetness • .html • .js <div id=“banner-message”> <button class=“continue”></button> </div> varhiddenBox = $(“#banner-message”); $(“#button-container button”).on(“click”, function(event) { hiddenBox.show(); });

  19. Indico Now – Javascript Showing off jQuery sweetness • .js $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function( data ) { $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" ); } });

  20. IndicoNOw– Javascript Moving away from Prototype.js • Functional programming support: • > Collections • > Functions to work with objects • Also for client-side templating: • > Useful when we need to append HTML with scripts • Doesn’t fiddle with built-in Javascript objects Take that Prototype.js!

  21. Space Age

  22. Possible Styling Empowering CSS3 with preprocessors • Maintaining robust CSS rules • is becoming difficult • Available solutions: • > LESS • > SASS http://lesscss.org http://sass-lang.com/

  23. Possible Styling What do we get with LESS or SASS? • Nifty tools! • > Nested rules • > Variables • > Mixins • > Inheritance

  24. Possible Styling What do we get with LESS or SASS?

  25. Possible Styling What do we get with LESS or SASS? • Nifty tools! • > Nested rules • > Variables • > Mixins • > Inheritance

  26. Possible Styling What do we get with LESS or SASS?

  27. Possible Styling What do we get with LESS or SASS? • Nifty tools! • > Nested rules • > Variables • > Mixins • > Inheritance

  28. Possible Styling What do we get with LESS or SASS?

  29. Possible Styling What do we get with LESS or SASS? • Nifty tools! • > Nested rules • > Variables • > Mixins • > Inheritance

  30. Possible Styling What do we get with LESS or SASS?

  31. Possible Styling LESS vs SASS • They both offer pretty much the same, but… • > SASS has Compass • > SASS can be bundled with Indico • (Python implementation) • Want to know more? Read this: • > Review: http://css-tricks.com/sass-vs-less/ • > Comparison: https://gist.github.com/cloudhead/1591333

  32. Possible Styling Compass: A CSS authoring framework • Built on top of SASS • Powerful mixins • > Forget about browser suffixes! • Scaffolding • > Blueprint (similar to Twitter Bootstrap) • Review: • http://www.zivtech.com/blog/css-suckers-introduction-sass-compass

  33. Possible Styling Compass example #border-radius { @include border-radius(25px); } #border-radius { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; }

  34. Possible Styling Blueprint / Twitter Bootstrap • Frameworks to start looking good • from scratch! • They provide: • > Scaffolding • > Base CSS • > Components

  35. Yet another Javascript Boost? Lots of libraries out there for making life easier • Backbone.js • > Model-View-Controller framework • Angular.js • > Embedding views in HTML • But, maybe, before that: • > Finish migration to jQuery And beware of jQuery 2.0!

  36. Yet another Javascript Boost? • Gives structure to web applications by providing: • > Models • > Collections • > Views • Works over Underscore.js

  37. Yet another Javascript Boost? • HTML enhanced for web apps! • Helps making dynamic webpages by using views • > No need to use server-side templating <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li>

  38. Yet another Javascript Boost? Ender.jit.su • Javascript dependencies manager: • > Build only what you need when you need it • > NPM-like package manager for the browser “search, install, manage, and compile front-end JavaScript packages and their dependencies for the web”

  39. Thank you for your time! Questions? Follow up the discussion http://indico-software.org/wiki/Dev/INTREPID/13

  40. Alejandro Avilés http://github.com/omegak @OmeGak

More Related