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
- 2,909