Pokémons explain front end tools and frameworks

DISCLAIMER

Many Pokémon

Few GIFs

Cookbook concepts style, no deep or detailed explanations

My personal opinion, you can agree or not. Feel free to share your points!

External references not always match my entire point of view

hannelita@gmail.com

Hi!

  • Computer Engineer
  • Programming
  • Electronics
  • Math <3 <3
  • Physics
  • Lego
  • Meetups
  • Animals
  • Coffee
  • GIFs

Hanneli (@hannelita)

@hannelita - #webbr2015

@hannelita - #webbr2015

Why Pokémon?

Usually people like it or have nothing against it

Good analogies

Easy to understand

Diversity and acceptance - usually we can handle trainers that choose a different starter Pokémon than the one that we have picked up.

We can also choose a 'starter' on front end development

@hannelita - #webbr2015

@hannelita - #webbr2015

@hannelita - #webbr2015

Future?

@hannelita - #webbr2015

@hannelita - #webbr2015

DISCLAIMER

We usually make a framework composition.

So the analogy of 'a single starter' does not always work here.

 

@hannelita - #webbr2015

How do we chose a starter?

@hannelita - #webbr2015

1. Speed up the first phases

@hannelita - #webbr2015

@hannelita - #webbr2015

Problem 1: Not always the future phases will be properly handled by the starter

@hannelita - #webbr2015

vs.

