The State of Frontend was presented at Vadodara Frontend Developer's meetup on 4th Apr, 2016. It covers the past, present and the future trends in the frontend development.
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
The State of Frontend
1.
2. Jimit Shah
Working as a freelance Developer in
Python, UI Development, Hybrid App
• Love building startups
• Always exploring new technologies
• Wannabe open source contributor and Mobile Dev
• In my free time, I work on electronics, gardening and
reading
@jimitnow codeforfood.in
7. Some notable achievements
• We finally have jQuery (Simpler way to manipulate DOM)
• Browser vendor got united through W3C standard
• AJAX started picking pace
• We began to feel limitation of Pure CSS
• Responsive design started becoming main stream
8. Problem faced
• No minification (or) concatenation
• Non-performant code
• Unmanageable code
• Lots of hacks
9. THE PAST MAY HURT, BUT YOU CAN EITHER RUN FROM IT (OR)
LEARN FROM IT
15. Benefits that framework offers
• Coherent way of coding
• Manageable and scalable code
• Built in best practices
• Component structure
• Quick turn around time
26. Five trends for 2016
3. Service Worker
TL;DR
A service worker is a script that is run by your browser in the
background, separate from a web page, opening the door to
features which don't need a web page or user interaction.
Ex. Push Notification in Chrome
Offline Web Apps
Background Sync
Extreme level of caching
27. Five trends for 2016
4. Web Components
Example
<video src=“http://youtube.com/catvideo”>
</video>
Polymer
28. Five trends for 2016
5. Material Design Everywhere
React Native Material
29. Thank You
All in all, we will be progressing faster than ever before.
30. Your work is going to fill a large part of your life, and the
only way to be truly satisfied is to do what you believe is
great work.And the only way to do great work is to love
what you do. If you haven’t found it yet, keep looking.
Don’t settle. As with all matters of the heart, you’ll know
when you find it.
-- Steve Jobs
Hinweis der Redaktion
Hi. Good morning. I am really excited to be here with you today. It has been a pretty crazy time for front-end developers. Over the last couple of years, We have seen tremendous growth of libraries, framework and build tool and it has increased our productivity and maintainability by a huge margin. And today I going to talk about this wonderful journey. Before I start here’s my small intro.
As you know my name is Jimit. I work as freelance developer in Python, UI Development and Hybrid App Development. Here’s some of the things that I like. Love building startups from ground-up, Exploring new technologies as soon as they are released, I would really love to be an open source contributor one day. Currently working on 2 soon to be open source projects. As world has gone mobile, I would love to have mobile development skill under my belt. Last but not least, In my free time I work on electronics, gardening and reading a lots technical and self-improvement articles. You can find me on twitter at @jimitnow and I blog at codeforfood.in. Enough about me, Lets get started with the keynote.
I have divided the talk in three parts and Its just like our evolution as a human.
The past, Which we members as the jQuery era where the entire front-end revolved around the one library and it was a good beginning.
The present, SPA ERA, As we all know Single Page Application has taken over the world. Finally the frontend development is as excited as backend development. For me personally, Its way more excited than backend.
The Future, We really can't predict the future. But looking at the current state, It looks like it will be nothing short of magic and I am too excited for the future that it holds.
Without a further ado, Lets start with Past.
Once upon a time, It looks something like this. “use jQuery and now you are a front end developer”. I know it has happened with most of you as it has happened with me as well. moving on.
The stack at that might look something like this,
jQuery and plugin system
Pure CSS, We were yet to be realize the pain of maintaining CSS as Application grows
Pure HTML, No templating language used and most things were still rendered on server.
No build tool, We manually download the jQuery and similar stuff and integrate that into the project. It was such a pain but we didn't have any options. Most websites avoided the concatenation and minification because of complex workflow.
This is how frontend looked like when compared to backend back then.
We finally have jQuery which provided developers with a simple way to manipulate the DOM and Its has abstracted away difficulties of using Pure Javascript from the developers. It was really a huge win for frontend developers back then.
Browser vendor got united through W3C standard. Back in those days we have really bad support for different emerging technologies. Also IE has long holded us back. But finally browser vendor start getting their act together thanks to W3C.
Ajax started picking pace. We started feeling limitation of refresh on every click on page.
We began to feel limitation of Pure CSS. It became really painful when you have to use !important to get you style right. As the application grew, this point became more apparent. More on this in my talk on react native this evening.
No minification (or) concatenation. We were literally adding each and every file as script tag in HTML. That has resulted in sever loadtime issues.
Non-performant code. We used to use jQuery and a lot of its plugin which has resulted in performance penalty. In reality, We didn't care about performance back then.
Unmanaged code, Back then we didn't have several best practices that we use today, Because of that we have written a lots of unmanaged code. Its now called the Legacy issue.
Lots of hacks : If you have written CSS then you know this. Nothing more on this.
One of my favorite quote related to past. THE PAST MAY HURT, BUT YOU CAN EITHER RUN FROM IT (OR) LEARN FROM IT. With that in mind, Lets move to present,
Which really defines that we have really learned from the past.
We finally have true frameworks. That allow us to manage each and every aspect of frontend development very well.
But then we got a lot of it.
There are over 15+ well maintained framework out there. Here are some of the popular ones. In fact there there are so many framework that we began to began so headlines like this. 10 hottest javascript framework and 20 javascript framework to watch out for. and still
Brace your self, A new javascript framework is coming. This trend will continue for the foreseeable future.
Why there are so many framework. It happening because of this.
coherent (or) ideal way of coding. This has resulted in single source of truth for anyone on the team working on the same project.
manageable and scalable code. All the framework that has been designed modern days is done with keeping this in mind. So we never face issue with managing and scaling the frontend code.
Built in best practices : All the framework comes with established best practices. And most of the time we don't have to think about this as someone already has spent a fortune on this.
component structure : This has been the biggest advantage of modern JS framework. The component structure has allowed the loosely coupled and reusable code.
quick turn around time : Because most of the things that modern application requires is built right into the framework. We can get going with it and produce the production quality code in no time.
Disadvantages:
There’s no real disadvantages to this framework structure. Other than frustrated javascript developer that needs to learn another framework because someone has developed it.
We have got cool CSS framework like foundation, bootstrap, material design lite to name a few but then there are million more out there. every other wants to build their own CSS framework and situation is so worse that we have to build something like this to search through the CSS framework.
There are a lot of benefits that CSS framework offers
to name a few
Grid Layout
Mobile First Design
Drag and Drop design
Built in Best Practices
Large Community
Build tool. My favorite section. This tools have saved a ton of time over the years and are my daily driver. Some of them are mentioned here,
Grunt,
Gulp,
Webpack, The new and powerful kid on the block
Here are some of the advantages that build tool offers
minification
concatenation
modularity
file watcher
live reload
dev server
and it keeps growing, making us more productive.
Its time for the magical tool. Why magical because they have contributed so immensely to our productivity and manageability that they deserve this status.
Npm and Bower - Who don't know the luxury of running just npm install and bower install command to install all the required dependency. Its a joy for frontend developers.
Sass - It has shown us the right way to write manageable CSS. This has lead most libraries and developer to switch to this awesome tool
require.js and browserify - These tool has helped us modularize the javascript file without worrying about concatenating it manually. This has also lead to the hot-reloading which allows javascript to get loaded on demand without intervention of any other special tool
Typescript and Babel - Javascript is nice but it has a very slow cycle of updates. Thank god we have typescript and babel at our disposal. This tools allow us to use advanced feature of upcoming javascript revisions like ES6 and ES7 today. Isn't that cool ?
Javascript is everywhere. I mean literally everywhere.
Hybrid mobile app
Cordova
Phone gap
ionic
react-native
Native script
IOT and Hardware
nodeMCU
Tessel
Virtual Reality
Oculus rift
With all that in mind, Lets look at what future holds for us
As we saw there was huge leap that we have taken from past to present. The future also looks quite similar. I have prepared 5 trends as we prepare for a huge leap forward.
Lets get started. First, Battle of framework. The giants like react and angular will compete for world domination. While other emerging framework will gain significant audience. All in all we will have better framework because of this battle. Keep fighting & keep improving.
Second ES6 becomes mainstream. We have long held back by the javascript for not implementing the modern language features like class and promises. But It will not be the case is near future and ES6 is getting good support across various browser and For all the features that we still don't have we can use babel and typescript. This tools will become much more improved to support whole slew of new features. With ES6 standard will be able to use features like
promises
arrow functions
default + rest + spread operator
Classes
Fetch
Module loader
Modules
Most of the modern framework has already started using this ES6 and ES7 features. We will see more adoption in near future.
third, service worker.
For those you who don't know about service, Here’s short summary what it is.
A service worker is a script that is run by your browser in the background, separate from a web page, opening the door to features which don't need a web page or user interaction.
example for this would be newly introduced push notification in chrome. When you allow certain website to send you push notification, It installs a service worker for them in your browser which then checks for availability of message on certain interval and notifies you if there are any notification.
Some of the application includes
offline web apps
Background sync
Extreme level of caching
Flipkart is using this for its flipkart lite website on mobile. They seen a tremendous user engagement because of this.
I am personally a huge fan of this and waiting for this to go main stream. We will likely see wide adoption and support for this technology
Fourth web components
We are already familiar with the components as we use daily when we use angular (or) react. But those are not the native web components. Native web components offers superior performance and ease of developing components. We already use some of them in the browser here’s the example video tag. We just include source URL and boom we have a video player with all the controls.
There has been a lot of activity going on in this space since all the framework are becoming component agnostic. Polymer is a library which allows us to create native component right now while still the support for it is shaggy. Here’s one example for polymer. Just add add google map component script and pass lat, long value to google-map element and we have working map. Isn't this awesome. I think web component will become main stream in near future as well.
fifth
material design everywhere
Since the introduction material design back in 2014 its gaining wide adoption among the industry. It has received good response from user. Since then most UI library has switched (or) in process of doing so. some them includes
angular-material
ionic 2
react-material
react-native-material
I think this is the year, we will finally see material design everywhere. So this includes my five trends for 2016.
All in all we will be progressing faster than ever before. Thank you. I will leave you with one of the best quotes that motivates everyday.
With that I would like to invite out next speaker who is going to speak about angular 2.
