Picking the right side for your front end battles
•
1 gefällt mir•176 views
Over the last few years, the focus of web development innovation has shifted towards client side development. New JavaScript frameworks are constantly crying for our attention and it has become a challenge to pick the right one that suits you. Guust has been struggling with these choices and will share his experience with you. He'll introduce you to some of the major JavaScript frameworks (Angular2, Ember, React) for client side development and explain their pros and cons. For sure he'll lure you to join his side! You can find the slides with the notes on: http://www.guustnieuwenhuis.be/presentations/picking-the-right-side-for-your-front-end-battles/
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Andere mochten auch
Andere mochten auch (6)
Picking the right side for your front end battles
- 1. Guust@Orangelark.be Guust Nieuwenhuis www.orangelark.be front-end battles Picking the right sidE
- 2. About me G u u s t N i e u w e n h u i s F u l l S t a c k We b D e v e l o p e r @ O r a n g e L a r k L i v i n g i n K o r t e n b e r g ( B E ) B o o t s t r a p , J a v a S c r i p t , C F M L , M u r a C M S
- 3. Guust@Orangelark.be Guust Nieuwenhuis www.orangelark.be front-end battles Picking the right sidE
- 7. The Problem? The Browser’s historical limitations and incredible rate of improvement
- 9. Angular 2 • F r a m e w o r k P l a t f o r m • Ve r s i o n 2 j u s t r e l e a s e d = > a c o m p l e t e r e w r i t e • C o m p o n e n t - b a s e d a r c h i t e c t u r e • J a v a S c r i p t , Ty p e S c r i p t o r D a r t • B a c k e d b y G o o g l e
- 10. Angular 2 Angular 1 Angular 2
- 11. Angular 2
- 12. Angular 2 • F r a m e w o r k P l a t f o r m • Ve r s i o n 2 j u s t r e l e a s e d = > a c o m p l e t e r e w r i t e • C o m p o n e n t - b a s e d a r c h i t e c t u r e • J a v a S c r i p t , Ty p e S c r i p t o r D a r t • B a c k e d b y G o o g l e
- 13. Ember • C o n v e n t i o n o v e r c o n f i g u r a t i o n • Ve r y o p i n i o n a t e d • H a n d l e b a r s f o r t e m p l a t i n g • N i c e r e l e a s e p a t h • B a c k e d b y t h e c o m m u n i t y
- 14. Ember
- 15. Ember • C o n v e n t i o n o v e r c o n f i g u r a t i o n • Ve r y o p i n i o n a t e d • H a n d l e b a r s f o r t e m p l a t i n g • N i c e r e l e a s e p a t h • B a c k e d b y t h e c o m m u n i t y
- 16. Ember
- 17. Ember • C o n v e n t i o n o v e r c o n f i g u r a t i o n • Ve r y o p i n i o n a t e d • H a n d l e b a r s f o r t e m p l a t i n g • N i c e r e l e a s e p a t h • B a c k e d b y t h e c o m m u n i t y
- 18. React • O n l y t h e V i n M V C • C o m b i n e w i t h F l u x , B a c k b o n e o r … • D O M m a n i p u l a t i o n • C o m p o n e n t s • B a c k e d b y F a c e b o o k
- 19. React
- 20. React • O n l y t h e V i n M V C • C o m b i n e w i t h F l u x , B a c k b o n e o r … • D O M m a n i p u l a t i o n • C o m p o n e n t s • B a c k e d b y F a c e b o o k
- 21. How to choose? • F o r y o u p r o j e c t • B e s t f i t f o r p r o j e c t • P o p u l a r i t y • F o r y o u • S t y l e • O p p o r t u n i t i e s
- 22. So… Do you join My Side? Ember
- 23. Pedrillo • S a a S • F o r M u s i c O r c h e s t r a ’s • A l m o s t i n b e t a • Tr a n s i t i o n t o E m b e r w w w. p e d r i l l o . b e
- 24. Guust@Orangelark.be Guust Nieuwenhuis www.orangelark.be Thank you! Questions?
Hinweis der Redaktion
- The JavaScript is a fast changing environment and because of that I’ve tried to stay away from choosing a front-end framework. It’s a difficult choice to make, but recently I had to make it. While building a product using only jQuery and Handlebars, I noticed that I was missing structure in my JavaScript code. To make sure that I build an understandable and maintainable codebase, I needed to pick a side for my front-end battles. Please note the content of this talk is my opinion. You’re welcome to disagree.
- But how do I choose… JavaScript frameworks come and go at a fast pace.
- This article describes exactly how difficult the JavaScript environment is to follow up. How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.5qtvzhvy7
- But what’s the cause of this high speed innovation in JavaScript frameworks and tools? The browser is an exceptional environment to develop for. With multiple browsers around, all with their own JavaScript implementation, we’ve always encountered limitations. And while almost all other environments only change slowly, for example: a new version of iOS or Android is only released once a year, the browser does constantly.
- So let’s take a look what our options are, because I can’t cover all frameworks in one session. From this list we’ll have a look at: Angular 2, Ember and React. These are the onces that didn’t make the cut: Sproutcore Knockout Dojo Vue Backbone.js Polymer Aurelia
- Angular 2 is more of a platform then a framework with all the tools in the ecosystem Version 2 has just been released and is a complete rewrite. Migrations from AngularJS are possible but won’t be easy. The release path during the release candidates has been a very bumpy road, with multiple RC’s breaking backwards compatibility. Not something I expect from an OSS project. Angular 2 uses a component based architecture. It leafs a lot of freedom to the develop on how to organise and structure code. But this also means that a well thought architecture is required for large codebases. Angular 2 allows you to develop in JavaScript, TypeScript or Dart. It looks like most people are using TypeScript Angular 2 is a project backed and drive by Google
- Much cleaner and easier templating in Angular 2 then in AngularJS (Angular 1).
- An example of a component for Angular 2 written in TypeScript
- Angular 2 is more of a platform then a framework with all the tools in the ecosystem Version 2 has just been released and is a complete rewrite. Migrations from AngularJS are possible but won’t be easy. The release path during the release candidates has been a very bumpy road, with multiple RC’s breaking backwards compatibility. Not something I expect from an OSS project. Angular 2 uses a component based architecture. It leafs a lot of freedom to the develop on how to organise and structure code. But this also means that a well thought architecture is required for large codebases. Angular 2 allows you to develop in JavaScript, TypeScript or Dart. It looks like most people are using TypeScript Angular 2 is a project backed and drive by Google
- Ember is a framework/platform that was forked from Sproutcore and is closely related to the Ruby on Rails community. That explains the heavy use of convention over configuration. It’s a very opinionated. It’s the Ember way or the highway. This means there is not a lot of room for a lot of flexibility. For templating, Ember uses Handlebars Ember has a really clear and clean release path It is a project backed by the community instead of a major tech company (like Angular 2 and React)
- “It’s the Ember way or the highway” Yehuda Katz is one of the creators of Ember
- Ember is a framework/platform that was forked from Sproutcore and is closely related to the Ruby on Rails community. That explains the heavy use of convention over configuration. It’s a very opinionated. It’s the Ember way or the highway. For templating, Ember uses Handlebars Ember has a really clear and clean release path It is a project backed by the community instead of a major tech company (like Angular 2 and React)
- Ember uses three branches for it’s releases: Canary, Beta and Release. Features are developed on the Canary branch with an on/off switch. At the start of a development cycle, the features are choosen for that beta version and they are switched on in the beta branch. Several beta version are released, but when an issue is raised with a feature and it can’t be solved by the end of the development cycle, it’s pulled out of the beta. After a development cycle, a new minor version is released. The duration of a development cycle is 6 weeks. Recently Ember has added a long-term support version (LTS). The latest LTS release is 2.8.3, made on November 1st, 2016 More infor on: http://emberjs.com/builds/
- Ember is a framework/platform that was forked from Sproutcore and is closely related to the Ruby on Rails community. That explains the heavy use of convention over configuration. It’s a very opinionated. It’s the Ember way or the highway. For templating, Ember uses Handlebars Ember has a really clear and clean release path It is a project backed by the community instead of a major tech company (like Angular 2 and React)
- In contrast of Angular 2 and Ember, React offers only the View layer of MVC It’s combined a lot with Flux or Backbone to create a full MVC architecture The main focus for React is DOM manipulation and that’s where it’s very good at. It uses the concept of Virtual DOM to do this very fast. Like Angular 2 it uses a components based architecture. The project is created by and backed by Facebook
- With React templating happens inside of the components.
- In contrast of Angular 2 and Ember, React offers only the View layer of MVC It’s combined a lot with Flux or Backbone to create a full MVC architecture The main focus for React is DOM manipulation and that’s where it’s very good at. It uses the concept of Virtual DOM to do this very fast. Like Angular 2 it uses a components based architecture. The project is created by and backed by Facebook
- So, how do we choose? Different situations exist in which you’ll have to choose. For you project: you might have to choose a framework to use in a new/existing project, from a more business point of view. Then the following conditions are important: Does the framework fits your project In case of a existing project, allows the framework for a gentle migration or not Which frameworks are popular? Can we easily recruit new resources? For yourself: you might want to choose a framework for yourself to invest into. Then the following conditions are important: Does the framework fits your style of programming? Are there a lot of opportunities that require the knowledge of the frameworks
- Although I currently work on an Angular 2 project (the decision was made before I arrived). My preference goes to Ember, mainly because of it’s style. I like working with convention over configuration and I’m a fan of a nice structure. I was shocked by the release path of Angular 2 and seeing that with Ember it’s well organised gives me confidence.
- Pedrillo is Saas solution I’m building for music orchestra’s. Currently it’s not a Single Page Application, but that’s something I want to change and I’ll start working on transition to Ember very soon.
- Feel free to ask me questions! Now, at the bar or via email! ;)