JS frameworks in SF

These past few weeks have been extremely busy and challenging without a place to live but luckily I am now secure in a place and stable enough to writing blog post on the regular.

I have had the opportunity since arriving in the city of San Francisco to attend a number of meetups and training Sessions.

Ember:
I have been partial to Ember for the reason that I felt like focusing on one framework first prior to branching out, the main reason I chose Ember is because I actually personally knew people who used Ember in projects and could ask them questions. Even with Angular being a larger community; I just did not have an opportunity to meet any of them prior to starting my first frontend project.

Ember has a very impressive community in SF, and I had the opportunity to attend my first EmberSF and was very impressed with the caliber of talent that attended the event. I am still very pro Ember but like the fact of peeking/using other frameworks at different times.

Ember is great for teams because of its structure, no matter what Ember project you can, similar to Rails, know where important components are located and understand the basic structure.  This reason is due to the "Ember Way" of doing things is generally the same across the board. A

Another nice thing about Ember is they had an early adoption of ES6, which actually has helped me in understanding other frameworks like React and even the differences between node and io.js. There is a lot cool things happening with ES6 and I had the opportunity to learn it through Ember even while being very new to Javascript development.

Some things I am finding challenging with Ember is finding the libraries that match the newest way of package management with ember-cli. I know there is a ton of libraries out there but just not a ton of documentation due to "newness" of everything. With that being said, I am excited at the opportunity contributing to the community in that way while I discover different better practices.

Angular:
When I took the job at Bloc, I was made aware of the use of Angular in the project and began researching Angular right after I accepted the position. Probably due to my love for Ember, I did not find the excitement in learning Angular, as much I did with Ember. I however attended an all-day Intro-To-Angular workshop the second weekend I was in SF.

Now that I have gotten past the initial beginner phase with Angular, I have come to appreciate the stability of Angular and how has fast it is to get up and running in a project. Ember is big into separating the API from the concerns of the frontend framework, but Angular seems separate but still knowledgeable about everything.

In a conversation I had with neighbor while pairing at the event, Angular is still new to developing best practices in creating an app and it has been a struggle to newer devs to Angular. I believe things will be getting better when Angular 2.0 is rolled out and I have heard word that there will be a planned upgrade path for those on Angular 1.x, which is contrary to what was announce last year - which is good.

I do have to say it is nice knowing how to use a framework as popular as Angular and being able to contribute to the JS framework conversations. I also think it will take a lot to unseat Angular as the leader in the framework battler for the simple reason that chaos of how customizable Angular is probably one of its strengths. Ember has a lot of the conventional ideas of Rails and some of it own and it does not seem conducive for a non-ruby/ post-ruby dev to learn these conventions. If someone writes PHP or JAVA in a way and wants to apply Angular to a project, they can with their own special conventions.

I think the next year of Angular will be pretty interesting and I am appreciative that I know a bit of it and have gotten up to speed enough to be able to work with it on a day to day basis.

React

React is definitely a framework I have hardly any experience with but I did attend a react meetup last night and very impressive with what it can do. I do know some of the React creators were big Ember evangelist at one time and saw many similarities to Ember in the React 101 talk last night. I am definitely impressed with the speed of React and what it does on the View layer, but the idea of calling a "framework" doesn't seem right.

The React core team addresses the product as a "library",  which I will from now on. React actually should be thought of as a jQuery replacement tool. It does a lot of work to speed the rendering of your views and like the full-service frameworks react only needs your api, regardless of what language it is written in.

The other portion that makes React be considered a framework is Flux, a separate project that helps with data stores. When you receive an object from a JSON API (one of many options) the framework/library grabs the data and stores that object and attaches "observes" to watch for any changes to update. Flux is very similar to Ember-Data and js-data, actually js-data copies a lot of what Ember-Data does and Flux has a lot of similarities Ember-Data as well.

