I’m mainly a backend programmer. The only serious frontend programming I’ve done was using Cappuccino, which allowed me to not learn all the things that frontend programmers know.
It’s pretty clear to me that I need to learn frontend skills, but the ecosystem is complicated: Javascript map files and modules, CSS, minimization, brunch, npm, etc. etc. It’s overwhelming. Like many complex creations, “things are the way they are because they got that way” and people who weren’t around as the things happened find the result puzzling.
(AWS is very much this way, too.)
I was hoping I could pick up the frontend ecosystem the way I did SQL[*] and AWS: learning driven by particular problems. That doesn’t seem to be working. So I’m asking for suggestions for a more systematic course of study that would get me to the point where I could include and use some random jquery widget with ease. (My eventual goal is to use Elm as my main frontend technology, but I think it can’t insulate me from the ecosystem.)
[*] When I got my degree, 1981, only losers in the Management Information Systems school learned SQL. Real Programmers did operating systems, compilers, and networking code. Things have changed a bit.
There’s probably a good bit on YouTube. https://www.codeschool.com and https://teamtreehouse.com offer video based training. Not sure how much free content they have. There should be other sites that have video based training if these aren’t options for you. Hope that helps.
I am a NodeJS developer (fullstack) (want to migrate to Elixir and forget NodeJs land because Javascript just…no), and just to let you know. Javascript ecosystem is generally not that pleasant to write in and to follow.
With that being said, what is your goal? If your goal is to be a fullstack developer role that also deals with front end, I suggest learning technologies that are stable and being used widely in production. In this case, I suggest forget about Elm for now.
Lets talk about the Javascript first and then CSS.
What kind of front end you want to create?
If you just want to create a static rendered web apps, you will need:
jQuery for DOM manipulation
React for easy view rendering
you probably don’t need to manage state that complex since it is a server-rendered app mainly
Use ES6 syntax (more pleasant to write and probably you will feel at home since ES6 syntax is closer to server-side language like Java)
If you want to create full dynamic Javascript generated pages, then I suggest learn:
React for view rendering
React Router for routing
Use ES6 syntax (same reason above)
Flux/Redux for state management
Beware of this, many flux/redux implementations requires glue-code/library specific flavor for this. For example, adding Redux will require you to add Redux-Router on top of React-Router. This is just one example among many bajillion dependencies that you probably need to use. Therefore I advocate using MobX (just plug and play and just works, no need many other flavor specific stuff to glue stuff together)
Now lets talk about CSS:
Just use premade CSS framework such as Bootstrap/Foundation/Semantic-UI (the easiest to use is Boostrap, also the most widely used) for now, stick it there on the stylesheet, and just put classes on the HTML tags
If you want to change some styling, just override the pure CSS, no need fancy stuffs.
Later on if you want to get fancy, I personally prefer SASS, Bourbon, and Burrito (basically a CSS authoring libraries with conventions)
Now lets talk about NPM and Brunch:
NPM -> just a package manager for many Javascript libraries. e.g. React, MobX, jQuery, etc
Brunch -> does minification, concatenation, etc, automatically so you don’t have to worry about that. There is webpack that most people use, but stay away from that if you are just beginning to learn front-end (it will be with much much much pain and crazy confgurations)
Heh, been tempted. I used to have a blog a decade ago but shut it down about as long ago too. I just set up another site a few days ago at http://blog.overminddl1.com/ that has nothing on it whatsoever yet (and needs a theme overhaul, if anyone wants to pick out some good colors from here for it (the primary color is the top brown blob and the secondary color is the blue stuff, I am no artist) then I’d be appreciative. But now that I have it I just need to start filing it with content. Unsure where to start, as always. ^.^
And the teaching is actually not in elixir/elm but various little languages for various game things like gdscript (Godot), java, python, haxe, and others. Though I would like to hope that I teach things well (regardless of how many stupid designs I realize I have looking back). ^.^
Thanks. I have a little bit of a niche of adopting tech early (Ruby in 2001, for example). It’s served me well - but I’m usually a consultant and book-writer, rarely a production programmer.
That said, this app is something I plan to make money from, selling to a niche market. But because of my other interests, I’m willing to take a risk on Elm.
In my opinion you should consider starting small and not try to bite off the whole stack at once.
Forget minification, node, modules and all that. Just learn CSS straight up. Then when you have something you want to happen on the page learn how to do it with JavaScript without all the libraries. You’ll find it’s much, much less complicated then many of the stacks and tools make it.
Your next step would be minification.
At the point you do that you’ll start to notice things that you wish could be a little easier or problems that you want to solve. It’s only at that point where you’ll know what you really want out of any Frontend tools and then you’ll understand the benefits.
You’ll also know how easy things really are and that you don’t need 95% of the things that most projects anchor themselves too. The vast majority of web apps are “open, check, close” experiences that don’t come near warranting everything thrown at them today.
“you should consider starting small and not try to bite off the whole stack at once” is probably sensible advice. I’m at a point in my life and career where I don’t have to be sensible. (I don’t mean that in any sort of an insulting or snarky way: I really am fortunate that I can gamble that I can continue to get away without, say, learning CSS at all well.)
I’m in a similar situation, with mediocre knowledge of JS but realizing I can’t escape it if I’m going to do more stuff on the front-end. I’m currently reading “Secrets of the JavaScript Ninja, 2nd edition” and it’s the best book on Javascript that I’ve encountered so far. Well worth the time and investment.
Wouldn’t this “undo” the benefits of using Phoenix in the first place? As a beginner, this is something I’m really struggling to understand. I don’t need to build complicated apps, and Elm seems like an amazing way to continue to build my FP skills, but I want to do right by Elixir/Phoenix first, because I trust this community will evolve faster and go further than Elm in the coming years.
You will leverage Phoenix benefits regardless if you are rendering the HTML on the client or on the server. In one way or the other, you need to get data from the server to the client, be it in HTML or JSON (or something else), and Phoenix is going to excel that. You also need to write business rules and validations on the server and Phoenix/Ecto can help you too.
@reddhouse I think it is just a different way of building apps. Nowadays it is more dynamic (JS rendered) apps and backend only serves as API, or to serve pages that needs to be server rendered (for SEO purposes maybe), just like @josevalim described . I’d say you won’t need Elm to practice FP (never tried Elm, but coded with JavaScript using functional style, also Lisp and Elixir). I personally think JS will stay. There are also other compile-to-JS languages out there such as TypeScript and Clojurescript. Even though you will learn Elm, you will, in my opinion, have to learn / can’t avoid JavaScript. Its just the way it is, you can ignore other languages, but not JavaScript.
