These are chat archives for AngularClass/NG6-starter

27th
Jul 2015
Kendrick Burson
@kburson
Jul 27 2015 21:14

I am trying to use LESS with this starter with only partial success. There is a jspm plugin for LESS that allows me to import LESS files instead of CSS files, but it seems to use a browser compiler rather than pre-compiled. This works well when running in Browser-sync, but for some reason it fails when I try to bundle the app.

What I really want to transpile TypeScript 1.5 and LESS, run tests then bundle for deployment. During the build I want the LESS and TS files to be transpiled and minified with sourcemaps.

Is this simply outside of the abilities of JSPM/SystemJS? Should I back off and use WebPack instead?

PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 21:57
@kburson can you open an issue in the repo for this
Kendrick Burson
@kburson
Jul 27 2015 22:18
I have LESS working well with the webpack starter, that was not difficult, but it does not work in the jspm branch. JSPM does not support style transpilers (LESS/SASS/Stylus). There is a jspm-less loader in the works, it does support @import and it will run the application properly styled, but it fails when you try to bundle the application.
What I wanted was a nice way to run and test my app, then bundle for production. I thought JSPM would be the future, and still may be, but it is not ready yet. I LOVE the way JSPM handles all my dependencies, but I cannot use it for the remainder of the build and bundle processes.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:20
@kburson yeah JSPM isn’t production ready yet
which is the reason why we went with webpack initially
Kendrick Burson
@kburson
Jul 27 2015 22:20
Not, to look into using webpack with jspm, or do they overlap too much... yes, having webpack, jspm, npm and gulp altogether seems a bit overkill, but each adds something nice.
I've had my eye on webpack for 8 months now, but JSPM/SystemJS sounds soooo nice.
webpack is tending towards kitchen sinkware.
Oh well, time to learn it better.
Anyone have an outline of development workflow using webpack? I have dependencies in both npm and bower (which i why I like JSPM, but I am not sure if I can overlap that with webpack).
What I need to do is:
1) compile a config.json file from a global resources.json file using environment variables.
2) transpile LESS stylesheets
3) transpile ES6/Typescript.
4) conditionally start from a mock services module (to initialize all the angular service mocks).
Kendrick Burson
@kburson
Jul 27 2015 22:25
I know that webpack can transpile the LESS & ES6.
I was using gulp to compile the config file.
I want to edit, run tests, bundle, debug with sourcemaps, deploy, run e2e (protractor) tests.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:26
@kburson the same repo has a webpack version
https://github.com/angular-class/NG6-starter
Kendrick Burson
@kburson
Jul 27 2015 22:27
Yes, that was what I used, converting the .styl to .less and adding the less loader to the webpack config.
Kendrick Burson
@kburson
Jul 27 2015 22:27
yes. Thank you. already done.
What workflow do you use?
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:28
{ test: /\.styl$/, loader: 'style!css!stylus’ }
replace with
{ test: /\. less $/, loader: 'style!css! less’ }
I work on angular2 so I use this workflow
https://github.com/angular-class/angular2-webpack-starter
I’m slowly working on merging the two repos
Kendrick Burson
@kburson
Jul 27 2015 22:28
I am concerned about Angular2... the API is still in flux, and there are no shims yet to support legacy browsers.
I have a team that needs to support IE 8 ( :-(
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:29
“legacy” which is IE8 and below will be suport via server side rendering
Kendrick Burson
@kburson
Jul 27 2015 22:29
interesting.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:29
so if the user is “legacy” they will only see the server-side rendered version
this also means the site can also work ini IE7/6 with the same method
Kendrick Burson
@kburson
Jul 27 2015 22:30
isomorphic?
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:30
yeah but we call it Universal
Kendrick Burson
@kburson
Jul 27 2015 22:30
ummm, who are 'we'? Do you work for google?
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:31
nah I don’t work for them but the js community is starting to consider Universal as the correct term to use
I’m working with the angular team on server-side rendering
Kendrick Burson
@kburson
Jul 27 2015 22:32
I feel so alone, working in a vaccuum. So nice to here from someone who is connected.
Ok, server-side rendering, does this require node/express/js ?
My teams use PHP for the server side... (not my choice, but they are supporting legacy code 15 years old. I was brought in to lead the effort towards client-server SPA)
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:33
well at the moment we just made it work for node/express but it’s easy enough to port to other node server frameworks. Other lanuages we haven’t looked into yet
this might be a great excuse for you to convice them to serve web under node :p
Kendrick Burson
@kburson
Jul 27 2015 22:34
I guess for the client app it is not too far a stretch to create a node-express server to serve the 'static' content. The PHP services can still run as RESTful services to serve data CRUD. This may require some extra work for IT in setting up production servers etc, and some better workaround for CORS.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:35
yeah the idea for a universal app is that it’s separate from the api and can run in many environments
Kendrick Burson
@kburson
Jul 27 2015 22:36
I wish. We have a hip-shooter principal architect contractor brought in to help clear things out , he wants to convert to Go, Dart or Java... not gonna happen, but nice to think about. My concern with enterprise node servers is more about monitoring, tools and SLAs...
not that they have much of that with PHP. anywasy.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:37
@kburson can you elaborate more on your concerns?
Kendrick Burson
@kburson
Jul 27 2015 22:38
I am curious about your workflow with A2 and webpack, do you have any config files that get built on the fly, or conditional loads? How do you wrap that up in a webpack dev flow (pre-and post bundle).
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:39
@kburson I still haven’t built a dev/prod build yet. you can see the todo here
https://github.com/angular-class/angular2-webpack-starter#todo
Kendrick Burson
@kburson
Jul 27 2015 22:41
Oh, my concerns are a few years old when I started working with node (2012) My prior company (Rally) looked into using node for our enterprise server, serving both RESTful data services (in JS), and our client side code (angular 1.x). We determined that node was not robust enough for enterprise deployment. In the years that followed there were arguments for Vert.x and NginX as being more robust and performant. When I worked on Java and dot net we had a plethora of monitoring tools (easy with a JVM/CLR) but there was nothing for the node environment. Maybe that has changed, haven't really looked into it for the past year.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:43
@kburson if you give me a detailed list of requirements then I can shape a workflow that works for both ng1 and ng2
Kendrick Burson
@kburson
Jul 27 2015 22:43
Ahh, gdi2290, you are Patrick! Aren't you the CTO of your company? If you are who I think you are I have seen you on several podcast/webinars. Smart guy.
oh, wow. thanks.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:43
yeah I’m Patrick
if you open an issue on this repo https://github.com/angular-class/angular2-webpack-starter then I can see what I can do
Kendrick Burson
@kburson
Jul 27 2015 22:44
You and Scott created the AngularClass together, correct?
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:44
yup
Kendrick Burson
@kburson
Jul 27 2015 22:47
I Like listening to Scott as well. I have Sooo many questions about workflows and strategies.. I have built the first gen SPA for my teams Line-Of-Business app using Angular 1.4, ES6, Traceur, gulp... Now the rest of the company want's to follow suit and build apps for their LOB's. I put my investigation into webpack on hold until the first release was done, and now I am investigating how I can convert what I have to a better system. I started looking towards JSPM/SystemJS/SystemJS-Bundler, but that did not work out too well as discussed above. I am switching to Webpack, have your starter working with LESS, will be looking into how I can get the config.json file compiled on the fly.
When I have it all down I will be introducing it to the other teams. I want to invite you guys to come up and teach your class, but that won't be afore 3-6 months from now (or so I hear).
The config.json file contains all the RESTful service urls used by the application, they change depending on runtime (dev/staging/production).
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:49
@kburson the website is largely outdated so it’s best to email us directly for training
Kendrick Burson
@kburson
Jul 27 2015 22:50
Then I have the static assets (fonts, images, mock json data) that I currently copy to a build folder where all the compiled assets go.
I am looking to configure webpack to handle more of this in place and have gulp do less work...
I like your 'yeoman'-like generator in your starters. Very clever.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:53
are you saying have webpack build your static assets rather than a gulp task to copy it?
Kendrick Burson
@kburson
Jul 27 2015 22:54
ok. I will collate a concise list and post it to an issue on the starter repo, although I am focusing on angular 1.x, because this will be the limitations of the other teams (while I can use A2, they must support IE8, I will have to investigate what the technical requirements are for them to use isomorphic rendering alongside their PHP services that can work around the various CORS issues).
Thank you for your time.
PatrickJS [tipe.io]
@gdi2290
Jul 27 2015 22:55
@kburson I’m working on having the repo both in both frameworks or at least make it easier for migration. So if all else fails I can update the angular 1 repo from your list
Kendrick Burson
@kburson
Jul 27 2015 22:55
ok.