Frontend-Resources

A collection of all the resources I use to keep up with the latest in front-end web development - Tom McGurl @Tom_McGurl

Front-end Web Development is rapidly growing and changing. Sometimes it's tough to keep up with all of the libraries and frameworks out there. As a lead javascript developer at my company, I'm often approached by co-workers and friends who are looking to get into front-end development or polish their skills. I decided to make this repo to list all of the great resources I use everyday to keep up to date and to learn about all the awesome things happening on the web!

Inspired by all the awesome lists on Github (also see the Repositories section)

##Table of Contents

Podcasts
Learning Resources/Tutorials
Twitter
Blogs
Books
Videos
Repositories
Style and Best Practice Guides
Things to check out
What I'm learning about this week
Meetups
Road Map

Podcasts

Podcasts are an amazing way to get the latest news and info on all the awesome things happening in web development (especially if you're a commuter ;) ). This is where I get most of my news/ keep up with the happenings in the Javascript community.

Javascript Jabber (Weekly every Wednesday)
- An awesome podcast for everything Javascript and my personal favorite!
- Don't skip over the early episodes, even though they may not be current they have awesome info on things like backbone, coffeescript, ember, javascript objects and many more
- Hosted consistently by Charles Max Wood of devchat.tv, check out his other podcasts, they are all awesome!
- Other co-hosts are also great (see the Twitter section)!
ShopTalk (Weekly)
- Another great podcast
- Hosted by Dave Rupert and Chris Coyier (of CSS tricks)
- They cover a lot of different areas and have some design focused episodes as well as javascript episodes
The Web Platform Podcast
- Another great podcast that covers all sorts of frontend technologies
- They cover things from Web Components to Web RTC and much more
Adventures in Angular (Weekly every Thursday)
- An amazing Angular podcast from the same guys that do Javascript Jabber
- A must-listen to for anyone getting into or already using Angular
NodeUp
- NodeJS podcast that covers a wide range of Node related topics and covers the future of NodeJS as well as tips for NodeJS developers.
Frontside the Podcast
- The hosts do a lot of work in EmberJS so there are some really fantastic discussions on the EmberJS framework
- They also cover a wide range of topics from discussions about being a developer, current tech trends, and news
Angular Air
- This podcast can also be watched in video form on youtube
- This is another fantastic Angular podcast.
CodeWinds
- It covers JSConf 2014, Modular Javasctipt, Isomorphic apps, Reactjs, and more
- Codewinds is back after a short hiatus and now has plans for weekly episodes.
Ember Land
- An podcast all about Ember
- This is a technical podcast that talks about Ember features, the Ember community, and Ember news
Ember Weekend
- An weekly EmberJS podcast
- The hosts Chase McCarthy and Jonathan Jackson discuss Ember projects they are working on, Ember news, resourses and more.
The Changelog
- The Changelog is another great developer podcast
- It covers a wide range of topics including, recently, Typscript, ReactJS, Ember, and the Rust programming language
React Podcast (By monthly)
- A new podcast centering around Facebook's ReactJS
5 Minutes of Javascript (weekly)
- An awesome podcast with updates on what's going on in the JS community
- In 5 minutes they cover the past weeks JS news
Javascript Air (weekly)
- A Fantastic podcast about all things Javascript.
- They also do live streaming of the podcast so users can tweet in questions
- Really great topics.
React 30
- A podcast dedicated to React and from the same team as Javascript Air
- This podcast covers some awesome ReactJS topics in 30 minutes!
Frontend Happy Hour
- A group of developers discuss all things Front end over drinks.
- This is a great podcast and the topics are awesome and super informative.
- They cover things such as, the future of javascript, frameworks, keeping up with frontend trends, and more.
React Native Radio
- A podcast that focuses on React Native
- This is a great resource for anyone interested in or working with React Native!
Elm Town
- A Podcast dedicated to the Elm Programming language.
- A great resource for anyone interested in, or working with Elm!
Space Dojo
- A roundtable podcast about Javascript.
- This podcast has some episodes covering awesome topics such as NativeScript, Redux, Elm, and React.
Full Stack Radio
- "A podcast for developers interested in building great software products." - webostie
- This podcast covers the full stack but has some great frontend topics.
- This is a fantastic podcast for those interested in not only the frontend, but how it connects to the entire stack.
JAMStack Radio
- A podcast all about the JAMStack, a stack for building fast and secure apps and websites.
- JAM stands for JavaScript, APIs and Markdown.
- You can read more about the JAMStack here.

Learning Resources/Tutorials

Here are some of the great websites that offer tutorials.

Egghead.io
- A super awesome site that specializes in small 'bite sized' video tutorials
- I direcet anyone who asks me for great Angular tutorials to go here
- They have videos covering things such as Angular,Core Javascript, React, ES6, D3, and NodeJS
- A must for any front-end developer
- Many of the hosts and guests from the podcasts above contribute tutorials to this site
Exercism.io
- Exercism.io is an awesome site with exercises for many different languages.
- They have a Javascript track as well as an ESNext track.
- You work on one exercise at a time and when you are finished you "submit" your answer You can then view your solution on the site where you can comment, others can comment, and you can iterate on your solution.
- You can also view how others solved the same problem so you can see the many ways to tackle a problem.
- I've been doing the Elm, Elixir, Clojure, and Javascript tracks and it's been a ton of functions
- You can check out my exercism repos here, but the real fun is doing it for yourself ;)
  - Elm
  - Elixir
  - Clojure
