First indico workshop
Download
1 / 40

First Indico Workshop - PowerPoint PPT Presentation


  • 125 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'First Indico Workshop' - noel


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
First indico workshop

First Indico Workshop

Front-end

27-29 May 2013 CERN

Alejandro Avilés


Indico front end
Indico Front-End

The timeline

Indico

Stone Age

Indico

Modern Ages

Indico

Space Age

2002

2007

2013

201X



Indico 0 1
Indico 0.1

The path of the Spartan

  • HTML


Indico zero day
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



Indico later javascript
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


Modern ages
Modern Ages


Indico now
Indico NOW

Since 2007, the core of Indico has been improved

LevelUP


Indico now styling
Indico NOW – Styling

Styling more and better with CSS3

  • More beautiful styling:

  • > Round borders

  • > Shadows

  • > Gradients

  • > …


Indico now styling1
Indico NOW – Styling

Round borders with CSS3


Indico now styling2
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));


Indico now styling3
Indico NOW – Styling

Icomoon.io Ultimate

  • Font-based icons

  • > Vectorized icons

  • > Light-weight

  • Tons of icons available (1000+)

  • > Free & premium icon packages


Indico now styling4
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

  • > …


Indico now javascript
Indico Now – Javascript

Javascript? Piece of cake!


Indico now javascript1
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!


Indico now javascript2
Indico Now – Javascript

Showing off jQuery sweetness

  • .html

  • .js

<button class=“continue”></button>

$("button.continue”).html(“Next Step...”)


Indico now javascript3
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();

});


Indico now javascript4
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" );

}

});


Indico now javascript5
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!



Possible styling
Possible Styling

Empowering CSS3 with preprocessors

  • Maintaining robust CSS rules

  • is becoming difficult

  • Available solutions:

  • > LESS

  • > SASS

http://lesscss.org

http://sass-lang.com/


Possible styling1
Possible Styling

What do we get with LESS or SASS?

  • Nifty tools!

  • > Nested rules

  • > Variables

  • > Mixins

  • > Inheritance


Possible styling2
Possible Styling

What do we get with LESS or SASS?


Possible styling3
Possible Styling

What do we get with LESS or SASS?

  • Nifty tools!

  • > Nested rules

  • > Variables

  • > Mixins

  • > Inheritance


Possible styling4
Possible Styling

What do we get with LESS or SASS?


Possible styling5
Possible Styling

What do we get with LESS or SASS?

  • Nifty tools!

  • > Nested rules

  • > Variables

  • > Mixins

  • > Inheritance


Possible styling6
Possible Styling

What do we get with LESS or SASS?


Possible styling7
Possible Styling

What do we get with LESS or SASS?

  • Nifty tools!

  • > Nested rules

  • > Variables

  • > Mixins

  • > Inheritance


Possible styling8
Possible Styling

What do we get with LESS or SASS?


Possible styling9
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


Possible styling10
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


Possible styling11
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;

}


Possible styling12
Possible Styling

Blueprint / Twitter Bootstrap

  • Frameworks to start looking good

  • from scratch!

  • They provide:

  • > Scaffolding

  • > Base CSS

  • > Components


Yet another javascript boost
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!


Yet another javascript boost1
Yet another Javascript Boost?

  • Gives structure to web applications by providing:

  • > Models

  • > Collections

  • > Views

  • Works over Underscore.js


Yet another javascript boost2
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>


Yet another javascript boost3
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”


Questions

Thank you for your time!

Questions?

Follow up the discussion

http://indico-software.org/wiki/Dev/INTREPID/13


First indico workshop

Alejandro Avilés

http://github.com/omegak

@OmeGak