I envision that Flux and React to become synonymous with each other in the future to make that "framework" everyone is looking for. I have plans to actually start a React project soon and even take a chance React-Native with that same project, but per the presenters comments there are a lot of things to left to be desired in React as they continue to iterate on this new product.

Conclusion:
There is actually a lot to be desired in all the frameworks and in reality, I don't any framework will ever solve every known problem.  

As soon as I wrote about my experiences with Ember last summer I received a lot of feedback on why I did not choose Angular and I did not have a great answer other than fact that I didn't know any Angularist I could get feedback from. I understand there is a "Holy War" going on right now about which Javascript frameworks is the best, but that is dumb.

My recommendation is to pick one framework and learn it and don't be afraid to branch out to learn from other frameworks, because at the end of the day its all still Javascript.

P.S. I hear Meteor is by far one of the easiest to learn and though it was not mentioned here, I highly recommend reading up on that one too.

Deploying my first Ember App

For every Rails app I have created and thought about creating I have used Heroku. I have never had a need to use anything else, as none of the apps I have developed had users and needed to grow beyond the same place of Heroku.

It is very apparent that Heroku has cornered the market on new Rails apps and most people I know don't think twice about running `heroku create <my-app-name>`, especially with the recent announcement from ninefold and their closing down their Rails service.

When it came time to deploy my first ember app I automatically assumed I would use Heroku, since I already had the Rails api waiting in a heroku dyno. Literally the day before I deployed my app I heard a coworker mention how another company in the Orlando area deployed their ember app to a lesser know company, Divshot.

I wasn't aware of their service to deploy static web pages, and also was aware of an ember-cli addon that makes deploying to their service so easily. I had some issues that with getting my rails api url to get included in the config, but once I got that figured out it was a breeze to deploy. The deployment was actually so easy that I have completely discounted the need for heroku and might even transition some of my more popular static pages to the Divshot service.

If you are looking into publishing your first ember app, I highly recommend giving Divshot a try and using the ember-cli-addon.

First Ember app complete...sort of

I spent some time in Ember tutorials and had plans to have an Ember project built and launch back in January, but some unfortunate life events got in the way.

I am now proud to announce that I have completed my goal of getting an Ember app built and launched in 2015. The app itself if very much in an MVP state and I am looking forward to finish the other features I have planned.

Some of my experiences while working Ember how impressingly fast it is to build a Rails API when you aren't concerned with the asset pipeline or views. Ruby is a great server side language and fast enough for me, but sometimes Rails can be a little much; I highly recommend reading my blog post on the Rails API gem, which makes building an api a breeze.

Most people I have spoken with get hung up with the fact that Ember is constantly changing, which developed a very steep learning curve for learning it. I personally completed the Vic Ramon, Treehouse, ember-cli-101 resources and found them to be enough understand the basics in Ember.

I also spent some time learning form the forms and docs, as wells as attended EmberOrlando a few times.

I was basically at a point where I needed to start an Ember project and start learning things outside a tutorial, which I found to be challenging but obtainable.

My first hiccup came when I tried to connect my sample fixture data. The solution was rather easy and actually kind of silly how simple it was.

My next hurdle actually came when deploying the application to Divshot. I normaly use heroku as my go to deployment vehicle, but heard of the great tools available for ember and more specifically ember-cli. The solution for this was not as simple but I figured it out with help from @robdel12 and @jgwhite.

Takeaways:

Now that I have finally moved into world of modern day "Full Stack Developing", I am exited at the idea of separating the concerns of the api and client-side. This will give me the ability to one day try out the ever so popular React.js or even use the api data to produce an iOS app.

I highly recommend everyone who has been in rails with their head down while Front-end frameworks have been popping like rabbits.

I plan on doing more detail post into Ember and its structure in the future, but if I could recommend one tutorial to get started, it would be the ember-cli-101 book. Its the most up to date and gives you a great understand to how Ember works. It also provides the generator commands similar to Rails, that will help you get started much faster.