Pluralsight
- This site has tons of material on everything development.
- Many of the hosts and guests from the podcasts above contribute tutorials to this site
Scotch.io
- This is a great site with many tutorials on everything front-end
- They cover the entire MEAN (Mongodb, Expressjs, Angular, and NodeJS) stack
- They have a great Reactjs series
- They do an article each week on the top Code Pens
- Great site to bookmark on your phone
Github
- This one should be obvious, but there are a ton of tutorial repos here, just search for what you are interested in.
- Many time the repo will link out to a blog to go along with the tutorial
Codrops
- Great Web design tutorials and inspirations
Learn ES6 (harmony)
- This site lets you try out the latest features of ES6 right in the browser.
- Learn the new features while trying them out yourself.
- Try out arrow functions, object destructuring, method shorthand, template strings, classes and more.
Functional Programming Tutorial
- This interactive tutorial is a great way to learn the basics of functional programming.
- This tutorial takes you through using functions such as map, filter, and reduce to make your code more concise and durable.
- "Functional programming provides developers with the tools to abstract common collection operations into reusable, composable building blocks."
Dashing D3
- This is an interactive tutorial on the charting library D3.
- It is a nice tutorial that goes over the basics and builds off them to teach you D3 in a fun interactive way.
JavaScript 30
- This is a 30 day Vanilla JavaScript challenge.
- "Build 30 things in 30 days with 30 tutorials" -homepage
WarriorJS
- A fun way to learn Javascript!
- You play a game by writing JavaScript to control your character!
- Your character has to climb a tall tower where, on each floor, you must write code instructing your character to attack, rescue captives and reach the stairs.

Twitter

Here are some of the people/groups that I follow on twitter that post some great front-end news and articles.

Overall my suggestion is just search and follow the people who's Blogs articles you've read or who's names you know from podcasts,tutorials, videos, conferences, and the community in general.

@eggheadio
- Posts when new videos come out
@JavaScriptDaily
- The name says it all
- Javascript news
@ReactJSNews
- Shares ReactJS news, tutorials, and creations
@codrops
- They post when new articles come out and when they release their 'Web Design & Development News: Collective'
@EmberSherpa
- Tweets about EmberJS resources news and the community
@EmberWeekly
- EmberJS news, articles, tips, and code
@angularjs
- Another self-explanitory one.
- Angular news
@jashkenas (Jeremy Ashkenas)
- Jeremy Ashkenas created BackboneJS, UnderscoreJS, and Coffeescript!
- Follow Jeremy for for tweets about the above and Javascript in general
- Check out the Javascript Jabber episode with Jeremy on Backbone
@wycats (Yehuda Katz)
- Yehuda is a member of the EmberJS, Ruby on Rails, JQuery, and now Rust core teams
- Yehuda tweets about Ember and Javascript
- Also check out Yahuda many of the podcasts I've listed above.
@DanWahlin
- Dan tweets about javascript news and articles
- He also has a great blog with some good tutorials and posts
- Check out his awesome blog (see the Blog section)
@John_Papa
- John is featured on the Adventures in Angular podcast(See above)
- He tweets about javascript tidbits and especially angularjs
- He also has a blog (see the Blog section)
@wardbell
- Ward built BreezeJS
- He also does a lot of work in Angular and tweets about that
- Ward is featured in many of the podcasts above
- Check out his Javascript Jabber episode on the MEAN Stack
- Also check out the Adventures in Angular episodes he co-hosts on testing with Angular
@scotch_io
- Tweet when new articles com out
- Great way to keep up on the sites tutorials
@BenNadel
- Ben is always posting things about javascript
- He also has a great blog (see the Blog section)
@josepheames
- One of the host of Javascript Jabber and Adventures in Angular
- One of the organizers of ng-conf
- Tweets about angular and javascript in general
- He teaches Pluralsight cources as well
@js_dev (Aaron Frost)
- Aaron frost is a co-host on many Javascript Jabber and Adventures in Angular episodes
- He is also an organizer of ng-conf
- He also has video tutorials on egghead.io
@auser (Ari Lerner)
- Ari is the author of the popular ng-book
- A lot of posts about AngularJS news updates and of course ng-book
@tomdale
- Tom helped create EmberJS and is part of the core team
- Tom tweets about EmberJS and Javascript
@eisenbergeffect (Rob Eisenberg)
- Rob is most famous for his javascript framwork, Durandal
- Rob now works on a new framework called Aurelia
- He also worked on Angular 2 for a while before leaving and releasing Aurelia.
- He also has a blog (see the Blog section)
@floydophone (Pete Hunt)
- Pete Hunt is most famous for his work at Facbook
- He is part of the ReactJS team
- He tweets about ReactJS, Flux, and all things related.
@ryanflorence
- Ryan Florence is a huge advocate for ReactJS and started the popular react-router
- Ryan posts about Javascript, ReactJS updates, news, and his ReactJS Training Courses
@mjackson
- Michael Jackson works with Ryan Florence (above) on the react-router
- He posts about javascript as well as his ReactJS training courses with Ryan Florence ReactJS Training Courses
@stevenewcomb
- Steve Newcomb is currently most famous for being the CEO and founder of famo.us
- Follow steve for updates on Famous as well as some awesome javascript posts.
@_ericelliott
- Eric is a fantastic person to follow for Javascript goodies.
- He tweets frequently and his tweets always contain awesome javascript info and resources.
- I'm constantly retweeting his stuff becuase it's realy awesome.
@dan_abramov
- Dan Abramov is the creator of Redux and some awesome React components and libraries.
- Dan tweets about javascript, React, and of course Redux.
@stackjs
- Javascript stacks is another great resource for Javascript resourses and info.
- They post about cool new libraries, code pens, jsbin, jsfiddles, and other javascript tidbits.
- This is another frequent tweeter.
@echojs
- "Community-driven news site entirely focused on JavaScript development, HTML5, and front-end news."
- Echojs is a great resource that tweets all things js news, blogs, and repos.
Follow Frameworks and Libraries
- @emberjs
- @reactjs
- @gruntjs
- @gulpjs
- @nodejs
- @official_iojs
- @Ionicframework
- and so on...
- Just search for things you use in your day-to-day development

