A collection of all the resources I use to keep up with the latest in front-end web development - Tom McGurl @Tom_McGurl
##Table of Contents
- Learning Resources/Tutorials
- Style and Best Practice Guides
- Things to check out
- What I'm learning about this week
- Road Map
- 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)
- 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)
- A must-listen to for anyone getting into or already using Angular
- 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.
- 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
- An awesome podcast with updates on what's going on in the JS community
- In 5 minutes they cover the past weeks JS news
- They also do live streaming of the podcast so users can tweet in questions
- Really great topics.
- React 30
- 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.
- 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
- 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.
- You can read more about the JAMStack here.
Here are some of the great websites that offer tutorials.
- 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
- A must for any front-end developer
- Many of the hosts and guests from the podcasts above contribute tutorials to this site
- Exercism.io is an awesome site with exercises for many different languages.
- 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.
- You can check out my exercism repos here, but the real fun is doing it for yourself ;)
- This site has tons of material on everything development.
- Many of the hosts and guests from the podcasts above contribute tutorials to this site
- 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
- 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.
- "Build 30 things in 30 days with 30 tutorials" -homepage
- 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.
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.
- Posts when new videos come out
- The name says it all
- Shares ReactJS news, tutorials, and creations
- They post when new articles come out and when they release their 'Web Design & Development News: Collective'
- Tweets about EmberJS resources news and the community
- EmberJS news, articles, tips, and code
- Another self-explanitory one.
- Angular news
- @jashkenas (Jeremy Ashkenas)
- Jeremy Ashkenas created BackboneJS, UnderscoreJS, and Coffeescript!
- @wycats (Yehuda Katz)
- Yehuda is a member of the EmberJS, Ruby on Rails, JQuery, and now Rust core teams
- Also check out Yahuda many of the podcasts I've listed above.
- Tweet when new articles com out
- Great way to keep up on the sites tutorials
- @js_dev (Aaron Frost)
- @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
- Tom helped create EmberJS and is part of the core team
- @eisenbergeffect (Rob Eisenberg)
- @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.
- Steve Newcomb is currently most famous for being the CEO and founder of famo.us
- I'm constantly retweeting his stuff becuase it's realy awesome.
- Dan Abramov is the creator of Redux and some awesome React components and libraries.
- This is another frequent tweeter.
- Echojs is a great resource that tweets all things js news, blogs, and repos.
- Follow Frameworks and Libraries
- "Medium is a place to share your stories and ideas" - Medium.com/about
- 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
- He has some great posts
- Ben Nadel's Blog
- Ben has some awesome posts and tutorials
- You'll also always be able to spot him in all of his great photos from different conferences ;)
- Dan Wahlin's Blog
- 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.
- 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
- 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
- You Don't Know JS
#Videos ####Conference Videos
- 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
- ng-conf 2015
- 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)
- ReactJS Conf 2016
- JS Must Watch
- 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.
- "A collection of awesome React tools, resources, videos and shiny things." - the readme
- "A list of awesome AngularJs services, directives, utilities and resources." - the readme
- "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
- "A curated list of awesome Ember.js things." - the readme
- 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.
- "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
- "A curated list of awesome articles, tutorials and resources dealing with React Native." - the readme
- 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 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
- JS Stack From Scratch
- A great curated list of Elm resources.
- 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.
- This guide will help you take advantages of the benefits listed above.
- 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.
- 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)
- Has some great concepts and is a great alternative for any existing view layer in your MVC applicatoin
- Angular and Angular 2
- Extremely popular and a must-know right now
- "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
- 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
- With tools like Browserify and SystemJS you can now use NPM to manage your browser and nodejs dependencies
- 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 take a configuration approach in which you configure your tasks using a gruntfile
- 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
- You can use task runners to do things like
- 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
- "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
- 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).
- Angular directives and wrappers around the Cordova API
- MEAN Stack
- MEAN Stack is a full-stack solution that stands for:
- Firebase is a backend as a service
- Firebase let's you store and sync data in real-time
- React Native
- 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 is a new framework from Rob Eisenberg
- Also has adaptive binding
- Definitely worth checking out.
- ECMAScript6 A.K.A ES6 (Now ES2015)
- 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
- 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 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
- This is Facebook's library for creating immutable collections.
- The site does a good job explaining the benefits of Immutable data.
- 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 is a library for that helps writing asynchronus and event based programs.
- Check out egghead.io's RxJS section to learn the basics.
- 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 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.
- 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!
- 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
- "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.
- Check this library out and see if it could work in your existing app, as a replacement for your view layer.
- "Build cross platform desktop apps with web technologies" - website
- 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
- 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
- "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/
- 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 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 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.
- 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
- 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 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.
- 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 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.
- 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.
- 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!
- It supports all the latest language features such as ES2017, JSX, and Flow.
- React VR
- "Build VR websites and interactive 360 experiences with React" - website
- React VR lets you create awesome virtual experiences using the React framework
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.
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.