If you would like to view the app live, its temporary home is here and will the code is here. 

Components not Controllers in Ember

Months ago I blogged about my experience with randomly pairing with a healthy hacker,  yesterday I concluded another random pairing and with an associate,  @jgwhite. Jamie leads the Ember UK meetup and I was looking for some ember help with my current project.

I am looking to create a database for diverse speakers in tech to share with the steamrolers community.

My specific task was looking to create a save function in my controller so when ever some one creates a new speaker with my speaker form, the createRecord function would fire. Unfortunately that was not happening and actually just throwing an uncaught error.

I spent a good part of my Sunday searching through stackoverflow and forum questions trying to figure out why functions were not working.

After a bout 10minutes of explaining my issue with Jamie, He was able to identify that my problem was due to my save action being nested in a SpeakerController and the form was calling it from the higher application layer. But it wasn't enough, just to replace the save action in the ApplicationController,he recommend to go a step further and create a Component.

I now understand that despite the common comparisons, Ember is nothing like Rails other than the fact they both have opinions. The Controllers work in entirely different ways and come Ember 2.0 the use of Controllers will be removed. I am now able to use the newly created speaker-form component to call my speaker.save() function and even add an a validations like containsInvalidCharater.

Ember is definitely a moving ship, just like all other well maintained Front-End frameworks. The learning curve is high and constantly moving, but the reward with easy prototyping client side applications is well worth it. I am looking forward to using the foundation I am building with this app to create more things with Ember.

If you are new to learning Ember, I would love to pair with you or chat about your app, in effort to pay forward the help I got with mine.

Ember tutorials all completed (mostly)

I started learning Ember back in July, which seems like forever ago. I really wished I stuck with it then, as I would already have production ready apps built by now, but at that time I had just begun work at IZEA and felt as if my focus should be on Rails learning.

I am now approaching my 7th month working in a professional Rails environment; I am definitely at great place to learn new technologies, like Javascript frameworks and iOS programming in Swift.

My vacation ends after tomorrow and I had high hopes to learn and build new technologies, but that plan did not come to fruition. I like to aim high and fail with success and though I did not get to build that Ember app I planned on building, I did complete a number of tutorials and reading.

I mentioned the ember-cli book briefly on this blog and planned on writing summary/review but have been delayed numerous time due to errors/long debugging sessions while trying to complete. I am still very new in web development and compare my struggles in learning Ember very similar to learning Rails, with most of them being spelling errors. I have done a good on debugging issues thus far but have run into some issues managing packages, I believe I missed a step, other than that I highly recommend the book on getting a great intro to Ember.

I have completed the actual app portion of the book but have yet to complete the ladder part, which includes testing and the rest of the dependency management. I did however learn that in the 3 tutorials I completed this week, Treehouse Ember Course, Code School Express.js Soup to Bits, and Ember Guides.  

After all that I am in a great position to start an actual Ember project. My biggest recommendation for anyone learning Ember or any other framework is read he guides/docs, even if you skim them. I did this for Rails and now Ember and have to say Ember has one of the easiest documentation to read. I have a better understandings of the overall opinions in the framework and workflow.

I am looking forward to a future blog post where I can write about the completion of this Ember app I am planning.

ember CLI install and murdering my node

Never ever ever sudo with npm installs. I did not know this and probably unknowingly did this all the time. In my early days in Rails I never had an issue, only because once you install Rails it's stalled and be upgraded in the Gemfile. With Javascript, I am quickly finding that a lot of things require the node package manager (npm) to install and upgrade. I recently upgraded my ember to use the ember-cli, came across this sudo errors, but thanks to this homebrew issue thread I was eventually able to solve my problem.

My solution included this premade bash script called "murdering your node." From there I could clean install node and ember-cli.

If you are interested in learning Ember I suggest starting with the ember-cli-101 book. It is hands down the best Ember tutorial I have done and has gotten me pass some of the toughest hurdles I have faced in learning a Javascript MVC framework on my own.