Blogs

Medium
- "Medium is a place to share your stories and ideas" - Medium.com/about
- I've linked above to the 'Javascript' section of Medium (I just did a search for 'javascript')
- This site is great and many awesome developers post and link to articles here
- It's also a great place to get started with spreading your ideas without having to buy your own domain or setup a blog site
John Pappa's Blog: Evangalist On The Loose
- Blogs about everyting Javascript and angular
- He has some great posts
Ben Nadel's Blog
- Ben has some awesome posts and tutorials
- You can learn a lot aobut javascript on this site
- You'll also always be able to spot him in all of his great photos from different conferences ;)
Dan Wahlin's Blog
- Another awesome blog for javascript tutorials
- He covers everything from AngularJS to Core Javascript such as ES6
Rob Eisenberg's Blog
- Rob discusses his new framework Aurelia
- He also compares Aurelia to other frameworks such as Angular 2 and his experiences working on Angular 2 and why he decided to leave.

#Books Here are some of the books I've found super useful.

Elequent Javascript
- This book is fantastic!
- There is an online version and a paperback version
- I prefer the onine once becuase it has interactive excersises at the end of each chapter
- Realy great resource to learn the ins-and-outs of Javascript
ng-book
- An awesome Angular book
- This was the first book I read when I started Angular and it was extremely helpful
- It's constantly being updated
- Written by Ari Lerner, co-runner of ng-newsletter (see Twitter section)
- "The print version of the book is available through Amazon and Createspace." - ng-book homepage
Essential Javascript
- This book goes deep into the workings of javascript and helps provide a better understanding when working with the language
- Also check out the Javascript Jabber episode with the author, David Herman
You Don't Know JS
- This is an open source book series that "dives deep into the core mechanisms of the Javascript language" - the readme
- You can read them all online for free or even buy the print copies
- These books cover everything from the super basics in the book Up & Going all the way to ES6 & Beyond

#Videos ####Conference Videos

2015
- ng-conf 2015
  - This is the youtube page for all the ng-conf videos - March 5-6 (Salt Lake City, Utah)
- Ember Conf 2015
  - This is the youtube page for all the videos from Ember Conf 2015 - March 3-4 (Portland, Oregon)
- Reactjs Conf 2015
  - This is the youtube page for the videos from Reactjs conf 2015 - January 28-29 (Facebook HQ, CA)
- React Rally 2015
  - This is the youtube playlist for the React Rally videos - August 24-25 (Salt Lake City, UT)
- ng-Europe 2014
  - Youtube page for ng-Europe videos
- JSConf 2015
  - Youtube page for all of the JSConf videos
- Fluent Conf 2015
  - Youtube playlist for all the Fluent Conf 2015 talks
  - Some really influential members of the javascript community talk all things web and javascript.
2016
- ReactJS Conf 2016
  - Youtube playlist for all of the ReactJS Conf 2016 videos - February 22 & 23 (San Francisco, CA)
- React Rally 2016
  - Youtube playlist for all the React Rally videos - August 25-26 (Salt Lake City, UT)
- Elm Conf 2016
  - Youtube playist for all the Elm Conf videos - September 15 (St. Louis, Missouri)

####Other

JS Must Watch
- "This is a list of must-watch videos devoted to JavaScript" - the readme
- This repo has some fantastic javascript videos.
- It is sorted by date from 2009 - 2015.
- The lastest entry is the two part series, Using ECMAScript 6 today.

#Repositories There are also a ton of Github repos that are great to watch. Some are dedicated to collecting all of the resources for a given topic (these are where I got the inspiration for this). These are amazing ways to find a material on a particular framework or library. Here are some of the ones I use.

