Picking the right side for your front end battles
1 like176 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/
More Related Content
What's hot (18)
Viewers also liked (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 Browsers 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?
Editor's Notes
- #4: The JavaScript is a fast changing environment and because of that Ive tried to stay away from choosing a front-end framework. Its 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. Youre welcome to disagree.
- #6: But how do I choose JavaScript frameworks come and go at a fast pace.
- #7: 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
- #8: But whats 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, weve 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.
- #9: So lets take a look what our options are, because I cant cover all frameworks in one session. From this list well have a look at: Angular 2, Ember and React. These are the onces that didnt make the cut: Sproutcore Knockout Dojo Vue Backbone.js Polymer Aurelia
- #10: 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 wont be easy. The release path during the release candidates has been a very bumpy road, with multiple RCs 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
- #11: Much cleaner and easier templating in Angular 2 then in AngularJS (Angular 1).
- #12: An example of a component for Angular 2 written in TypeScript
- #13: 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 wont be easy. The release path during the release candidates has been a very bumpy road, with multiple RCs 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
- #14: 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. Its a very opinionated. Its 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)
- #15: Its the Ember way or the highway Yehuda Katz is one of the creators of Ember
- #16: 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. Its a very opinionated. Its 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)
- #17: Ember uses three branches for its 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 cant be solved by the end of the development cycle, its 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/
- #18: 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. Its a very opinionated. Its 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)
- #19: In contrast of Angular 2 and Ember, React offers only the View layer of MVC Its combined a lot with Flux or Backbone to create a full MVC architecture The main focus for React is DOM manipulation and thats where its 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
- #20: With React templating happens inside of the components.
- #21: In contrast of Angular 2 and Ember, React offers only the View layer of MVC Its combined a lot with Flux or Backbone to create a full MVC architecture The main focus for React is DOM manipulation and thats where its 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
- #22: So, how do we choose? Different situations exist in which youll 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
- #23: Although I currently work on an Angular 2 project (the decision was made before I arrived). My preference goes to Ember, mainly because of its style. I like working with convention over configuration and Im a fan of a nice structure. I was shocked by the release path of Angular 2 and seeing that with Ember its well organised gives me confidence.
- #24: Pedrillo is Saas solution Im building for music orchestras. Currently its not a Single Page Application, but thats something I want to change and Ill start working on transition to Ember very soon.
- #25: Feel free to ask me questions! Now, at the bar or via email! ;)