*FYI: just to be clear you can sudo your way through npm, but it is not recommended, especially with ember-cli.

Ember Talk tonight

I am giving a talk on Ember @FrontEndOrlando. I spent about 3 months interested in Ember, but never took the plunge into trying it out. After finally getting a job in Rails I have taken my extra learning time at home to learn things such as Front-End development and Objective-C.

Giving a talk has also been on my list for awhile and I am killing two birds with one stone by presenting on Ember. I learned a lot in the last few weeks and looking forward to starting a project using Ember soon.

Link to my presentation(draft).

My thoughts after Completing my first Ember tutorial

I spent some time with this Vic Ramon's tutorial and learning how to create a basic app with Ember. For those who don't know, Ember is a Front End Javascript framework which is built similar to how Rails is built.

Comparing it to Rails. 

Ember is labeled as an MVC framework, where there is a Model View and Controller to work through each layer while completing the app. It is very possible, just as in Rails, to complete the entire app in one page and 100's of lines of codes, but each file (Model, View, and Controller) holds each part of the functionality. Just like Rails, the Model holds the info, the Controller makes the Model move, and the View is where you see it. There is also a Router just like Rails, and having familiarity to all this made since.

Its hard to compare the two exactly or whether you should learn one over the other, since are both to different things. I liked that the tutorial I completed is used Ember as the Front End of a Rails app. This basically removes the need to put all Front End functionality into the asset pipeline.

I found it very cool how I quickly understood the concept of Ember while going through the tutorial. I always avoided learning a Javascript framework due to my extreme focus on Ruby/Rails and lack Javascript knowledge, but similar to Rails you do not need to know a ton of Javascript to learn Ember, Angular, or any other framework for that matter. The tutorial also gives you some links as you read through and complete the process.

I can tell you that the going through this tutorial was easier than going through any other Rails tutorial, but that is because I had the Rails understanding. Knowing programming in general, plus have a little bit of experience made this extremely easy to get through once I got going.

My impressions

Im very impressed with the Ember community, similar to how the Ruby community impressed me with their openness to newbs. The community is also very small and even the core members seem accessible for questions. I am looking forward to checking out another tutorial, most likely a pure Ember app without Rails, like this one.

What I did like about the Vic tutorial is the ability to switch from Coffescript and Javascript. Rob is probably not going to like this recommendation, but if you are know Rails already and now learning JS, learn Coffeescript. The syntax of Ember reminds of Coffeescript and it makes sense why Vic, recommends it over vanilla JS, however I do know there is a large job market for people who know pure JS, so to each their own. I have never taken a Javascript based course to learn the basic syntax and barely 20% of the way through the Codecademy (I need to finish that), but I am surprised how much of the syntax I understand.

During the tutorial I finally learned how to properly debug JS in the Chrome console (here is a good tutorial on it). I had a couple typos preventing me from moving on with the tutorial, but in total it took me about 6 hours my second time. The first time I went through the Ember tutorial I had a lot of issues with Coffeescript syntax errors and switched over to pure JS, but by then I had a better understanding Ember and was able to fly through it. I plan to finish the Coffeescript version tomorrow and recommend if you do try this tutorial to try both, its good exposure.

If you know Rails and looking to get into a FrontEnd framework, then definitely try out this tutorial.

Ember and VIM tutorial

Staying true to my goals I have started the Ember tutorial. I am only half and can't really report on it at the moment, but I do have to say its nice to go through a tutorial on a framework and understand everything that is going on. Ember is a MVC framework, which operates very similar to Rails and with my background in that framework has made it super easy to breeze through this tutorial.

On another note, I typed `vimtutor` in my terminal and got a pretty cool initiation to VIM. I didn't even know it was there but as many recommend, I think you should give it a try. There will be a day when you will have to interact with VIM, just make sure you know that `j` will move the cursor down.