Awesome-React
- "A collection of awesome React tools, resources, videos and shiny things." - the readme
Awesome-AngularJS
- "A list of awesome AngularJs services, directives, utilities and resources." - the readme
Awesome-NodeJS
- "A curated list of delightful Node.js packages and resources." - the readme
Frontend Development
- An amazing huge list of awesome Frontent Development resources
- "A huge list of frontend development resources I collected over time. Sorted from general knowledge at the top to concrete problems at the bottom." - dypsilon
Awesome-Javascript
- "A collection of awesome browser-side JavaScript libraries, resources and shiny things." - the readme
Awesome-Ember
- "A curated list of awesome Ember.js things." - the readme
react-primer-draft
- A great repo for getting started with building Single Page applications with ReactJS.
- Does a great job covering all the aspects of React including Component life-cycle hooks, State, Properties, Mixins and more.
Angular2-Education
- "A curated list of helpful material to get started with education on Angular 2" - the readme
- This is an awesome collection of resourses for leanring Angular 2
Awesome-React-Native
- "A curated list of awesome articles, tutorials and resources dealing with React Native." - the readme
Front-end-Developer-Interview-Questions
- This repos is a fantastic resource to keep bookmarked.
- It is a list of common questions that someone can ask when interviewing for a front end developer position
- This is useful for not only the people asking the questions, but also for those learning javascript
- The quesetions focus on some common areas of knowlege for Javascript, HTML, and CSS that a front-end developer should have experience with.
- This is a good list to go throught to see where you stand on these topics and to get an idea of where you have room for improvement.
- For example, if you see a question that you don't know how to answer, you now have a topic you can look into to brush up on your skills.
ES6 Features
- a repo covering the features of the ES6 ( now ES2015 ) standard
- It contains examples of all of the new functionaity that are well commented for understanding.
- This is a great place to start looking at ES6 and thinking about using Babel so that you can start writing ES6 today!
JS Stack From Scratch
- A step by step guide to building a modern Javascript Stack from Scratch
- This repo walks users through creating a modern web application using the latest JavaScript trends.
Awesome-Elm
- A great curated list of Elm resources.
public-apis
- This is a currated list of free to use JSON APIs!
- This list is an awesome place to look for ideas on what kind of app you could build.
- The list is organized into categories such as, Games & Comics, Calendar, Music, News, and much more!

Style and Best Practice Guides

Style guides are a useful way to get everyone on the same page when it comes to code style. Style and best practice guides help make code more standard, readable, and shareable. All of which make code collaboration and onboarding easier. There are plenty of benefits to using a styleguide amongst a team or even for your own benefit.

Javascript Style Guide
- This repo is a Javascript style guide from the folks at Airbnb
- This guide will help you take advantages of the benefits listed above.
Angular-styleguide
- This is an awesome styleguide for Angular
- John's styleguide is widely adopted and will get you writing your Angular code in a way that follows best-practice and makes it easier to test, build, and understand.
- The benefit of this style guide is that, like any styleguide, more adoption means more people writing code in a way that others are already familiar with.
- Notable mention: Todd Motto's Angular-styleguide
  - This styleguide is very similar to John's, but differs in a few places.
  - Follow whichever one works best for you.
  - Since they are similar enough, you will still get the benefits discussed above.