:(

@hannelita - #webbr2015

2. Consider future phases

@hannelita - #webbr2015

vs.

( ͡° ͜ʖ ͡°)  

BLIZZARD YEAH

@hannelita - #webbr2015

Problem 2: Not always the initial phases will be properly handled

@hannelita - #webbr2015

3. Affinity - I like this starter

@hannelita - #webbr2015

<3

@hannelita - #webbr2015

Problem 3: Not always the inital/ middle/ final phases will be properly handled

@hannelita - #webbr2015

4. 'What's up with this one?'

@hannelita - #webbr2015

Problem 4: We don't know how to manage the tool proerly/ good practices/ early adopter and no tutorials/ updates and maintaining

@hannelita - #webbr2015

Other **not recommended** strategies

  • Random
  • Someone said this was good; I haven't Googled and just picked it up
  • I've been using this for the last 10 years in all cases.

@hannelita - #webbr2015

We must find a balance between the options

@hannelita - #webbr2015

@hannelita - #webbr2015

About Bootstrap

  • Combo: HTML + CSS + JS
  • Responsive
  • Built in Grid
  • Built in Components
  • Built in JS associated with the components
  • JS for transitions, modals, etc

@hannelita - #webbr2015

Bootstrap: The good parts

  • Many things are already built (strategy of the initial phases)
  • Easy to learn (beginners or people without experience in front end development)
  • Fast results
  • Active community and product development
  • Many tutorials and talks
  • We can use custom versions of it to make it lighter

Ref: http://www.sitepoint.com/11-reasons-to-use-twitter-bootstrap/

 

@hannelita - #webbr2015

Bootstrap: The bad parts

  • Semantics is annoying to some developers 
  • Adds many (and not always necessary) elements to DOM: <div><div><div><div>
  • Heavy (even if we customise it; still being heavy) (vers. 3.5 - CSS + Fonts + JS = ~1Mb )
  • CSS class names collisions / JS collisions if we add it in the middle of the project (ex: button style) 
  • Many people use it - our website might get similar to many others (a.k.a everyone starts with Charmander)

Ref: http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/

@hannelita - #webbr2015

@hannelita - #webbr2015

@hannelita - #webbr2015

About Foundation

@hannelita - #webbr2015

  • Combo: HTML + CSS + JS
  • Responsive
  • Built in Grid
  • Built in Components
  • Built in JS associated with the components
  • JS for transitions, modals, etc

Foundation: The good parts

  • Mobile-first approach
  • Can handle all levels of developers - from beginenrs to experienced
  • You can use Compass and have more control on the presentation layer
  • Since the beginning it can easily interact with Rails, Django, etc.
  • Active community and product development

Ref: http://www.zingdesign.com/top-10-reasons-to-use-zurbs-foundation-framework/

 

@hannelita - #webbr2015

Foundation: The bad parts

  • Semantics - has some flexibility, but it's not 100%
  • You cannot also control 100% of the elements that go to DOM.
  • Not so light - version 5 full package has ~700kb 
  • CSS classes names collisions might happen/ JS collisions

Ref: http://www.amplificommerce.com/5-reasons-we-chose-bourbonneat-over-foundation-or-bootstrap/

@hannelita - #webbr2015

@hannelita - #webbr2015

About Bourbon Neat

  • Light Grid tool
  • Semantics
  • Responsive

@hannelita - #webbr2015

Bourbon Neat: The good parts

  • Semantics
  • You use only what you really need. Not necessary code/packages are not automatically inserted
  • SASS Mixins
  • Customisation. It provides you the basis to build your presentation layer giving a special attention to the semantics.
  • Active community and product development

Ref: http://www.amplificommerce.com/5-reasons-we-chose-bourbonneat-over-foundation-or-bootstrap/

 

@hannelita - #webbr2015

Bourbon Neat: The bad parts

  • Not a complete package. You might need other extra tools. Just does the grid.
  • If the developer has few experience with front end, this tool might not be effective.
  • Be careful with Mixins! (http://www.sitepoint.com/avoid-sass-extend/ )

@hannelita - #webbr2015

@hannelita - #webbr2015

@hannelita - #webbr2015

About Angular.js

  • Framework that promises to make HTML richer (Directives)
  • Directives
  • MVC front end
  • Data Binding

@hannelita - #webbr2015

Angular.js: The good parts

  • Easy to learn the basics and start developing your project
  • Directives - feels that we are creating HTML
  • Intuitive MVC system

http://www.sitepoint.com/10-reasons-use-angularjs/

@hannelita - #webbr2015

Controller ( JS )

app.controller('PokeCtrl', function($scope){
    $scope.starter = "Charmander"
})

HTML

<div ng-controller="PokeCtrl">
  {{ starter }}
</div>

@hannelita - #webbr2015

Angular.js: The bad parts

  • Too many data binding may lead to a messed up code and make it hard to understand and read...
  • And sometimes creates a bad performance
  • Compatibility from 1 to 2
  • Debug is hard

Ref: https://medium.com/@mnemon1ck/why-you-should-not-use-angularjs-1df5ddf6fc99

@hannelita - #webbr2015

@hannelita - #webbr2015

Sobre o Ember.js

  • Framework that uses a template engine (Handlebars) to make the HTML powerful
  • Allows the MVC pattern for the Front End
  • Data Binding (softer)

@hannelita - #webbr2015

Ember.js: The good parts

  • Easy to learn the basics and start developing your project
  • Handlebars
  • Data Binding is softer

Ref: http://www.talentbuddy.co/blog/top-reasons-why-industry-experts-use-ember-js-and-how-you-can-adopt-it-yourself/

@hannelita - #webbr2015

Ember.js: The bad parts

  • Oh, you, data binding...
  • Debug is hard
  • Heavy - 1.7Mb for version 2 (!!!!11)

Ref: http://aokolish.me/blog/2014/11/16/8-reasons-i-won't-be-choosing-ember.js-for-my-next-app/

@hannelita - #webbr2015

@hannelita - #webbr2015

@hannelita - #webbr2015

@hannelita - #webbr2015

About React.js

  • *Not* a complete MVC for Front End
  • We easy and quickly understand how a component will be rendered.

@hannelita - #webbr2015

React.js: The good parts

  • A lot of flexibility to build components
  • No obscure or implicit DOM manipulations
  • Promises a good performence

Ref: https://facebook.github.io/react/docs/why-react.html

@hannelita - #webbr2015

React.js

render: function() {  
    return <header>
        { this.state.trainer ?
            this.state.name :
            <span>Treinador Pokemon não                                         identificado</span> }
    </header>
}

@hannelita - #webbr2015

See also: Relay.js

Relay offers extra functionalities to React (ex: more complete event system )

@hannelita - #webbr2015

"Heart  to 

EMER, Jean Carlo. 2015

@hannelita - #webbr2015

React.js: The bad parts

  • Very young; docs are not very complete or intuitive yet
  • Requires developers with a more solid JS and HTML experience
  • Do not rush! "Everyone gets Charmander, I should pick it up too"

Ref: http://blog.andrewray.me/reactjs-for-stupid-people/

@hannelita - #webbr2015

Conclusion

Analyse the scenarios to make a good choice of your starter :)

@hannelita - #webbr2015

Some combos

@hannelita - #webbr2015

ou

ou

com qualquer

ou

ou

Final part

"Do not assume that your context applies to all projects in the world. "

ALMEIDA, Vinicius. 2015

@hannelita - #webbr2015

Extras

https://offroadcode.com/blog/1850/reactjs-whats-all-the-fuss/

http://gridgum.com/6-great-responsive-frameworks-for-2014/

 

@hannelita - #webbr2015

http://hhvm.ovh/entry/facebook-s-relay-and-how-it-relates-to-flux-and-react

https://therealmarv.com/understanding-react-flux-graphql-and-relay-concepts-with-4-videos/

Obrigada! :)

@hannelita - #webbr2015

hannelita@gmail.com

Pokémons Explain Front End Tools

By Hanneli Tavante (hannelita)

Pokémons Explain Front End Tools

  • 894
Loading comments...

More from Hanneli Tavante (hannelita)