Git-Style-Guide
- This guide covers popular practices for working with git
- Getting into open source can be intimidating (I'm still working on it myself). Style guides like this help make contributing to open source via github less intimidating by guiding you on best practices.
- This guide covers things like branch naming, commits, merging and more

Things to check out (No particular order)

ReactJS
- Awesome Javascript library from the facebook team
- Has some great concepts and is a great alternative for any existing view layer in your MVC applicatoin
Angular and Angular 2
- Fantastic Javascript framework, and currently the one I use the most
- Extremely popular and a must-know right now
EmberJS
- "A framework for creating ambitious web applications" - emberjs homepage
NodeJS and now io.js as well!
- I'm sure almost everyone knows about Node at this point, but iojs is the latest fork of node, and created in the interest of ensureing nodejs's future moving forward.
- I don't think I can explain it any better than the website lead in
- A must know for Front-end developers
- It's javascript that can run on the server!
- You can use this to run a javscript task runner like Grunt or Gulp (see below) to make you development way more productive
- See MEAN Stack
NPM (Node Package Manager)
- NPM comes with Nodejs
- NPM is amazing.
- It is used to manage project dependecies using a little file called package.json
- NPM is quickly becoming a core element in front-end web development and in my opinion a driving force for javascripts success
- With tools like Browserify and SystemJS you can now use NPM to manage your browser and nodejs dependencies
Javascript Task Runners
- You can use task runners to do things like
  - start a server
  - watch for changes in html, css, and js and refresh your browser when you save
  - Pre-process your Sass or Less and generate css
  - Create sprite sheets from images
  - So much more...
- There are many options, and I've listed some below try them all and choose the one that works best for you/your team
- Grunt
  - An awesome javascript task runner that will make you super productive
  - Grunt take a configuration approach in which you configure your tasks using a gruntfile
- Gulp
  - An alternative to Grunt that favors code over configuration files
  - With Gulp you write code that pipes your output into the next process and is easy to grok for those that prefer straight code over a config files
- See also Brocolli and Brunch
Yeoman
- A scaffolding tool that can generate a project scaffold for you
- Yeoman is awesome for hitting the ground running on any project!
- Generate out the boilerplate code for your next project with some of the great open source generators out there
- Here are some of my favorites
Bower
- "A package manager for the web" - bower.io
- Bower is a package manager for all of your client-side (browser) dependencies
- Use bower to manage your angular, jquery, or bootstrap versions for example
Ionic
- A front end SDK written with Angular and UI toolkit for creating awesome hybrid mobile apps
- Uses cordova to wrap app in a deployable native application
- Super Super Awesome (See next entry).
ng-Cordova
- Angular directives and wrappers around the Cordova API
MEAN Stack
- MEAN Stack is a full-stack solution that stands for:
  - MongoDB
  - ExpressJS
  - Angular
  - NodeJS
- With MEAN you can use javascript across your entire stack
- MongoDB uses JSON for document storage, Node is javascript on the server, express is a library for setting up a REST endpoint with node, and Angular is the javascript framework for your client.
Firebase
- Firebase is a backend as a service
- Firebase let's you store and sync data in real-time
React Native
- Build native applcations using React and javascript
- This is truely an awesome concept.
- This does not create a wrapper around a UIWebview, but instead uses React Components to render native applivation views.
- It supports both iOS and Android!
- Check out my post below on it.
Aurelia
- Aurelia is a new framework from Rob Eisenberg
- Aurelia uses the latest javascript concepts such as ES6 (or now ES2015), web components and object.observe.
- Also has adaptive binding
- Definitely worth checking out.
ECMAScript6 A.K.A ES6 (Now ES2015)
- ES6 is the latest standard for Javascript
- The link above documents the features that make up ES6
- ES6 is expected to be ratified in June 2015 - lukehoban/es6features
- You can start writing your applications in ES6 today by using a transpiler. The most popular right now are:
  - Babel (see bellow)
  - Google's Traceur
Babel
- Babel is a javascript compiler.
- It allows you to use next generation Javascript standards such as ES6 (ES2015) and later javascript standards today
- It does this by transpiling your ES6+ code into ES5 javascript so that it can work in browsers today.
Materialize
- Materialize is an awesome styling library for material design
- You can think of it like Bootstrap for material design.
- I've been using it recently for prototyping as well as a React application demo and I'm very happy with it.
- Try it out on your next hack to style it up!
JSON Server
- "Get a full fake REST API with zero coding in less than 30 seconds (seriously)" - the readme.md
- This is an awesome module for setting up a mock backend using JSON.
- Focus working on your frontend and iterate on your backend models easily.
- Check out egghead.io's tutorial, Creating Demo APIs with json-server
Reapp
- Reapp is to ReactJS what ionic is to angular
- Reapp let's you build awesome mobile apps with ReactJS
- It contains a set of React Components known as React UI Kit
- It uses webpack and babel out of the box
ImmutableJS
- Immutability in javascript is a popular conversation right now in the community.
- This is Facebook's library for creating immutable collections.
- The site does a good job explaining the benefits of Immutable data.
JSPM
- JSPM is a browser package manager that handles loading all types of modules (AMD, CommonJS, and ES6) in the same was as the ES6 module loader.
- This is a great option for developers looking to use ES6 modules today.
RxJS
- RxJS is a library for that helps writing asynchronus and event based programs.
- RxJS makes it easy to write reactive programs in javascript
- Check out egghead.io's RxJS section to learn the basics.
Webpack
- Webpack is a module bundler similar to Browserify
- Webpack is well suited for large single page apps that need to break up their bundles into diffrent modules
- Webpack 2 is on the horizon. The new website is up and contains new documentation.
Flow
- Flow is a static type checker for javascript (Much like typescript)
- It is often used in conjunction with React becuase it supports JSX
- Check out the Javascript Jabber podcast episode on flow
AmpersandJS
- A modular MVC framework similar to BackboneJS
- It's modularity allows you to pull in only the components that you need
- Try using the ampersand-collection as the store for your ReactJS app.
React-Router
- An awesome router built for ReactJS.
- Extremely useful when building apps with React.
- Similar to other routers and inspired by the amazing EmberJS router.
Redux
- A state container for javascript apps.
- Redux works really well with React apps becuase it builds of the ideas of flux.
- It's state maintenence allows for live code editing and even a time traveling debugger making the developer experience awesome.
- Check out this video from React Europe 2015, where the creator Dan Abramov demonstrates his live reloading and time traveling debugging.
  - Egghead.io has an awesome and free series on Redux by Dan Abramov. Definitely check it out. He does a great job explaining Redux with some testing and ES6 along the way.
DevDocs.io
- Devdocs is a fantastic open source web app for offline documentation.
- Similar to the OS X app Dash, but web based.
- They use local storage to allow users to save their favorite front-end library/framework documentation for organized, searchable, and offline viewing.
- They even recently added the React Native docs!
Elm
- Elm is a functional programming language that compiles to javascript.
- Its architecture makes it easy to build great web apps.
- Elm was the inspiration behind the redux architecture.
- Definitely check out Elm if you are interested in functional programming and super fast rendering inspired by reacts virtual dom.
Virtual Dom
- "A JavaScript DOM model supporting element creation, diff computation and patch operations for efficient re-rendering". - Docs.
- "virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app." - Docs
- Virtual Dom was inspired by the notion of Virtual Dom from ReactJS and basically seperates out that aspect into its own library.
- This concept has gained a ton of popularity since it was implemented and widely introduced to the javascript community by ReactJS.
- Check this library out and see if it could work in your existing app, as a replacement for your view layer.
Electron
- "Build cross platform desktop apps with web technologies" - website
- Electron allows you to build desktop applications using Javascript, HTML and CSS
- Electron was used to build Github's Atom Editor, as well as the popular chat client, Slack, a pretty impressive app.
- Electron allows you to build awesome native desktop applications, and the ones I've seen made with it so far are really great.
- Scotch.io has a tutorial on building an app with Angular and Electron
CycleJS
- "A functional and reactive JavaScript framework for cleaner code" - website
- CycleJS is a framework that uses Observables from RxJS and combines them with a reactive programming library in order to simplify your application architecture.
- Egghead.io currently has a free series on CycleJS.
CSS-Modules
- CSS-Modules lets developers easily scope and compose styles.
- "A CSS Module is a CSS file in which all class names and animation names are scoped locally by default." - readme
- Glen Maddern, one of the authors, has an awesome blog post on CSS Modules
MobX
- "Simple, scalable, state management"
- MobX is a library for managing state within your applications.
- It is similar to redux but has some key differences including the fact that is is built on Observables and uses a Functional Reactive Programming (FRP) pattern.
- Here is a blog post from Formidable labs on why they chose to use Mobx over Redux https://formidable.com/blog/2016/06/02/why-we-chose-mobx-over-redux-for-spectacle-editor/
ExponentJS
- Exponent is a platform for building native iOS and Android apps using React Native.
- It allows you to write a React Native app without ever having to open XCode or Android studio.
- It also has a nice application generator to get you started.
Ignite
- Ignite is a React Native Application generator.
- Ignite helps you get started building React Native applications by scaffolding out an application.
- It comes with a lot out of the box and is a great starting point for anyone looking to build a React Native application.
Yarn
- A package manager for JavaScript from Facebook.
- Yarn manages your npm and bower packages in an intelligent way.
- It supports local caching of packages
Shoutem UI Tookit
- An open-source UI toolkit for building React-Native(#react-native) apps
- This is a very polished toolkit with with awesome UI elements and themes.
JAMStack
- JAMStack stands for JavaScript, APIs and Markup.
- This is a term being used a lot lately to refer to fast secure apps bundled and served over a CDN.
- There is also a podcast below dedicated to this stack.
React Native Express
- An amazing React-Native tutorial that covers everything from Modern JS with ES6 to creating an Uber clone.
- The guide has live examples as well as exercises.
- I highly recommend this for anyone looking to work with React-Native
Svelte
- Svelte is not a JavaScript framework in the way we think of them today. Instead of interpreting application code at run time it interprets it at build time.
- This basically means that you aren't hindered by the performance cost of framework code and in theory your application can load faster.
- You can read the introductory blog post here.
- You can also check out this blog post comparing Svelt to React.
Preact
- "Preact is a fast, 3kB alternative to React, with the same ES2015 API." - docs
- As stated Preact is a ReactJS alternative.
- It has a smaller footprint since it only supports modern ES6.
data-fns
- data-fns is toolset for manipulating JavaScript Dates.
- It is built to be modular so you include only what you need.
- "data-fns is like lodash for dates. It has (140+ functions for all occasions)[https://date-fns.org/docs/]." - docs
Jest
- Jest is a testing framework created by facebook
- Jest works especially well for testing ReactJS code.
- Jest has been around for a bit but after some recent updates has really gained momentum and community support.
- Definitely check it out for testing your React components.
React Bits
- An awesome collection of React patterns, tips, tricks, and techniques.
- This repo collects some of the best React Libraries around!
- It has awesome resources for things like "Gotchas", Style Guides, and Anti Patterns.
Create React Native App
- "Create React Native apps with no build configuration" - repo README
- This project is an awesome way to get started building applications with React Native. It includes the Expo Library (formerly Exponent), which is a fantastic library for Cross platform React Native components.
- Much like Create React App, the build process is abstracted away allowing developers to concentrate on building applications with Javascript rather than spending time setting up a build process and dealing with cross platform compatibility between iOS and Android.
Apollo Client
- A GraphQL client library that works with all the popular frontend frameworks as well as Native applications.
- Apollo makes it easy to fetch only the data you need when interacting with a GraphQL endpoint.
- Works out of the box with Redux, React, and React router.
DraftJS
- An awesome rich text editor by Facebook framework for React applications.
- Draft JS is great for doing rich text editing.
- It has a great plugin ecosystem.
- Everything is customizable.
- I found DraftJS super easy to use. Definitely check it out if you are looking for a rich text editor!
Prettier
- Prettier is an opinionated formatter for Javascript that has gained popularity recently.
- It supports all the latest language features such as ES2017, JSX, and Flow.
- This differs from jshint and eslint in that it doesn't require a large configuration. It instead takes Javascript as input, transforms it and outputs the formatted JS.
React VR
- "Build VR websites and interactive 360 experiences with React" - website
- React VR lets you create awesome virtual experiences using the React framework
- Similar to the way React Native works, React VR let's you code javascript that renders VR UIs instead of plain DOM.

Meetups

A friend of mine has been going to some meetups lately and invited me along to one. Meetups are awesome! They are a great way to network, meet other people who share your interests in development, and hear some awesome talks.

Javascript Meetup Map
- This is a map from Meetup.com of all the javascript related meetups available.
- Just enter your zipcode and find a meetup in your area!

What I'm learning this week

I've decided to add a section covering what topics I'm looking into on a weekly basis. I'm putting it here for now until I move some of this over to a blog.

Week of:

January 17

It's been quite a while since I've updated this so I apologize. I've been keeping busy though. It's 2016 now and 2015 was a great year for JavaScript. We saw React gain popularity while Angular's popularity waned a bit in the wake of Angular 2. While it looks like Angular 2 is finally upon us, having recently gone beta, we have yet to see how the community will take to it. I'll definitely write more on that as things pan out.

Over that last few months I've had the opportunity to work on some brilliant apps at work. I was lucky enough to work on our mobile app which is still being written using React Native with Redux. I more recently have been working on another project at work, a responsive web app using React with Redux. Between those two apps and some hack week projects at work I've definitely gotten to dive into Redux a bit more and can say that I'm definitely enjoying it. It's not without its quirks, but it definitely helps me understand my application in a way that other architectures don't.

In my free time I've been doing something different. I've really started to dig into the Elm programming language, and I have to say, I'm really enjoying it! It's been extremely fun (and challenging) learning a new language. Being fully functional, and statically typed, Elm is very different than what I'm used to with JavaScript. That said, those differences seem to be what make it so great. I'm even enjoying writing tests. In fact, Elm makes writing unit tests so easy, that I've actively been practicing TDD while working with it. I’m planning on putting up a tutorial on building a small app with Elm soon. In the meantime if anyone is interested in Elm, the github repo, awesome-elm, has some wonderful resources for getting started.
October 4

I recently listened to the Javascript Jabber episode on the Elm language with Evan Czaplicki (The creator) and Richard Feldman. It was an awesome and inciteful episode. Shortly after I was lucky enough that my company was able to bring in Richard Feldman to give a talk on his experience with using Elm for his day to day web app development. I decided to give it a shot and I have really liked it so far.

At first it took a while to get used to the syntax (and I'm still far from fully understanding or writing it well), but after going through the docs a ton, things are finally starting to come together. The documentation has been fantastic.

I'm trying it out by building a small application (one that I already started in React). So far it's been going pretty well. The static typing has allowed the compiler to catch any issues, and it makes it really easy to write nice clean code. Once I'm finished with the demo I will be posting it on my github in the form of a tutorial.

Definitely check out Elm! It has a fantastic architecture and its functional style makes writing code clean and fun! It's also the inspiration for the popular Redux architecture.
September 20

The new job now has me commuting by train instead of by car. This presents me with some great time to work on some fun projects. I picked up a Macbook air 11" that has worked out great as a travel machine. One of the limitations though is that I am not connected to the internet while I'm on the trian so everything I do has to work offline. So I have a setup that has been working for me which I will describe. I plan on extending this into an actual blog post at some point soon.

For some background, the app I'm currently working on uses ReactJS as a view layer and AmpersandJS models as the model layer. I'm also writing in ES6 via the Babel transpiler, using webpack, and the webpack dev server. For a UI library I'm using Materialize.

Okay so the first issue was documentation. I needed a way to view docs offline. For that I use both Dash (an OS X app for offline docs) and DevDocs.io that I mentioned above.

Next, I needed a way to make requests for data so that I could model out my stores. For this I used json-server which is an awsome and easy way to serve up json data.

Next, it's important that you aren't trying to use a CDN for any of your apps resources, since the request for those files will fail when offline. Instead try to contain everything within the app either via bower or npm.

All npm and Bower dependencies should be installed prior to trying to work offline. One thing I did was create a seperate project where I install all of the libraries/frameworks I think I will use, and add them to a massive package.json/bower.json. Then, when I need them for one of my apps, I pull them out of that project rather than trying to fetch them from a server.
August 30

It's been a while since my last post and I'm happy to say that the break was due to me switching jobs! I've started an exciting and awesome new role that has me working and experimenting with a lot of exciting front-end technology. This past week in particular I've been working on writing my own Yeoman generators. It's been super fun and simple.

I decided to write a generator to make things easier while I'm working on the React version of my Brew Book application. I found myself spending a lot of time typing out the React Class Components. This led me to create a generator to generate out a React Component Class, it's folder, and corresponding sass file.

After using Yeoman for so long it was awesome to finally write my own generator. It's super simple since it's just node with ejs for the templating.

I'm hoping publish one of my generators soon.
July 5

This week I've been looking more into Webpack and Babel. I plan on using Webpack for the ReactJS version of my BrewBook app. I also think it's time I started writing ES6 so I'll be using Babel as a transpiler. I started reading some great articles on using Webpack with ReactJS and Babel. Setting Up a Single Page React Web App with React-router and Webpack is a great article on getting started with Webpack and the babel-loader.

I also started ES6 and Beyond from the awesome You Don't Know JS series. It is an amazing resource that really covers the new ES6+ features in depth. I can't wait to start using these features.
June 21

This week I published my first two npm packages! I published the modules I was working on last week (ampfire-collection and ampfire-model). It was a pretty awesome experience publishing something to npm for the first time. The npm site has a great guide on how to publish a package, so I just followed that. It was a super easy processes. Essentially, you just create a CommonJS module and export the API that you want. Then your package.json dictates all of the info for your package, including the name that it is exposed as to consumers of the package. You can even add some keywords to your package.json to make it more discoverable on npm. I plan on updated the packages with some tests and even a demo soon. I definitely recommend checking out the guide above and try publishing any libraries you may have created that you think others could benefit from.
June 14

This week I've been taking a look at AmpersandJS. It's a nice modular alternative to BackboneJS and I think it will work nicely as the 'store' component to a Flux application. I plan on using Ampersand collections and models as the stores for ReactJS version of BrewBook. Since AmpersandJS Models and Collections emit events just like BackboneJS Models and Collections, they are easy to integrate with a React view layer in a flux application.

I also started modifying Firebase's BackboneFire library so that will work with AmpersandJS Models and Collections as apposed to Backbone Models and Collections. I'm calling it ampfire. Right now I have it broken into two parts, ampfire-model and ampfire-collection. I wanted to follow Ampersands modularity. Once I'm done it will be easy to integrate your Ampersand stores with Firebase.
May 17

I've fallen a bit behind in updating this post section :/ but I'm going to try and keep it up to date. I've been working recently on a new repo experiment. I have decided to start posting something I've been working on. It's basically my version of the popular TodoMVC. My plan is to make a craft beer catalogging app in a few of the popular frameworks/libraries. I've began posting my first version. It uses the Ionic Framework which uses Angular. The repo is called brewbook-ionic. Next I plan on implementing it in React with Flux.
April 19

This week I thanks to a friend, I had the opportunity to attend the April Code Genius. It was an awesome meetup hosted by the folks at Genius. Jeremey Ashkenas gave an awesome terminator-themed talk on transpilers and how coffeescript compiles to javascript. James Somers from genius gave an awesome and hilarious talk on genius' image annotation feature in their Chrome extension. Dave DeSandro gave a really great talk on his carousel library Flickity and how physics isn't as intimidating as some think.

It was a great experience and I'm already signed up to go to the May Code Genius with Jacob Thorton the creator of Bootstrap, Bower, and more. It will definitely be a good time.
April 12

This week I continued to work a bit on the Users-Demo-React-Native. I've also been working with Ionic a bit again. If you haven't checked out Ionic yet, definitely take some time to give it a look. There is a great video from ng-conf from the guys at Ionic that shows off some of the awesome stuff you can do with it. I plan on putting a repo up soon with a demo application.

The Web Platform Podcast had a great episode the past week with Steve Newcomb of Famo.us. Steve covered a ton of stuff, including their plans for mixed mode, the future of the company, and much more. Definitely check this episode out.

Angular Air had a great episode on testing with Angular with guests, Julie Ralph of Protractor, Andres Dominquez, and Zan Thrash. They discuss, compare, and contrast the different forms of javascript testing.
April 5

This week I do not have much to update since I was on vacation. During that time however, I managed to start my React-Native User's demo discussed in last week's post. The repo is Users-Demo-React-Native. You can read the details of it in last weeks post.

So far I've managed to complete a good portion of the application. Most of the basic functionality is complete and I hope to finalize the functionality and spruce it up a bit in my next commits. I'm thinking about extending it a bit further than originally planned in order to display the use of Flux and more CRUD operations. So far I'm very pleased with React Native, and it has been really fun to use.

During my vacation flight to Austin, TX, I read some awesome articles on ES6 and I started looking into the transpiler Babel. I plan on using this in future development so that I can begin working with ES2015. It already has support for JSX and React and has plugins for all the major build systems.

Also, the Codewinds podcast came back finally! I listend to the two most recent episodes. Episode 14 simply covers the reason for the long hiatus. In Episode 15 talks to Michael Jackson and Ryan Florence about ReactJS!
March 29

This past week Facebook released React Native. I decided to try it out and was very impressed. For those that have not heard, React native is a way to build native applications using React and javascript. This does not involve the UIWebview. It instead uses the fact that React is decoupled from the DOM, to allow components to render to native views such as iOS(only platform supported at the moment).

I followed the 'getting started' guide and the walkthrough for creating a ListView movie application. I was extremely impressed at how easy it was to use. There were a few things that are unique to React Native as expected, but they are easy to pick up once you have some experience with ReactJS. I decided to start a demo repo where I expand upon the movies application. It's called Users-Demo-React-Native. I am using the Random User API from @randomapi to show a master-detail view of users. I will be posting each commit as a 'step' to making the application.
March 22

This week I'm taking a look at Angular 2.0. I have yet to catch up on all the ng-conf videos but plan on doing that by the end of the week. Scotch.io posted an article on The Best News From ng-Conf 2015 a few weeks ago that does a great job summarizing the major points from the conference. I got a chance to listen to Adventures in Angular Episode 34, where the guys discuss the conference and it definitely got me excited.

I also listened to the Angular Air episode 6 with the ionic team. They talk about their excitement for Angular 2 and how they are working closely with the angular team while working on Ionic 2. As someone who loves to use Ionic, I'm super excited to see what it's next version has in store. Check out this blog post from the Ionic blog that goes into more detail on Angular 2 and Ionic 2.

Angular 2 definitely looks like it packs some changes and I have to take a deeper look before commenting on them. On the surface it looks like it has some serious preformance improvements which I'm always down for. I do like the idea that Angular 2.0 will embrace ES6 and web components. I think this is great for the future of web and for pushing standards. I've started using customer elements (one part of the web component spec) at my job and it helped me solve a unique problem with some ease and elegance. I'm definitely excited to check out and start using Angular 2.

Road Map

Here are a few things I'm planning on adding to this repo.

A 'Where to start' guide
- I have had many questions directed my way in the form of "All of these frameworks and technologies are great, but where do I start?"
- I would like this section to help guide developers that may be new to some of this stuff, down the right path to "connecting the dots"
- I will explain how some of the "Things to check out" can be used to create an actual application.
An tutorial section specifically for beginners
- Sometimes its tough to find the right tutorials to jump in to a new library or framework.
- I plan on adding links to tutorials guided towards developers trying out a libarary or framework for the first time.

soham1087 / frontend-resources Goto Github PK